PS 切图

Posted by Yucan on July 2, 2016

什么是切图

前端工程师拿到设计稿后，先通过「切图」工具获得网页素材，然后在代码中引用这些素材。

why 切图？为了给网页提供素材~

  • HTML: img <img src="images/avatar.jap" alt="头像">
  • CSS: background
.icon{
    background-image: url(../images/sprite.png);
    background-position: 0 0;
}

如何切图

  • 使用 ps 工具
  • 使用背景图
  • 图片合并方案
  • 浏览器兼容

使用 ps 工具

ps 版本

  • 03 年 Adobe Photoshop CS
  • 13 年 Adobe Photoshop CC (CS6 是 CS 系列的最后一个版本）

基本设置和操作

  • PS 首选项设置
    • Photoshop CC > 首选项 > 单位与标尺 > 改为「像素」
  • 调整工作区以适合切图
    • 「窗口」下开启：工具，选项，信息(F8)，图层(F7)，历史记录
    • 把信息、图层和历史记录三个窗口，拖到右边栏
    • 保存当前工作区 (窗口 > 工作区 > 新建）
  • 切图要用到的工具
    • 移动 (选择图层，移动图层）
    • 矩形选框 (查看所选矩形框的信息）
    • 魔棒 (切不规则的图形）
    • 裁剪 & 切片
    • 缩放 (缩放工具，command +/-，option + 滑动）
    • 拾色器
  • 撤销操作
    • command + z 切换上一次操作与当前操作
    • command + option + z 连续撤销
    • 在历史记录里选择
  • 辅助视图
    • 视图 > 打开对齐，显示额外内容，标尺(command + r)> 显示 > 参考线(command + ;)

测量和取色

了解了 PS 切图的基本操作后，就要开始正式切图了。切图的第一步，获取设计稿中的信息。

打开设计稿，获取信息

  • 尺寸信息 → 测量 width: 200px;
  • 颜色信息 → 取色 color: #ffcc00;
  • 测量
    • 测量什么？(所有数字都要测量）
      • 宽度，高度
      • 内边距，外边距
      • 边框
      • 定位
      • 文字大小
      • 行高
      • 背景图位置
    • 测量工具
      • 矩形选框工具 & 信息面板
    • 选区
      • 添加到选取：按住 shift
      • 从选取减去：按住 option
      • 与选区交叉：按住 shift + option
  • 取色
    • 取啥色？(所有颜色都要取色)
      • 边框色
      • 背景色
      • 文字色
    • 取色工具
      • 拾色器 & 吸管
    • 小技巧
      • 用拾色器确定背景是否是纯色
      • 用魔棒确定是否是线性渐变

切图之前

  • 哪些是需要切出来的
    • 修饰性的 (一般用在 background 属性）
      • 图标，logo
      • 有特殊效果的按钮，文字等
      • 非纯色的背景
    • 内容性的 (一般用在 img 标签)
      • Banner，广告图片
      • 文章中的配图
  • 切出来的图片存为哪种类型？
    • 修饰性的：PNG24，PNG8
    • 内容性的：一般存为 JPG

切图的具体步骤

  • 隐藏文字只留背景
    • 若文字为独立图层，隐藏文字图层
      • 找到文字图层
      • 去掉眼睛图标
    • 若文字和背景合并，平铺背景覆盖文字
      • 矩形选框工具
      • 自由变换 (command + T)
      • 使用移动工具 + option (+shift)
  • 保存
    • png24
      • 移动工具选中所需图层 (按住 command 多选）
      • 右键合并图层 (command + E)
      • 再右键复制图层到新文件，或直接拖至已有文件 (command + N 新建）
    • png8 (不支持半透明效果，带背景切）
      • 合并(可见)图层 (shift + command + E)
      • 矩形选框工具选择内容
      • 魔棒去除多余部分 (按住 option)
  • 可平铺背景的切图
    • 用矩形选框工具选取一块区域
    • 复制粘贴到新文件中
  • 切片工具(适用于可以一刀切的活动页)
    • 拉参考线
    • 选择切片工具
    • 点击「基于参考线的切片」按钮
    • 保存 (全选切片，统一设置储存格式)

保存

切完图后，需要对我们切出来的内容进行保存。

  • 操作
    • 复制(command + c)、新建(command + n)、粘贴(command + v) (or 拖动内容至新文件）
    • 存储为 web 所用格式 (shift + option + command + s)
  • 格式
    • 当图片色彩丰富且无透明要求时，保存为 JPG 格式并选择合适的品质
    • 当图片色彩不太丰富时，无论有无透明要求，保存为 PNG8 格式
    • 当图片有半透明要求时，保存为 PNG24 格式
    • 为保证图片质量，保留一份 PSD，在 PSD 上进行修改

修改和维护

  • 要继续放更多的图片？ → 更改画布大小 (图像 > 画布大小 > 选择宽高，定位左上角)
  • 移动图标
    • 若图标为独立图层，用移动工具拖动即可
    • 若图标为非独立图层
      • 用选区工具选中图标区域
      • 用移动工具拖动图标
  • 减小画布到指定区域

使用背景图

切完图且保存后，下一步就是在代码中使用这些图片。

图片合并方案

为什么要拼图？

  • 什么是 Sprite 拼图：

  • Sprite 拼图好处

    • 减少网络请求，提升网页加载速度

图片优化合并

  • 大小与质量
  • 合并
    • 排列
      • 图片之间必须保留空隙

      对于具体要保留多大的空隙呢，并没有一个明确的数值，遵循的一个宗旨就是保留的空隙足够后期维护就可以了。

      如果是小图标，留的空隙可适当小一些，一般20像素左右；那如果是大图标，要留的空隙就要大一点，因为大图标在调整的时候，影响到的空间也会比较大。 有了一定的切图经验之后，对于保留多大空隙就会比较有概念，有自己的心得了。

      • 图片排列方式：横向 & 纵向
    • 分类
      • 同属于一个模块
      • 大小相近
      • 色彩相近
      • 综合以上方式
    • 合并推荐
      • 只本页用到的图片合并
      • 有状态的图标合并

浏览器兼容方案

  • IE6 不支持 PNG24 半透明
    • 存两份：sprite.png → 24 ；sprite_ie.png → 8
  • CSS3 & 切图