在Web开发当中，前端开发充当着“承上启下”的重要角色：上“承”设计（切图），下“启”后端（数据交互）。那么，今天我就来跟大家讲讲切图~~~

本人常用两种切图方式：“选框复制法”和“切片法”，在此只讲解选框复制法的快速切图方法。

该方法主要针对切PNG图片，选用工具为Photoshop左侧工具栏中的选框工具。（本文使用Photoshop cc演示）

步骤如下（以一张PSD设计稿为例）：

①打开一张PSD设计图。

②用移动工具单击需要切的图片，在此之前注意选择以下状态。

此时右侧图层面板中的图标将会选中：

③用选框工具框住该图层。

④从这步起开始录制动作，方法如下：

a.点击“窗口”-“动作”（快捷键Alt+F9）添加动作面板。

b.新建动作

c.选择功能键，可自己随意选择，录制完该动作后可以通过按下该功能键一键切图。

d.此时动作录制开始。

⑤按Ctrl+C复制该图层，并按Ctrl+N新建文件。

注意：这里为了防止所切图层是矢量图（矢量图不能直接复制），可先通过右键单击选择“转换为智能对象”转换后再继续以下操作。

⑥按Ctrl+V粘贴图层。

⑦按Ctrl+Shift+Alt+S将图片保存为Web所用格式，勾选状态如下：

然后选择保存路径即可，一般我会在桌面上新建一个“快速切图”文件夹，然后保存路径选择该文件夹，之后所有所切图片均会进入该文件夹中。

⑧关闭该图片文件

⑨结束动作录制。

到这里，快速切图方法已经介绍完了，录制动作结束之后，以后每次切图，只需先手动完成①②③步骤，然后按下新建动作时选的功能键（本例所选F10），图片就自动进入指定路径了（本例路径为桌面上的“快速切图”）。

结束语：虽然说该快速切图方法非常便捷，但是也是有自己缺点的。比如，每次切玩一张图，必须得手动重命名图片，否则之后所切图片会覆盖前一张，这是由于每次切图时的命名相同所致。

本文为原创文章，转载请注明出处，谢谢！