PS 切图

PS 工具是我们使用频率比较高的软件之一，学习 PS 的目的不是为了设计海报做电商，又或 UI，而是：

• 会基本的抠图
• 会简单的修改 PSD 效果图
• 熟练的切图（ Important ! ）
• 能够和网站美工（ MM ）有共同的话题 ...

什么是切图？ —  从设计稿中切出网页素材

设计稿（.psd） —   素材切出   —   产出物（.png .jpg 等）

---

为什么切图？ —  给网页提供网页素材

网页中一些比较漂亮的效果有时无法用代码实现（或难以兼容），可通过引入图片资源的方法来实现。如：

HTML <img src="images/logo.jpg" alt="logo"> CSS .icon{background-images:url(images/sprite.png);}

1 2	HTML  <img src="images/logo.jpg" alt="logo"> CSS   .icon{background-images:url(images/sprite.png);}

如何切图？

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

工具、面板、视图

[ PS版本 ]  2003 年，Adobe Photoshop CS（CS6 是 CS 系列最后一个版本），2013 年，Adobe Photoshop CC。

安装 _ 下载 > 首选项设置：编辑 - 首选项 – 单位与标尺（标尺/文字：像素）

[1] 面板：在“窗口”菜单下开启                // 保存工作区：窗口 – 工作区 – 新建工作区（命名）

• 工具面板：列出了 PS 提供的所有工具（布局：左上角按钮设置）
• 选项面板：与当前选中的工具一一对应，主要为选中工具的一些配置
• 信息面板：显示一些颜色、位置、尺寸信息；常与矩形选框工具结合做测量
• 图层面板：列出了当前打开文件里的所有图层，可添加、删除、隐藏、改变图层
• 历史记录面板：记录了当前的文件所有的历史操作记录

[2] 切图常用工具

• 移动工具：选择和移动图层        // 设置：（选项区）自动选择：图层 not 组
• 矩形选框工具：矩形选框区域 + 信息面板，查看信息（测量）
• 魔棒工具：抠图（不规则小图标）        // 容差、消除锯齿、连续
• 裁剪+切片工具：拖动，可以裁剪画布；切片用的较少，适应于一定场景
• 缩放工具（Ctrl + & -） 或  Alt + 鼠标滑轮    100%：Ctrl+1
• 取色器：含前景色和背景色取色器，用于吸取颜色
• 撤销：Ctrl + Z     连续撤销：Ctrl + Alt + Z     回到之前：选择历史记录

[3] 辅助视图：在“视图”菜单下开启

• 对齐：靠近文档边缘或参考线时，有一定的吸附
• 标尺（Ctrl + R）
• 参考线（Ctrl + ;）        // 需勾选显示额外内容

测量与取色

[1] 测量

所有数字都要测量 — 尺寸信息  width:200px;

哪些需要测量呢？！CSS 中所有能够接受数值型的属性都需要测量；尽可能 100% 还原设计稿。

• 文字大小 font-size

单独图层，使用文字工具 T，查看选项面板；合并图层，矩形选框工具，文字高度即字号大小，不同字体有误差。

• 行高 line-height

单独图层，文字工具 T，选项面板-属性，行高即 line-height；合并图层，矩形选框，第一行下面到第二行下面。

• 背景图位置 background-position
• 宽度、高度 width / height
• 内边距、外边距 padding / margin
• 边框 border
• 定位 top / right 等

使用工具：矩形选框工具 + 信息面板（尽可能放大画布，以减小误差）

• 矩形选框工具：默认是新选区，即唯一一个选区
• 选区：即矩形选框工具选择的区域，可多个叠加、删减、交叉
• 添加到选区：按住 Shift    从选区减掉：按住 Alt    与选区交叉：按住 Shift+Alt

小技巧：大图测量宽度 > 左右两边画小图（shift），宽度为小图最左到最右的宽度

[2] 取色

所有颜色都要取色 — 颜色  color:#fff;

哪些需要取色呢？！CSS 中所有能接受颜色值的属性都要取色。

• 文字色 color

单独图层，文字工具 T；合并图层，吸管拾色；文字图层有叠加，拾色器 + 吸管，小心锯齿，选择深的地方。

• 背景色 background-color
• 边框色 border-color

使用工具：拾色器 + 吸管工具（取色时尽量放大）

取色工具巧用：

• 确定背景是否为纯色：不停的点击，观察颜色值是否变化。
• 确定是否为线性渐变：魔棒工具（容差较小的情况下，颜色选定区域，比如 Y/X 轴渐变）。

切图

哪些是需要切出来的呢？！一般分为两类：

• 内容性的（一般用在 img 标签）

Banner、广告图片、文章中的配图（若服务器中的数据，可以不切图，只占位）；
通常存为 jpg 格式（颜色比较丰富，当然会做些压缩，保证图片不要太大）。

• 修饰性的（一般用在 background 属性）

图标、logo、特殊效果按钮等、非纯色的背景；
一般存为 PNG24（IE6 不支持半透明，需兼容）、PNG8，都支持全透明；但 PNG24 支持半透明，PNG8 不支持。

[1] 切图步骤

（1）隐藏文字只留背景（若文字上有特殊效果，无法用代码写出，则把文字和背景一起切出）

• 若文字为独立图层，则隐藏文字（使用移动工具找到文字图层，去掉眼睛）
• 文字和背景合并，平铺背景覆盖文字

[ 适应于背景可以拉伸平铺 ] 矩形选框工具 + 自由变换 Ctrl+T，拉伸背景覆盖文字，回车或双击。

