切图是指从设计稿（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 来处理圆角与阴影，低级浏览器使用直角