1. 准备工作：了解基本概念和界面。
  2. 详细切图步骤：从零开始，一步步完成切图。
  3. 导出切片：将切好的图保存为独立的图片文件。

第一部分：准备工作

什么是切图？

切图,就是把一张完整的设计稿（比如网站首页的 PSD 文件）切成若干个小图片，然后通过 HTML 和 CSS 将这些小图片重新拼接起来，显示在网页上。

photoshop cs4 切图教程
（图片来源网络，侵删）

为什么要切图？

  • 加快网页加载速度：浏览器可以并行下载多个小图片，而不是等待一个巨大的图片下载完毕。
  • 优化性能：可以对不同部分使用不同的压缩格式（如 .jpg 用于照片，.png 用于图标和透明背景）。
  • 方便开发：将背景、内容、按钮等分离，方便前端工程师进行布局和样式调整。

熟悉 CS4 的“切片工具”

在 Photoshop CS4 中，我们主要使用 切片工具 和 切片选择工具。

  • 切片工具：用来创建新的切片。
  • 切片选择工具：用来选择、移动和调整已有的切片。

它们通常被放在一个工具组里,如果只看到一个，可以长按或右键点击进行切换。

第二部分：详细切图步骤

假设我们有一个网站首页的 PSD 文件，现在需要把它切成头部、导航、内容区、底部等部分。

步骤 1：打开并准备设计稿

  1. 打开你的 PSD 文件。
  2. 为了确保切图准确,建议先 隐藏所有不需要导出的图层，比如辅助线、文字图层（如果开发会用代码写文字）、注释图层等。
  3. 确保设计稿是 实际像素大小，按 Ctrl + Alt + I (Windows) / Cmd + Option + I (Mac) 打开图像大小对话框，确保分辨率是 72 PPI（网页标准）。

步骤 2：使用切片工具创建切片

  1. 在左侧工具栏中找到并选择 切片工具。

    photoshop cs4 切图教程
    （图片来源网络，侵删）

  2. 将鼠标移动到画布上,你会发现光标变成了一个带小刀的十字。

  3. 按住鼠标左键，拖动出一个矩形框，这个框就是你要切下的区域，你想切出网站的 Logo，就用鼠标框选 Logo 的部分。

  4. 重复此操作,用切片工具框选所有需要独立导出的部分，

    • 顶部 Logo
    • 导航栏的每个按钮
    • 轮播图
    • 内容区的图片和装饰
    • 底部的版权信息背景

技巧：

photoshop cs4 切图教程
（图片来源网络，侵删）
  • 参考线是你的好朋友：在切图前，可以先使用 Ctrl + R (Windows) / Cmd + R (Mac) 显示标尺，然后从标尺上拖出参考线，让切片的边缘对齐参考线，这样切出来的图会更精确。
  • 按住 Shift 键：如果需要切一个正方形，可以在拖动切片时按住 Shift 键。

步骤 3：使用切片选择工具调整切片

当你用切片工具切完所有区域后,Photoshop 会自动填充一些蓝色的切片，这些是基于你手动创建的切片自动生成的“自动切片”，我们主要关注“用户切片”（即你手动创建的、有编号的切片）。

  1. 切换到 切片选择工具。
  2. 选择单个切片：直接点击一个切片，它的边框会高亮显示。
  3. 移动切片：选中一个切片后，将鼠标移到切片内部，当光标变成一个黑色箭头时，按住并拖动，可以移动这个切片的位置。
  4. 调整大小：将鼠标移到切片的四个角或四条边上，当光标变成双向箭头时，按住并拖动，可以调整切片的大小。

重要：调整大小时，最好按住 Shift 键，这样可以保持宽高比不改变。

步骤 4：为切片命名（可选但推荐）

为了方便后续识别和管理,可以为每个切片命名。

  1. 使用 切片选择工具 选中你想要命名的切片。
  2. 在顶部的选项栏中,找到“切片”选项，你可以在“名称”一栏中输入自定义的名字，logo.png、nav_home.png 等。

第三部分：导出切片

这是最后也是最关键的一步,将所有切片导出为独立的图片文件。

使用“存储为 Web 所用格式”（最常用）

这是最专业、最推荐的方法，因为它可以在导出前对图片进行优化。

  1. 点击顶部菜单栏的 文件 > 存储为 Web 所用格式... (File > Save for Web & Devices...)。
  2. 弹出一个新的对话框,里面会显示你所有的切片。
  3. 选择切片：在对话框的左上角，确保选择了 切片选择工具（一个带小白框的箭头），然后点击你想要导出的切片，如果一次想导出所有切片，可以点击右上角的菜单按钮（三条横线），选择 “全部导出...” (Export All...)。
  4. 设置切片选项：在对话框的右侧，你可以为当前选中的切片进行设置：
    • 预设：选择图片格式和质量，对于照片类图片，选择 JPEG 并调整质量；对于带透明背景的图标，选择 PNG-24。
    • 颜色：设置颜色数量，可以减小文件大小。
    • 杂边：为透明 PNG 设置一个背景色，防止在某些浏览器上出现白边。
  5. 设置导出选项：点击右下角的 “存储” 按钮。
  6. 在弹出的“将优化结果存储为”对话框中：
    • 保存在：选择你要保存图片的文件夹。
    • 文件名：可以随便写一个，因为我们会导出所有切片。
    • 格式：选择 “HTML 和图像...” (HTML and Images...)。
    • 设置：在“设置”下拉菜单中，选择 “仅限图像” (Images Only)。
  7. 点击 “保存”。

完成！现在去你保存的文件夹里查看，你会发现里面已经生成了所有你切好的图片文件，并且它们就是你之前命名的名字（或者按序号命名）。

直接导出所有切片（简单粗暴）

如果你不需要对切片进行精细的优化,只是想快速得到图片。

  1. 确保你的所有切片都已经创建好。
  2. 点击顶部菜单栏的 文件 > 导出 > 存储为 Web 所用格式 (旧版)...。
  3. 在弹出的对话框中,直接点击 “存储”。
  4. 在接下来的对话框中,选择保存位置，文件名任意，格式选择 “仅限图像” 或 “HTML 和图像”，然后点击保存。

这样也能得到所有切片的图片,但无法单独控制每个图片的质量和格式。

总结与技巧

  • 先规划，后切图：切图前想清楚哪些部分需要分开，哪些可以合并。
  • 善用参考线：保证切片边缘的精确性。
  • 命名要规范：养成良好习惯，模块名_功能.png，方便自己和同事识别。
  • 注意图片格式：
    • JPEG (.jpg)：适用于照片、色彩丰富的图片，不支持透明背景。
    • PNG-24：适用于需要完美透明背景的图片（如 Logo），但文件较大。
    • PNG-8：适用于颜色较少、需要透明背景的图标（如按钮），文件比 PNG-24 小。
  • 清理切片：切完图后，如果对结果不满意，可以使用切片选择工具选中所有切片，然后按 Delete 键删除，重新开始。

希望这份针对 Photoshop CS4 的切图教程对你有帮助！虽然软件版本老，但核心思想是通用的。