[ 背景有纹理，不可以拉伸 ] 矩形选框工具在背景上画一个小框，移动工具 + Alt 来复制当前图层，

一次次按向下键或用鼠标移动（鼠标移动时，按住 shift 可保证图层按直线移动）。

（2）移动工具选中所需图层（Ctrl + 点击图层的矩形区域），出现蚂蚁线

（3）合并图层< Ctrl + E >（可选）    // 勾选自动选择，然后将需要的多个图层合并

（4）复制图层< Ctrl + C > -- 新建文件< Ctrl + N >，点击确定 -- 粘贴图层< Ctrl + V >

[ 从不同类型图片的切图角度进行说明 ]

• 切 png24
  移动工具选中所需图层（按住 Ctrl 多选）-- 右键合并图层 -- 再右键复制图层至新文件或拖至已有文件
  单一图层，直接跳到第三步
• 切 png8
  因 png8 图片不支持半透明，所以需要带背景切
  合并可见图层 -- 矩形选框工具选择一个大区域 -- 魔棒工具去除多余部分（从选区中减掉：按住 Alt）
• 切不规则小图标
  切法与 png8 类似，选择楼同小图标时，一定要取消（连续）
• 切可平铺背景
  用矩形选框工具选择一块区域，复制粘贴到新文件中（平铺内容充满文件的 X 轴或 Y 轴）
• 切片工具（一刀切），适应于一刀切的活动页
  拉参考线--选择切片工具 - 基于参考线的切片工具 - 切片选择工具（同一按钮下）- 双击切片，更改名称--保存

注，全选切片不可用 Ctrl+A，只能拖动矩形框选中所有切片，然后统一设置存储格式。

[2] 应用：如何开始切图

• 去掉所有文字，只留背景

打开视觉稿后，用上述方法去掉所有的文字，只留背景和图片（记得备份一下 PSD 文件）。

• 保存图片

将去掉文字的图片保存起来。一般情况下内容性图片保存为 jpg 格式，图标类型的保存为 png 格式。

• 构思页面的具体表现

划分页面的结构，具体的实现方式。

• 一边编写HTML代码，一边测量、取色

根据构思号的页面结构，开始编写 HTML 代码，并开始进行测量和取色。

保存

独立图片，使用拖动工具到新的文件即可；
已合并图片，使用矩形选框工具+魔棒选择 > 复制、新建、粘贴或拖到新文件 > 存储为 Web 所用格式

• 当图片色彩丰富且无透明需求时，建议存为 jpg 格式并选择合适品质，来对图片进行压缩。

品质越大，图片质量越高，图片也会越大；

设置原则：品质不要 100（相当于没压缩），根据项目需要，一般 60-80 较合适。

• 当图片色彩不太丰富时，无论有无透明需求，请保持为 PNG8 格式。

PNG8 格式只有 256 种颜色，文件比较小，比较适合网络传输；

设置：存储为 Web 所用格式 > PNG8 > 颜色默认 256，杂边：无，扩散：无仿色(右上角可存储)

• 当图片有半透明需求时，请保持为 PNG24 格式。

特点：对图片不进行压缩，所以文件比较大；且支持半透明效果(保持面板采用默认设置即可)

• 为保证图片质量，保留一份 PSD 源文件，在 PSD 上进行修改。

PNG8 会对图片压缩，若在 PNG8 上修改，会再次压缩，导致像素点丢失。

修改与维护

新功能，加个图标；图片多余，要删除；画布太大，文件空白太多；想要改变图标的位置 ...

• 要继续放更多的图片

更改画布大小（图像菜单-画布大小：修改宽高，选择不同的定位方式）

• 移动图标

若图标为独立图层，则使用移动工具拖动即可；
非独立图层，使用矩形选框工具选择图标区域 （Ctrl+X，Ctrl+V 可分离图层）> 移动工具拖动。

• 减小画布到指定区域

选定选区 > 裁剪    // 画布一般比图像区域大一点，考虑可维护性
修改 PNG8 图片，需要更改颜色模式为 RGB 颜色（图像 - 模式 - RGB 颜色）。
[ PNG8 默认的图片颜色模式为索引颜色，索引颜色更改颜色，会丢失一些颜色信息，因此要更改为 RGB 颜色 ]

图片合并与优化

[1] 图片合并方案 - sprite拼图？！                              // 推荐：《 谈谈 CSS sprite（CSS精灵）》

把设计稿里的一个个小图标拼合到一个图片里，使用时引入这张图片。
好处：减少网络请求，提升网页加载速度；

• 大小与质量（平衡和取舍 - 反比）

压缩：无损 Minimage（对图片大小影响不明显）；有损 TinyPng（一个在线网站）

• 合并（排列 / 分类）

原则：图片之间必须保留空隙（考虑到图片的容错性和可维护性）

• 图片排列方式：横向排列 & 纵向排列

分类合并：

把同属于一个模块的图片进行合并；
把大小相近的图片进行合并；
把色彩相近的图片进行合并；
综合以上方式进行合并；

推荐（合并）：

只本页用到的图片合并（后面用不到的就不需要加载了）；
有状态的图标合并（有交换状态，如点击前图片，点击后图标，CSS 设置只是 X 轴变化）。

[2] 图片兼容方案

• IE6 不支持 PNG24 半透明

存两份，高级浏览器 sprite.png 24；IE6 存 sprite_ie.png 8（带背景切的）。

• CSS3 & 切图（圆角、阴影等情况）

高级浏览器用 CSS3 处理，低级浏览器用切图处理或优雅降级（即，不显示）。