PS 切图指南

切图是指从设计稿（PSD 文件）中取出视觉素材，产出 PNG、JPG 等格式的图片文件的过程。

PS 操作基础：

选项设置：
- 编辑 > 首选项 > 单位与标尺：将单位更改为像素。
- 在窗口菜单下启用：
  - 工具
  - 选项
  - 信息（F8）
  - 图层（F7）
  - 历史记录
- 在视图菜单下启用：
  - 对齐
  - 标尺（Ctrl + R）
  - 显示额外内容
  - 显示 > 参考线（Ctrl + ;）
  - 窗口 > 工作区 > 新建工作区：保存设置好的工作区
切图常用工具：
- 移动工具：用以移动图层
  - 启用自动选择
  - 选择图层
- 矩形选框：用以测量尺寸
  - 选中图层区域之后，可以在信息面板看到矩形的宽高。
    - 添加到选取：按住 shift
    - 从选取减去：按住 alt
    - 与选取交叉：按住 shift + alt
  - 需要测量的内容：（所有数值型单位都要测量）
    - 宽度、高度
    - 内边距、外边距
    - 边框
    - 定位
    - 文字大小
    - 行高
    - 背景图位置
- 魔棒工具：选取不规则的图形边缘
  - 使用设置：
    - 容差：设置取样时的范围
    - 消除锯齿：取样更加光滑
    - 连续：选择的区域是否是连续的
  - 判断背景是否是线性渐变
- 裁剪 + 切片：裁剪图片
- 缩放：调整图片显示大小
- 取色器：提取图片颜色
  - 需要取色的内容：（所有的颜色都要量取）
    - 边框色
    - 背景色
    - 文字色
  - 判断背景是否纯色
切图：
- 需要切出的内容：
  - 修饰性图片：（一般用于 background 属性）
    - 图标、logo
    - 有特殊效果的按钮、文字
    - 非纯色背景
  - 内容性图片：（一般用于 img 标签）
    - banner、广告图片
    - 文章配图
- 保存格式：
  - 修饰性图片存为 PNG24、PNG8
  - 内容性图片存为 JPG
- 切图：隐藏文字保留背景
  - 若文字为独立图层，隐藏文字图层
    - 找到文字图层
    - 去掉眼睛图标
  - 若文字与背景合并，平铺背景覆盖文字
    - 矩形选框工具
    - 自由变换（ctrl + T）或使用移动工具 + alt
- PNG24（带半透明效果）：
  - 移动工具选中所需图层（按住 ctrl 多选）
  - 右键合并图层（ctrl + E）
  - 再右键复制图层到新文件或是直接拖动到已有文件（新建：ctrl + N）
- PNG8（不带半透明效果）
  - 合并可见图层（shift + ctrl + E）
  - 矩形选框工具选择内容
  - 魔棒工具取出多余部分（从选区中减去：按住 alt）
- 可平铺背景的切图（CSS background repeat）
  - 用矩形选框工具选取一块区域
  - 复制黏贴到新文件中
  - 平铺内容充满文件的 X 轴或 Y 轴
- 活动页切图
  - 拉参考线（从标尺往图片内拉）
  - 选择切片工具
  - 点击基于参考线的切片
  - 保存-存储为 web 格式（全选切片，统一设置储存格式）
- 图片保存格式：
  - 保存-存储为 web 格式
  - 保存参数设置：
    - 图片色彩丰富且无透明要求时，保存为 jpg，并选择合适的品质（一般为 60~80）
    - 图片色彩不太丰富时，无论有无透明要求，均保存为 PNG8 格式。参数设置为无仿色、无杂边
    - 图片有半透明要求，需要保存为 PNG24
    - 为了保证图片质量，保存一份 PSD，在 PSD 上进行修改。

图片修改与维护：

增加画布大小：
- 图像 > 画布大小：增加画布大小。同时要将定位设置在左上角。
减小画布大小：
- 用矩形选框工具选择区域，然后裁剪。
移动图标：
- 若图标为独立图层，直接用移动工具移动
- 若图标为非独立图层，用矩形选框工具选中图标区域，再用移动工具拖动
注意事项：
- 修改 PNG8 格式的图片要将颜色模式从索引改为 RGB 模式。
- 图像 > 模式 > RGB 模式

图片合并方案：

大小与质量：
- 平衡与取舍
- 压缩工具
图片合并：
- 把同属于一个模块的图片合并
- 把大小相近的图片合并
- 把色彩相近的图片合并
- 综和上述方式合并
图片排列：
- 图片之间必须保留空隙
- 图片主要使用横向排列与纵向排列两种方式

浏览器兼容：

IE6 不支持 PNG24 半透明
- 存两份，一份 PNG24、一份 PNG8
使用 CSS3 来处理圆角与阴影，低级浏览器使用直角

PS 操作基础：

选项设置：

切图常用工具：

切图：

图片修改与维护：

增加画布大小：

减小画布大小：

移动图标：

注意事项：

图片合并方案：

大小与质量：

图片合并：

图片排列：

浏览器兼容：