整 理：晋哲、徐秀
时 间：2015-10-23
说 明：切图思路步骤、批量切图软件推荐、PS工具手工切图操作
一、总览设计图，判断哪些需要保存成图片，哪些可以用样式编写实现。
1、需保存成图片的一般为颜色、形状多样的图像，如以下几种：
a、轮播的banner图片
b、商品图片
c、形状复杂的icon图标
2、可用样式编写一般为纯色块的形状区块，如常用的“确认”按钮。
二、提取图片图层，进行裁切
有两种方式：A：批量化工具，B：手工操作
A：批量化工具（推荐）
方法一：PxCook像素大厨（软件工具）
步骤：
1、命名输出
将想输出的图层或图层组以.png或.jpg为后缀的名称命名之后，该图层或图层组就可以被PxCook软件识别了。
2、转换图层
推荐将有特效的图层或多个图层转化为智能对象，以便更好地识别PSD文档。
3、在PxCook中打开PSD文件
打开【切图工具】界面 -> 选择“保存按钮”中的【导出切图】即可
注意事项：
1、不能重命名，否则会覆盖；
2、PSD文件不能太大，可以事先转化为智能对象，以及把不需要的图层删除掉；
3、适合手机端页面切图，不适合PC端页面。
官网链接：http://www.fancynode.com.cn/pxcook/home
有具体的步骤说明，及软件下载
方法二：PS快速提取图层的方式
【文件】->【脚本】->【将图层导出到文件】
注意事项：
1、PSD文件一定不能大，图层不能太多，不适合PC端页面；
2、会将文件中的所有图层全部分别导出，所有不需要的图层得事先删掉；
3、需事先将图层组合并，否则会将元素组件分别导出。
B：手工操作
方法一：元素自身复制粘贴
操作步骤：
1、借助图层左侧的“可见”按钮，取消图片底部的背景图层的显示，直至背景区域透明；
2、“移动工具”点击选中要切的图片（最外围），再从“标尺”处拖出四条“参考线”分别至图片四周边缘（注：在图层选中的情况下，参考线会自动贴边）；
3、使用“选取工具”将四条“参考线”所围成的区域选中；
4、【Shift+Ctrl+C】合并拷贝，再【Ctrl+N】新建画布，最后“粘贴”即可。
注：再切下一个图片时，需先将上一个“选区”去除，再拖动参考线。
方法二：去除元素周围透明区域
操作步骤：
1、在众多图层中选中一个图片所组成的所有图层。
在选中所属图层的过程中，有两种方法可以借助：
a、借助“移动工具”点击快速选中图层，前提是勾选上“自动选择”；
b、借助图层左侧的“可见”按钮去查看该图层是否属于图片上的元素；
2、选中图层 -> 右击选择“复制图层” -> 选择文档“新建”，确定。
3、选择菜单栏的“图像” -> “裁切”工具，确定后可将透明区域裁切掉。
三、保存图片
保存图片需考虑实际需求
1、“存储为” -> PNG格式
当背景需要透明显示时使用，页面常用格式，如元素图标
2、“存储为Web所用格式” -> JPG格式
当背景为实体的图片时使用，如banner图片，商品图片
3、“存储为Web所用格式” -> PNG-8 格式
PC端需要考虑PNG格式图片的兼容性问题时使用，所以，PC页面一般保存为两张图，一为PNG透明背景的图片，一为PNG-8兼容图片
四、整合成Sprite图
当设计稿中所有图片元素存储下来之后，需考虑哪些图片需要整合成Sprite图，哪些是保存为单独的个体。
一般如图标元素则需要整合到一张图片上；<img>单独呈现的为一个个独立的图片。按需抉择。
五、颜色值的提取
1、纯色块的颜色值
单击“前景色及背景色”工具即可打开“拾色器”，这时鼠标就变为“吸管工具”功能，在色块上点击一下，即可在“拾色器”上读取到其颜色值
2、文字的颜色值以及其他属性
首先选中文字图层，再点击“文字工具”，即可在顶部的工具栏展现它的文字属性：字体、是否为粗体、字号、颜色值。
单击“颜色区域”即可获得它的颜色值
六、其他注意事项
1、当遇到平铺循环展示的图片，只需截取其中一部分，在用样式里的repeat平铺。
比如：渐变条、循环背景图片等
2、当同一版块中的每个图标的宽高各异时，在切图时需要为这些图标设置一个统一的宽高，方便样式统一编写。
方法：PxCook工具有关于“修改切图尺寸”的操作。
常用快捷键：
【V】：移动工具
【M】：选框工具
【T】：文字工具
【I】：取色工具
【Ctrl+Shift+C】：合并拷贝
【Ctrl+N】：新建图层
【Ctrl+Shift+Alt+S】：存储为web所用格式。同菜单栏【文件】->【存储为web所用格式…】
【Ctrl+Shift+S】：另存为，快速存储
【Ctrl+“+”】：放大图片
【Ctrl+“-”】：缩小图片
【Ctrl+R】：标尺的显示/隐藏切换
【Ctrl+T】：变换工具，选中图层变形
【Ctrl+Alt+C】：改变画布大小
【Ctrl+Alt+I】：改变图像大小
