前端PS常用切图技巧

前言：前端涉及到的 ps 操作不算复杂，基本上就是切图，本文总结了常用的几种切图技巧。

工具：photoshop cs6 、 photoshop cc

1. 传统切图 01

这是最笨的一种方法，核心就是用选区工具选中我们要的切图区域，复制到新文件，然后整个保存下来，这样的切图方法几乎没有可取之处，不过我最初确实就是这样干的。。。

2. 传统切图 02

这种效率要高一些，可以同时切多个图片，用切片工具选中多张我们需要的图片区域，点击文件-》保存为 web 所用格式，这种方法的缺点是默认会保存多张图片，即便我们没有选中那么多，而且图片的精度不够完美、没有去除背景（png格式下）。

3. 传统切图 03

使用切片工具，状态栏勾选自动选择、图层工具，点击我们需要的图层，图层栏自动定位到该图层位置，如果是在组里面的话，右键转化为智能对象，然后在图片选取上右键，编辑内容，这样会新打开一个窗口，只包含我们选中的区域，然后同样的，文件-》保存为 web 所用格式。

4. 参考线切图

ctrl + r 打开参考线，用横竖两种参考线把需区域包裹，看到顶部状态栏没，点击选中 基于“参考线的切片”，这时系统根据我们的参考线包裹，自动生成了切片，然后文件-》保存为 web 所用格式。

5. 批量精准切图

对于大量的切片来说，手工难免太慢了，这时可以用这种方法，文件-》导出-》将图层导出到文件，这种方法会把所有的图层文件都导出来到我们指定的一个文件夹里面，过程比较慢，但是也算方便。

6. 自动切图

这是 photoshop cc 的新功能，真正的解放双手，如果 ui 设计师合理的运用，可以在设计好图片的同时，就自动生成切片；

• 操作一，选择菜单“编辑”->”首选项"->“增效工具”，弹出下面的窗口。勾选“启用生成器”。
• 操作二，勾选“文件”->“生成”->“图像资源”菜单。
• 然后，我们假设选中一个图层，需要把它保存为图片，直接在图层栏更改它的名字，加上 png、jpg、或者 svg 后缀，其它都不用做了，我们找到该 psd 文件的位置，会发现在同样位置出现了一个新的文件夹，里面就是我们保存的图片。。。直接用就好了。

参考链接

前端开发人员也要会的切图技巧
前端工程师必备的PS技能——切图篇
做一个会PS切图的前端开发