Photoshop Generator

Transcript

1. 快速切圖 Photoshop generator + Renamy Cathy Chen
3. Slice PSDs in a whole new way Quick export to multiple resolutions
5. Generator
6. 從 PSD 檔案的圖層或圖層群組藉由改變圖層名稱來⾃自 動產⽣生 JPEG、PNG 或 GIF 影像資產。 Updated in Photoshop CC version 14.1 (December 2014) ⽂文件：https://helpx.adobe.com/tw/photoshop/using/generate-assets-layers.html Photoshop Generator
7. Enable Generator
8. photoshop cc > preferences>plugin Step1
9. checked enable generator Step2
10. file>generator>image assets Step3
11. Rename Layer
12. ⽤用逗號 (,) 分隔。Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png 儲存資產⾄至⼦子資料夾: [⼦子資料夾]/Ellipse_4.jpg ⾃自動儲存檔案 Generate image assets from layers
13. Specify quality and size parameters JPG 資產預設是以 90% 品質產⽣生 PNG 資產預設產⽣生為 32 位元影像 GIF 資產則以基本 Alpha 透明度產⽣生
14. Parameters for JPG assets • 將想要的輸出品質加到資產名稱的字尾 —.jpg(1-10) 或 .jpg(1-100%)。 例如：Ellipse_4.jpg5 、Ellipse_4.jpg50%
 • 將想要的輸出影像⼤大⼩小 (相對⼤大⼩小或使⽤用⽀支援格式 —px、in、cm 及 mm) 加到資產名稱的字⾸首。Photoshop 會據以縮放影像。例如： • 200% Ellipse_4.jpg • 300 x 200 Rounded_rectangle_3.jpg • 10in x 200mm Rounded_rectangle_3.jpg • 附註: 請記得在字⾸首和資產名稱間加上⼀一個空格。如果以像素指定⼤大 ⼩小，則可忽略單位。例如 300 x 200。
15. Parameters for PNG assets • 將想要的輸出品質加到資產名稱的字尾 —8、24 或 32。例如 Ellipse_4.png24 • 將想要的輸出影像⼤大⼩小 (相對⼤大⼩小或使⽤用⽀支援格式 —px、in、 cm 及 mm) 加到資產名稱的字⾸首。Photoshop 會據以縮放影 像。例如：42% Ellipse_4.png • 300mm x 20cm Rounded_rectangle_3.png • 10in x 50cm Rounded_rectangle_3.png • 附註: 請記得在字⾸首和資產名稱間加上⼀一個空格。如果以像素 指定⼤大⼩小，則可忽略單位。例如 300 x 200。
16. Parameters for GIF assets • 將想要的輸出影像⼤大⼩小 (相對⼤大⼩小或使⽤用⽀支援格式 —px、in、cm 及 mm) 加到資產名稱的字⾸首。例如：42% Ellipse_4.gif • 300mm x 20cm Rounded_rectangle_3.gif • 20in x 50cm Rounded_rectangle_3.gif • 附註: 請記得在字⾸首和資產名稱間加上⼀一個空格。如果以像素指定 ⼤大⼩小，則可忽略單位。例如 300 x 200。 • 如圖所⽰示，指定所要的輸出影像⼤大⼩小時，可以混⽤用不同的單位和像 素。例如，4in x 100 Rounded_rectangle_3.gif 是可⽤用於資產產 ⽣生的有效圖層名稱。 • 品質參數不適⽤用於 GIF 資產
17. 1.在⽂文件中建⽴立空⽩白圖層。 2.圖層的名稱開頭使⽤用關鍵字 default。現在輸⼊入您要 套⽤用⾄至從⽂文件產⽣生之所有影像資產的設定。 Specify default settings for assets
18. 在名為 hi-res 的⼦子資料夾中產⽣生所有影像資產。例如 [asset_folder]/hi-res/Delicious.jpg。 在名為 hi-res 的⼦子資料夾中產⽣生所有影像資產。此 外，在資產名稱後⾯面加上 @2x。例如 [asset_folder]/ hi-res/Delicious@2x.jpg。 在⽂文件資產資料夾的 lo-res ⼦子資料夾中，儲存縮⼩小⾄至 50% 的影像資產 default hi-res/ default hi-res/@2x default 50% lo-res/
19. 從圖層產⽣生兩個影像資產： hi-res ⼦子資料夾中，名稱後加 @2x的影像資產 lo-res ⼦子資料夾中，縮⼩小⾄至 50% 的影像資產 註解：預設縮放係數會被個別圖層指定的縮放係數覆寫。 default hi-res/@2x + 50% lo-res/
20. For example: epaper
21. Renamy
22. 1.同時對多個圖層重新命名 2.管理你的圖層名稱列表 3.Regular Expression 正規表達式（regexp）是⼀一種 利⽤用特⽤用字元及⼀一些資料的標定、搜尋及替換的規則 4.autocomplete Renamy
23. 5.additional name:在名稱前插⼊入+(加號)，可以將⺫⽬目前 的名稱加上新輸⼊入的名稱 6.Original layer name usage:將*(星號)放在新名稱的 任何位置，星號會被先前的名稱取代 7. "%NN" to rename it to "01", "02", "03" ... Or use "%nn" for back order. Renamy
24. You have 2 layers with names: "normal" and "hover" And you will type in Renamy: "button-*.png" Result will be "button-normal.png" and "button- hover.png" For example:
25. Vedio Renamy Workflow with Adobe image assets generator
26. iOS:⽤用圖⽚片檔名分資料夾，每個資料夾裡放:@1x、 @2x、@3x Android: 分三個資料夾，分別為 mdpi (1x)、 hdpi(1.5x)、xhdpi(2x) App slice *與⼯工程師討論適合的⽅方式
27. 檔名原本為a， iOS psd檔案為2x為例 a/a@2x.png, 50% a/a.png, 150% a/a@3x.png 想要的結果為a資料夾下有: a.png、a@2x.png、a@3x.png 圖層應命名為：
28. 輸出結果 iOS psd檔案為2x為例
29. 2x/1x/1.5x Android psd檔案為2x為例 創⽴立⼀一個空⽩白圖層置頂 default xhdpi/ + 50% mdpi/ + 75% hdpi/ 檔名原本為a， 想要的結果為mdpi資料夾、hdpi資料 夾、xhdpi資料夾下分別有: a.png、a.png（1.5x）、a.png(2x) A:
30. Android psd檔案為2x為例 輸出結果
31. That’s a wrap