[教學]Photoshop CC 的Image Assets功能,讓存檔效率提昇好幾倍

Image Assets

我從Photoshop 3.0就開始在使用,隨著版本更新,也有了很多方便功能。
但是其實很多人即使換成了新版本,還是繼續使用舊的方法,對於新版本的功能不太熟悉。
(包含我自己在內XD)

不過這個Photoshop CC的新功能,可以說是我第一個學會的CC新功能,也是非常愛又常常使用的供能。
把存檔速度大大提昇,工作效率也變快了。
可以說是網頁設計師及UI設計師會感動的功能。

到底Image Assets是什麼功能呢?
簡單地說,就是自動存圖的功能。
過去做網頁的時候,如果要存一個按鈕,你可能會單獨存檔或用Slice功能。
但是有了Image Assets,讓存檔方式多了一個選擇。

Image Assets基本使用法:


我製作了一個簡單的Web首頁。
假設我要將各別圖層,利用Image Aggests功能一口氣存檔。



















↑要存的圖,必須要各別一個圖層。也請記得,要先將檔案存檔
我要各別存「手機」「背景」「下面的5個icon」「Enter按鈕」


↑把圖層名稱,直接改為你想要取的檔名。例如背景圖,我取為background.png。
一定要把附檔名(檔案格式)也一起輸入,否則無法存檔。你可以選擇要存 jpg , png , gif 等格式。




↑取完檔名就選取 File > Generate > Image Assets
( 中文版: 檔案 > 產生 > 影像資產 )

這樣就已經把剛剛取名的圖檔全部輸出了。
開啟你的psd檔案資料夾。
會看到一個資料夾叫做 XXXXX-assets。
我的話,因為檔名是web.psd,所以有個資料夾叫做web-assets。


↑打開web-assets資料夾就會發現,只要我有命名的圖,全部一次被存取了。
之後你只要一修改圖,都會自動被存在此資料夾內。(會覆蓋原本的圖,如果想要保留舊的圖,要自己先copy到別的資料夾)

其實到這邊為止就是完成了最基本的使用方式。
光是這樣就夠方便。
不過,使用幾次之後,會慢慢有別的需求。
你可能會希望可以指定留白的範圍。


Image Assets 如何設定圖的留白範圍:

先隨便開一個icon_fb.jpg圖來看看。


↑預設狀態下的存檔,會把圖切的剛剛好,但是做Web或UI的時候,不見得每一個圖都希望切剛剛好。有時需要留白~該怎麼設定呢?


Step1.
設定Mask(遮罩)範圍


↑假設我要把icon_fb.jpg的圖層,加更多的留白空間,只要先選該圖層,並且用選取工具選一個範圍製作Mask即可。

Web-assets資料夾的icon_fb.jpg,應該有自動被更新了。
打開該圖看看:











↑剛剛我的選取範圍,就變成了留白範圍了~



過去的PS版本沒有此功能,所以有些人會購買plugin來做存檔輔助。
但是自從這個功能加入PS CC之後,我已經不用去買其它工具了~

Image Assets 進階使用法 :

其實如果是做Mobile UI的話,常常會面臨一個圖檔需要存2~3種尺寸。
檔名通常會這樣取:
icon.png
icon@2x.png

如果有這樣的需求,也可以用Image Assets輕鬆存檔。
( 但是建議圖本身要智慧型物件(Smart Object),才不會在放大縮小時影響品質。
如果在Illustrator做好的icon,只要貼到Photoshop時,選擇智慧型物件就可以了。)

step1: 新增一個空白圖層
step2: 把圖層檔名取為default 200% hi-res/@2x
這個圖層名稱的意思是 : 在hi-res資料夾中,存取2倍大的圖檔,並且檔名後面有@2x























↑ 只要一取名完畢,就會在assets資料夾內,自動新增hi-res資料夾。
@2x的圖都在裡面囉~

如果是要存for iPhone6+的尺寸就要存@3x尺寸。(也就是原圖的3倍大)
只要把此圖層名稱改為 default 300% hi-res/@3x
瞬間就會以3倍尺寸倍存取出來了!
如果想要一次存很多不同尺寸,也可以將Layer名稱改這樣:
default 100% iOS/@1x~ + 200% iOS/@2x + 300% Android/

這樣寫會存出3組檔案
第1組 : 100%尺寸,且檔名後面有@1x的圖在iOS資料夾內
第2組 : 200%尺寸,且檔名後面有@2x的圖在iOS資料夾內
第3組 : 300%尺寸,且檔名後面有@3x的圖在Android資料夾內
(把不同需求用+號來隔開就可以,記得 + 號前後要有空隔喔~)

其他還有依照各種不同需求的存檔法,將圖層名稱改變為:
300×100 XXX.png  → 指定尺寸為300x100px
200% XXX.png → 存檔為2倍大
XXX.png, XXX.gif   → 可以同時存png & gif 兩種格式檔案
200% XXX@2x.png, XXX.png → 可以存2倍大的檔案 & 原始尺寸的檔案



以上功能讓你存檔速度快好幾倍!







3 則留言: