在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），圖片就自動進入指定路徑了（本例路徑為桌面上的“快速切圖”）。
結束語：雖然說該快速切圖方法非常便捷，但是也是有自己缺點的。比如，每次切玩一張圖，必須得手動重命名圖片，否則之后所切圖片會覆蓋前一張，這是由于每次切圖時的命名相同所致。
本文為原創文章，轉載請注明出處，謝謝！
