在Web開發(fā)當(dāng)中，前端開發(fā)充當(dāng)著“承上啟下”的重要角色：上“承”設(shè)計（切圖），下“啟”后端（數(shù)據(jù)交互）。那么，今天我就來跟大家講講切圖~~~
本人常用兩種切圖方式：“選框復(fù)制法”和“切片法”，在此只講解選框復(fù)制法的快速切圖方法。
該方法主要針對切PNG圖片，選用工具為Photoshop左側(cè)工具欄中的選框工具。（本文使用Photoshop cc演示）
步驟如下（以一張PSD設(shè)計稿為例）：
①打開一張PSD設(shè)計圖。
②用移動工具單擊需要切的圖片，在此之前注意選擇以下狀態(tài)。
此時右側(cè)圖層面板中的圖標(biāo)將會選中：
③用選框工具框住該圖層。
④從這步起開始錄制動作，方法如下：
a.點擊“窗口”-“動作”（快捷鍵Alt+F9）添加動作面板。
b.新建動作
c.選擇功能鍵，可自己隨意選擇，錄制完該動作后可以通過按下該功能鍵一鍵切圖。
d.此時動作錄制開始。
⑤按Ctrl+C復(fù)制該圖層，并按Ctrl+N新建文件。
注意：這里為了防止所切圖層是矢量圖（矢量圖不能直接復(fù)制），可先通過右鍵單擊選擇“轉(zhuǎn)換為智能對象”轉(zhuǎn)換后再繼續(xù)以下操作。
⑥按Ctrl+V粘貼圖層。
⑦按Ctrl+Shift+Alt+S將圖片保存為Web所用格式，勾選狀態(tài)如下：
然后選擇保存路徑即可，一般我會在桌面上新建一個“快速切圖”文件夾，然后保存路徑選擇該文件夾，之后所有所切圖片均會進(jìn)入該文件夾中。
⑧關(guān)閉該圖片文件
⑨結(jié)束動作錄制。
到這里，快速切圖方法已經(jīng)介紹完了，錄制動作結(jié)束之后，以后每次切圖，只需先手動完成①②③步驟，然后按下新建動作時選的功能鍵（本例所選F10），圖片就自動進(jìn)入指定路徑了（本例路徑為桌面上的“快速切圖”）。
結(jié)束語：雖然說該快速切圖方法非常便捷，但是也是有自己缺點的。比如，每次切玩一張圖，必須得手動重命名圖片，否則之后所切圖片會覆蓋前一張，這是由于每次切圖時的命名相同所致。
本文為原創(chuàng)文章，轉(zhuǎn)載請注明出處，謝謝！
