1.1.0 什么是切图：

从设计稿中切除网页的素材并在代码中引入图片资源。
设计稿 (*.psd) >>（素材切出）>> 产出物 (*png, *.jpg)

---

1.1.0 为什么要切图？

给网页提供图片素材：分离复杂的图片或者解决兼容问题。

HTML（使用img标签）

<img src="../img/avatar.jpg" alt="头像">

CSS（使用background属性）

.icon{
     background-image: url(../../img/sprite.png);
     background-position: 0 0;
}

---

1.1.1 工具, 面板, 视图

Ps首选项设置

编辑 > 首选项 > 单位与标尺：将“单位”内的选项选择为“像素”。

面板

在“窗口”菜单下开启：（可以保存工作区）

• 工具
• 选项
• 信息（F8）
• 图层（F7）
• 历史记录

切图常用工具

• 移动工具：选择图层和移动图层。（需将自动选择调至选择图层）
• 矩形选框工具：选出矩形框，然后再信息面板内查看信息。
• 魔棒工具：抠图神器之一，适合抠对比明显的不规则图形，效果受容差影响。
• 裁剪工具（切片工具 ）：裁剪画布。（重点是下拉菜单中的切片工具）
• 缩放工具：两个快捷键（放大：Ctrl + 加号 缩小：Ctrl + 减号 或 Alt + 滚轮）
• 取色器：包含前景色取色和背景色取色。

辅助视图

• 在“视图 ”菜单下开启。
• 对齐，会启动靠近吸附功能
• 标尺，Ctrl + R
• 参考线，Ctrl + ; （需勾选显示额外内容）

Note：

• 注意图层（单层元素）与组（类似于文件夹，可嵌套）的区别。
• 撤销快捷键：Ctrl + Z；连续撤销快捷键：Ctrl + Alt + Z。
• 合并图层：ctrl+E。合并可见图层：ctrl+shift+E。
• Sprite的补充说明：可以通过搜索CSS sripte或者图片精灵等关键字来了解更多，推荐阅读：《谈谈CSS Sprites(css精灵)》

---

1.1.2 测量、取色

获取信息

• 打开设计稿，获取信息。
• 尺寸信息（测量）width：200px；
• 颜色信息（取色）color：#ffcc00；（16进制RGB颜色）

测量

• 使用“矩形选框工具”&“信息面板”。
• 宽度，高度 (width, height)
• 内外边距 (padding, margin)
• 边框 (border)
• 定位 (position)
• 文字大小 (font-size)：假使文字为单独一个图层，则使用“文字”工具查看像素，否则，使用“矩形选框工具”。
• 行高 (line-height)：同上。其为第一行的底端到第二行的底端。
• 背景图位置 (background-position)

测量工具的巧用

• 所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。
• 选框工具的巧用，增（Shift）减（Alt）以及交叉选择（Shift + Alt）。
• 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。

取色

• 所有颜色都要取色。使用拾色器&吸管工取色。
• 边框色
• 背景色
• 文字色

取色工具的巧用

• 确定背景是否为纯色
• 使用拾色器在需要确定颜色的区域任意点击，看颜色值是否变化。
• 确定颜色是否为线性渐变
• 先用移动工具选择需要确定颜色的图层，再使用魔棒工具在低容差下任意点击。

---

1.1.3 切图

切图及切图的各种操作（课程大纲）

• 隐藏文字（独立图层和非独立图层的不同操作方法）。
• png8和png24格式的切图方式。
• 可平铺背景的切图方式及活动页的切图方式。

哪些图是需要切出来的？

• 内容性图片（一般用在img标签）：1.Banner、广告图片 2.文章中的配图 （在 HTML的img之中，只需站位的不需切图）
• 修饰性图片（一般用在background属性）：1.图标、logo 2.有特殊效果的按钮、文字 3.非纯色的背景

切出来的图片保存为哪种类型？

• 内容性图片应保存为.jpg格式，还会压缩保证大小。
• 修饰性图片应保存为.png24（这种类型图片支持半透明，但是在IE6 不支持半透明，Alpha透明）或png8它们均支持全透明。

隐藏文字只留背景。

• 若文字为独立图层，隐藏文字图层。

独立图层

• 若文字与背景已经合并，则平铺背景覆盖文字。（两种情况：注意图层的选择）
  第二种情况按住Alt以后同时按住Shift可以保证方向上的延伸。

合并图层

切图

PNG24切图方法：（分为单图层和多图层）

1. 移动工具选中所需图层（按住Ctrl多选）
2. 右键合并图层（Ctrl+E）
3. 再右键复制图层到新文件，或直接拖至已有文件（新建：Ctrl+N）

