Photoshop如何?UI自動切圖？，photoshop實現ui

Photoshop如何?UI自動切圖？，photoshop實現ui

　　切圖嚴格來說並不是UI設計師的工作, 而是前端工程師的工作,指的是將UI設計師的設計(大部分為photoshop建立的PSD檔案）轉化為介面（網頁或表單等）所需要資源的過程。
切圖是銜接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複雜度不同，等候的時間不同,最後切圖後的資源如所示（移動到檔案夾中）：