原來Photoshop CC就有內建切圖神器

此篇文章限定Photoshop CC 2014以後的版本!

Photosho內建切圖神器 — 影像資產

今天要介紹一個相見恨晚的切圖工具，如果有使用過之前的外掛工具Cut & Slice，對這項工具的操作一定不會陌生！它也是用命名的方式快速產出切圖，只要兩個步驟

步驟一：打開影像資產

中文版是檔案/產生/影像資產，英文版的人請點選File/Generate/image Assets。

檔案/產生/影像資產

步驟二：開始命名

在想要切圖的圖層或資料夾檔名後面加入.png或是.jpg

將想要輸出的切圖命名加上.png

你會發現原本PSD檔的路徑多了一個新的資料夾 XXXX(PSD檔名)-assets，一打開圖都切好啦！！！（痛哭流涕

自動產生的/XXX-assets資料夾

切圖包含陰影的部分，只要名稱有.png或.jpg，即使隱藏也會輸出成切圖，在同個畫面做圖時非常方便！不過缺點就是自動產出的切圖都是靠著邊線，無法指定統一大小、保有留白，對於RD來說其實不太友善，所以建議各位需要置換的icon類還是另開PSD統一圖檔尺寸吧！

以下是同場加映!

實用功能：幫圖層一鍵命名

為了方便辨識是哪張圖，命名時常常會讓檔名寫的過長，如果這時候要更改，可真是一件苦差事啊！

現在只需要在圖檔裡面新增一個空白圖層，命名為default - XXX，檔案內的切圖就會自動在最後加註 - XXX了。

default — XXX，橫線兩邊要有空格

實用功能2：一次輸出不同尺寸的資料夾

如果不是使用Sketch作圖，要產出不同尺寸還真是麻煩呀….。

同樣的，在圖檔裡面新增一個空白圖層，命名為default XXX/, 50% XXX/，寫上想要的資料夾名稱跟縮放倍數，就能產生對應的資料夾！

如下圖的命名意思就是「產生Standard與mobile兩個資料夾，並且mobile裡面的圖為0.5x，名稱字尾加上-checkout」。

而我通常做圖用Android的xxhdpi(3x, 1920*1080)時, 就會使用

default xxhdpi/ + 33.33% mdpi/ + 50% hdpi/ + 66.66% xhdpi/

如果用mdpi做圖的寫法則是

default mdpi/ + 150% hdpi/ + 200% xhdpi/ + 300% xxhdpi/

自動產生三個資料夾

對於習慣使用Photshop的設計師我們，節省了不少時間呢！

有更多可以設定的參數，請務必去看看官方的說明，寫得很仔細！

從 Photoshop 中的圖層建立影像資產

就這樣！以上：）