一 什么是切图
从设计稿中切出图片素材。
HTML 使用 img 来引入图片资源。<img src="images/avatar.jpg" alt="头像"> 。
CSS 使用 background 来引入图片资源。.icon{background-image:url(images/bg.jpg)}
二 工具，面板，视图
PS 更改单位为像素，编辑 > 首选项 > 单位与标尺
面板（前端常用）：
窗口菜单下开启。工具，选项，历史记录，信息，图层（前三个为默认已打开）。
设置好后，保存工作区。自动选择工具：
组相当于一个文件夹，平时使用图层来选取图片。辅助视图：
在视图菜单下开启。对齐，标尺，显示 > 参考线（打开显示额外内容）。
三 测量，取色
- 需要测量的值：
- 宽度，高度
- 内边距，外边距
- 边框
- 定位
- 文字大小
- 行高
- 背景图位置
测量文字：选择文字工具，选择文字，查看相关属性。
矩形选框工具：按住 shift 增加选区，按住 alt 减少选区。
- 需要取色的值：
- 边框色
- 背景色
- 文字色
四 切图
那些需要切，并存为什么格式：
修饰性的图（存为 PNG24,PNG8 前者支持半透明后者不支持）。
内容性的图（一般存为 JPG）。隐藏文字只留背景：
文字为独立图层：隐藏文字图层。
文字与背景合并：先选中图层，使用矩形选框工具，自由变换（ctrl+t）/使用移动工具+alt（+
shift 保持水平方向不动）。后者适用于有纹理的图。ctrl+d 取消选择。
- 将需要的图片切出来放入新的文件中：
选择单独图标：选择图层，复制新建或拖到已有文件中（若分布在多个图层中，需要合并图层）。
切带背景的图：需要先合并可见图层，然后矩形选框，按住 alt 用魔棒选择（反选出需要的部分）。
在切小图标时注意魔棒工具的设置问题，如容差，消除锯齿等。切用来平铺的背景图：矩形选择一竖条。ctrl+c,ctrl+n。
切片用于一刀切的活动页：拉参考线，选择切片工具，点击基于参考线的切片，保存（全选切片，统一设置存储格式）。
五 保存
- 怎样存储：
存储为 web 所用格式。
- 对于独立图层，直接拖拽到新文件即可。
- 对于已合并在一起的图层，选择后，复制，新建，粘贴（ctrl+c,ctrl+n,ctrl+v）。
- 保存类型：
图片色彩丰富无透明度要求：保存为 JPG。
图片色彩不太丰富无论有无透明度要求：保存为 PNG8。
图片有半透明要求：保存为 PNG24。
保留一份 PSD，在 PSD 上进行修改。从 PSD 导出需要的图片。
六 修改与维护
放下更多图标：更改画布大小（图像菜单）。
对于独立的图层直接用选择工具拖拽即可。对于同一图层需要先矩形选框后移动（选择后 ctrl+x,ctrl+v 可分开成独立的图层）。
注意：修改 PNG8 图片时，默认使用索引颜色，需改成 RGB 颜色以防止丢失信息（图像菜单下更改）。
七 图片优化与合并
把一个个小图标拼在一张图中（Sprite 拼图），在代码中使用。可以减少网络请求提升速度。
压缩工具：Minimage（无损），TinyPng（有损）。
图片间有间隔，横向纵向排列，同模块合并在一起。