PNG8带背景切图方法：

1. 合并（可见）图层（Shift+Ctrl+E）
2. 矩形选框选择内容
3. 魔棒工具去除多余部分（从选区中减去：按住Alt）

可平铺背景的切图方式：

1. 用矩形选框工具选取一块区域
2. 复制粘贴到新文件中
   （平铺内容充满文件的宽（x轴）或高（y轴））
   （背景平铺：对于可平铺背景的切图，可以先了解下css的background-repeat属性，对理解次切图会有帮助）

用切片工具切可以一刀切的活动页：

1. 拉参考线
2. 选择切片工具
3. 点击“基于参考线的切片”按钮
4. 保存（全选切片，统一设置存储格式）

切图步骤：

1. 去掉所有文字只留背景
   打开视觉稿后，用上面说过的方法去掉所有的文字（选择所有文字图层（Ctrl+Alt+A）后，按住Alt拖动鼠标在小眼睛上全部划过），只留背景和图片（记得备份一下PSD文件）。
2. 保存图片
   将去掉文字的图片保存起来。一般情况下内容性图片保存为jpg格式，图标类型的保存为png格式。
3. 构思页面的具体实现
   划分页面的结构，具体的实现方式。
4. 一边编写HTML代码，一边测量、取色
   根据构思号的页面结构，开始编写HTML代码，并且开始进行测量和取色。

---

1.1.4 保存

存储所需内容：（或拖动内容至新文件）

复制、 新建、 粘贴
Ctrl+C Ctrl+N Ctrl+V
存储为web所用格式：“文件”>“导出”>“存储为web所用格式 ”（Alt+Shift+Ctrl+S）

背景内容：透明

保存格式的选择

• 当图片色彩丰富且无透明要求时，建议保存为 JPG 格式并选用时候的品质（通常使用品质 80 ）。

JPEG

• 当图片色彩不太丰富，无论有无透明要求一律保存为 PNG8 格式（256颜色，需特殊设置如下图，需设置杂边：无；无仿色）。

PNG8

• 图片有半透明（Alpha 透明）的要求，保存为 PNG24 格式（特点是不对图片进行压缩）。

PNG24

• 为保证图片质量，保留 PSD 源文件，以备不时之需。

---

1.1.5 修改、维护

修改与维护之一：更改画布大小以便增加新素材。

更改画布大小

维护与修改之二：移动图标

第一种：独立图层
若图标为独立图层，则用移动工具拖动即可
第二种：非独立图层
若图标为非独立图层，则用选区工具选中图标区域，再用移动工具拖动图标。（若要将已合并的图层内的图标分离到新图层，则用快捷键“剪切”Ctrl+X）

移动图标

维护与修改之三：裁剪画布

第一种：用选区工具选取区域后，点击“图像”>“裁剪”
第二种：直接用裁剪工具裁剪画布。

注意事项：

为了可维护性的考虑因适当的留出适当的空白区域以便修改所用和提高容错性。
PNG8需更改图片颜色模式为 RGB 颜色。（默认为索引颜色模式，颜色信息会被丢失）。

---

1.1.6 图片的优化与合并

使用背景图代码：

HTML

<button class="u-btn">点我</button>

CSS

.u-btn{background: url(image/btn.png) no-repeat 0 0;}
.u-btn{background: url(image/sprite.png) no-repeat 0 -50px;}

Sprite拼图

什么是Sprite拼图？

图片的合并就如同上面提到的切图后保存的过程。拼好的图称之为 Sprite拼图。

Sprite拼图的好处：

它能减少网络请求次数，提高网页加载速度。

图片优化与合并：

大小与质量的平衡与取舍：
　　实际情况中我们需要根据项目本身的要求对图片的大小与质量进行取舍。
压缩工具：
　　无损：Minimage、ImageOptim等工具，也可结合Grunt自动化构建工具一同使用
　　有损：TinuPng是在线网站

合并

排列：
图片之间必须保留空隙。（为了修改方便和容错性）

保留空间

图片排列方式（如图）：横向排列、纵向排列

横向、纵向

分类：（图片的合并分类原则 ）
同个模块的图片合并

同个模块

大小相近的图片合并

大小相近

色彩相近的图片合并

色彩相近

综合以上方式合并

合并推荐：
只本页用到的图标合并。
有状态的图标合并。

合并推荐

浏览器兼容方案：

• IE6 不支持 PNG24 半透明所以需要保存两份（sprite - png24 和 sprite-ie.png8）。
• 在使用 CSS3 是让高级浏览器使用 CSS3 低级浏览器则使用切图。
• 优雅降级指的是让低级浏览器不显示高级浏览器中的界面细节。