切图篇：利用PS从设计稿中提取图片

切图：把设计师的设计稿（PSD文件）切分成为最终在页面中呈现的一个个图片，为HTML页面做准备；
打开ps，直接把PSD文件拖拽到ps工作区。（此PSD文件来自百度前端学院）
1、法一：找到相应的图层操作，优势是切出的图片没有png格式的背景，只有图标，适合少量的、大图的切图；
双击要切取的区域，在ps板面的右下角会自动聚焦到相应的图层。

图层左侧的眼睛图标表示显示该图层，通过点击眼睛显示/隐藏图层判断是否是找切的部分，得出在Background文件下的图层为要切的部分，右击该文件夹，选中转化为智能对象。

Background文件合并为一个图层

点击眼睛图标，显示/隐藏观察，检验这个图层是否为要切的部分；
右击该图层，选中编辑内容

得到一个新的工作文件，文件只有要切的图；
保存此图片即可
点击 “文件–>存储为‘’，设置保存路径、文件名，并将文件格式设置为PNG；

在电脑中相应文件夹下可找到相应图片，

重复上述步骤可以将所有图标提取出来；

2、法二
利用参考线，合适批量切图，小图标等。
显示ps的标尺：按“Ctrl+R”（或视图–>标尺）
显示文件的参考线：“Ctrl+；”（或视图–>显示–>参考线）
如下图蓝线部分为参考线
用参考线将要切的图标都围住：
通过移动工具移除多余参考线，选中相应的参考线拖拽即可；
并添加需要的参考线，从标尺处拖出参考线；也可通过“视图–>新建参考线”来添加新的参考线；
利用切片工具

用切片工具选中，在之前参考线框住的左上角拖到右下角

重复操作，选完所有的图标
存储为web使用“Alt+shift+ctrl+s”
移动调整所有的切片出现在面板中
再使用切片工具，框住所有切片

设置格式为PNG-24，然后存储，设置保存路径，并选择“所有用户切片”

在电脑的相应路径下会有一个新的文件夹image，保存切出来的图标；