参考线切图就是使用的第二种添加参考线的方式切图。例如现在我们需要把设计图上的ADDRESS、MAIL、PHONE三个图标使用参考线切图，从水平标尺和垂直标尺拖动添加参考线，添加成下图的样子。
然后在工具栏中选中“切片工具”，此刻工具菜单栏中多了一个“基于参考线的切片”按钮。点击这个按钮。设计图中自动生成了几个切片，切片工具基于参考线自动生成切图。这样生成切图的方式比传统的一个一个手动切图效率要高一些。
并且参考线切图有一个好处是生成的切图我们都可以手动删除，如果我们觉得有些附加的切图不需要，那么我们可以使用“选择切片工具”右键单击切图，选择删除操作。下图是使用参考线切图得到的最终切图，只有三个切图。
切图完成了，接下来的操作和手动切图一样，使用“存储为Web所用格式”导出图标即可，这里不再作介绍了。
精准切图
精准切图是CC版本引入的新功能，何为精准切图？精准切图解放了切图人员的双手，PS通过脚本自动对每个图层执行切图。切图人员只需选择几个菜单执行切图命令，剩下的工作就是等待PS执行切图。另外一方面，精准切图是计算机基于”图层对象“切图，所有切出来的图形精准度肯定也比人工切图高。
打开菜单“文件”->”导出"->“将图层到处到文件”,弹出导出窗口：
上面窗口需要填写几个参数，“目标”即导出到哪个目录下，“文件名前缀”为所有导出图片文件名称的前缀，“仅限可见图层”只导出可见图层，“文件类型”为导出文件的类型（例如png、jpg等）。最后点击“运行”按钮开始执行自动切图。下图是切图过程PS“图层”自动切图的一个截图。可以看出PS在自动选择每个图层然后执行导出。
由于自动切图时PS会把每个图层都导出，所有花的时间可能比较长，需要耐心等待。当自动切图执行完成后，我们可以在目标目录下看到导出的所有图片。
扩展点-自动切图
CC版本另一个强大的功能叫做“自动切图”，首先解释下什么叫自动切图。精准切图我们能够看到PS切图的过程，自动切图我们根本就看不到切图的过程，当我们把图层设计好了，我们的切图也就完成了。
在使用自动切图功能之前，我们需要做两个操作：
操作一，选择菜单“编辑”->”首选项"->“增效工具”，弹出下面的窗口。勾选“启用生成器”。
操作二，勾选“文件”->“生成”->“图像资源”菜单。
现在准备工作已经完成了，接下来就看看怎样自动切图。举个例子，现在我们需要导出下图的图层，并且不包含背景色。
其实上面图片的所有资源都放在一个叫做“Address”的图层分组下。现在把分组名称重新改为“Address.png”。然后我们到psd文件目录下，psd文件名字为“Artica - One Page PSD Template“，可以看到同目录下生成了另外一个叫做”Artica - One Page PSD Template-assets“的文件夹。
然后打开”Artica - One Page PSD Template-assets“文件夹，看到有一个叫做Address.png的文件，正好是我们图层分组的名字，并且图片背景是透明的。这样的功能是不是很强大？
自动切图也是生成svg的利器。ps不仅可以把图层生成为png文件，还支持生成svg文件。现在我想把下面的图标保存为svg格式，我们仅需要把图层文件名字改为“Icon.svg”。打开”Artica - One Page PSD Template-assets“文件夹，可看到生成了Icon.svg文件。
用文本编辑器打开Icon.svg文件看看生成了什么内容。文件中包含了width和height以及css样式，正是一个比较常见的svg文件。我们通过修改css样式就可以改变图片的颜色了。例如现在把”fill:#fff”改为“fill:#FF3300”，然后保存文件。用浏览器打开，可看到图片颜色变成了红色。
总结：如果我们在设计图层时就按照*.文件类型命名，那么在设计完图层时切图工作也就完成了。
更多做一个会PS切图的前端开发相关文章请关注PHP中文网！