切圖是銜接UI設計和應用程序的橋梁，是一種將設計師的“理想”轉化為“現實”的工作。 由於不同人的實現方法不同，可能對切圖的需求也存在一定的差異。作為前端工程師，掌握切圖將為提升自己的競爭力帶來一臂之力。
一般來說，photoshop可以通過手動進行切圖，這樣比較好控制，但是對於復雜的UI來說，往往比較費事費力。photoshop 從CC版開始對於切圖的功能進行了提升。可以自動對PSD文件按圖層進行自動切圖（原理就是模擬人的操作，將其他圖層設置為隱藏，然后對待切圖的圖形進行裁剪，並支持透明背景）。下面用step by step介紹一下photoshop CC如何實現自動切圖：
1、准備UI資源文件(一般為美工提供PSD文件）login-form.psd
2、用photoshop （CC 2015）打開該文件，圖層結構如下：
3、photoshop中選擇【文件】【導出】【將圖層導出到文件】，如下圖：
4、打開導出到文件配置對話框，（默認將存放目錄放於桌面）如下圖：
選擇PNG-24,勾選上透明區域、交錯和裁切圖層。
5、單據【運行】，效果如下：
6、根據UI復雜度不同，等候的時間不同,最后切圖后的資源如下圖所示（移動到文件夾中）：
