Slide 1

Slide 1 text

快速切圖 Photoshop generator + Renamy Cathy Chen

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Slice PSDs in a whole new way Quick export to multiple resolutions

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Generator

Slide 6

Slide 6 text

從 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

Slide 7

Slide 7 text

Enable Generator

Slide 8

Slide 8 text

photoshop cc > preferences>plugin Step1

Slide 9

Slide 9 text

checked enable generator Step2

Slide 10

Slide 10 text

file>generator>image assets Step3

Slide 11

Slide 11 text

Rename Layer

Slide 12

Slide 12 text

⽤用逗號 (,) 分隔。Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png 儲存資產⾄至⼦子資料夾: [⼦子資料夾]/Ellipse_4.jpg ⾃自動儲存檔案 Generate image assets from layers

Slide 13

Slide 13 text

Specify quality and size parameters JPG 資產預設是以 90% 品質產⽣生 PNG 資產預設產⽣生為 32 位元影像 GIF 資產則以基本 Alpha 透明度產⽣生

Slide 14

Slide 14 text

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。

Slide 15

Slide 15 text

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。

Slide 16

Slide 16 text

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 資產

Slide 17

Slide 17 text

1.在⽂文件中建⽴立空⽩白圖層。 2.圖層的名稱開頭使⽤用關鍵字 default。現在輸⼊入您要 套⽤用⾄至從⽂文件產⽣生之所有影像資產的設定。 Specify default settings for assets

Slide 18

Slide 18 text

在名為 hi-res 的⼦子資料夾中產⽣生所有影像資產。例如 [asset_folder]/hi-res/Delicious.jpg。 在名為 hi-res 的⼦子資料夾中產⽣生所有影像資產。此 外,在資產名稱後⾯面加上 @2x。例如 [asset_folder]/ hi-res/[email protected]。 在⽂文件資產資料夾的 lo-res ⼦子資料夾中,儲存縮⼩小⾄至 50% 的影像資產 default hi-res/ default hi-res/@2x default 50% lo-res/

Slide 19

Slide 19 text

從圖層產⽣生兩個影像資產: hi-res ⼦子資料夾中,名稱後加 @2x的影像資產 lo-res ⼦子資料夾中,縮⼩小⾄至 50% 的影像資產 註解:預設縮放係數會被個別圖層指定的縮放係數覆寫。 default hi-res/@2x + 50% lo-res/

Slide 20

Slide 20 text

For example: epaper

Slide 21

Slide 21 text

Renamy

Slide 22

Slide 22 text

1.同時對多個圖層重新命名 2.管理你的圖層名稱列表 3.Regular Expression 正規表達式(regexp)是⼀一種 利⽤用特⽤用字元及⼀一些資料的標定、搜尋及替換的規則 4.autocomplete Renamy

Slide 23

Slide 23 text

5.additional name:在名稱前插⼊入+(加號),可以將⺫⽬目前 的名稱加上新輸⼊入的名稱 6.Original layer name usage:將*(星號)放在新名稱的 任何位置,星號會被先前的名稱取代 7. "%NN" to rename it to "01", "02", "03" ... Or use "%nn" for back order. Renamy

Slide 24

Slide 24 text

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:

Slide 25

Slide 25 text

Vedio Renamy Workflow with Adobe image assets generator

Slide 26

Slide 26 text

iOS:⽤用圖⽚片檔名分資料夾,每個資料夾裡放:@1x、 @2x、@3x Android: 分三個資料夾,分別為 mdpi (1x)、 hdpi(1.5x)、xhdpi(2x) App slice *與⼯工程師討論適合的⽅方式

Slide 27

Slide 27 text

檔名原本為a, iOS psd檔案為2x為例 a/[email protected], 50% a/a.png, 150% a/[email protected] 想要的結果為a資料夾下有: a.png、[email protected][email protected] 圖層應命名為:

Slide 28

Slide 28 text

輸出結果 iOS psd檔案為2x為例

Slide 29

Slide 29 text

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:

Slide 30

Slide 30 text

Android psd檔案為2x為例 輸出結果

Slide 31

Slide 31 text

That’s a wrap