E=mc² 的日常: 利用 photoshop 網頁切版元件

（ 在PhotoShop設計網頁版面時，一直以來都依賴「切片」工具來將儲存版面中的元件。但是因為利用切片工具卻無法儲存網頁元件圖片倍數大小，例如200pxX200px的PNG圖檔，＠2就是400X400px。這樣的話我必須將所需的圖像元件分成好幾個工作區域來分別存取，實在很不方便。

研究PhotoShop 2020版之後，他其實可以利用 檔案 > 產生 >影像資產 來解決儲存網頁切片元件。

上方圖例，開啟編排好的psd設計版面將「影像資產」勾選起來後，儲存檔案後會自動在psd檔案旁邊產生一個檔案夾，如下示意圖。

在「圖層」工具面板中，圖層命名就顯得很重要 ; 如下圖右邊是「圖層」，左邊是儲存後產生的圖檔，可以對照一下，在圖層命名時已決定好需要的圖檔格式、尺寸大小、品質或是一次產生多個不同的圖片。

1、圖檔格式：包含jpg、png、gif

將想要產生的圖層或是圖層群組，直接命名需要的副檔格式，如：Ellipses.png或Ellipse_4.gif，儲存後即可產生需要的圖檔。

請注意：圖層名稱不支援特殊字元 ： 和 *。

2、圖層或圖層群組設定一次產生多組圖檔

若要從圖層/圖層群組產生多個資產，請以逗號分隔資產名稱。例如，下列圖層名稱會產生 3 個資產：

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

3、設定圖檔另外儲存在特定資料夾

您可選擇將特定圖層/圖層群組產生的圖檔，直接儲存至文件資產資料夾下的子資料夾中。在圖層/圖層群組名稱中加入子資料夾名稱，例如：

[子資料夾]/Ellipse_4.jpg

4、可以指定品質和尺寸大小

JPEG 資產預設為以 90% 的品質產生。PNG 資產預設產生為 32 位元影像。GIF 資產則以基本 Alpha 透明度產生。

因此設定時為：

• JPEG :  Ellipse_4.jpg50% 或是 Ellipse_4.jpg5（.jpg(1-10) 或 .jpg(1-100%)）
• PNG :  Ellipse_4.png24  (8、24 或 32)

指定的影像尺寸

1. 200% Ellipse_4.jpg  
2. 300 x 200 Rounded_rectangle_3.jpg
3. 10in x 200mm Rounded_rectangle_3.jpg
4. 42% Ellipse_4.png
5. 300mm x 20cm Rounded_rectangle_3.png
6. 10in x 50cm Rounded_rectangle_3.png
7. 42% Ellipse_4.gif
8. 300mm x 20cm Rounded_rectangle_3.gif
9. 20in x 50cm Rounded_rectangle_3.gif

附註：請記得在字首和資產名稱間加上一個空格。如果以像素指定大小，則可忽略單位。例如 300 x 200。

如圖所示，指定所要的輸出影像大小時，可以混用不同的單位和像素。例如，4in x 100 Rounded_rectangle_3.png 是可用於資產產生的有效圖層名稱。

指定資產的預設設定

您可為產生的資產指定全文件適用的預設設定。請依照下列步驟進行：

1. 在文件中建立空白圖層。
2. 圖層的名稱開頭使用關鍵字 default。現在輸入您要套用至從文件產生之所有影像資產的設定。例如：
   

default hi-res/

在名為 hi-res 的子資料夾中產生所有影像資產。例如 [asset_folder]/hi-res/Delicious.jpg。

default hi-res/@2x

在名為 hi-res 的子資料夾中產生所有影像資產。此外，在資產名稱後面加上 @2x。例如 [asset_folder]/hi-res/Delicious@2x.jpg。

default 50% lo-res/

在文件資產資料夾的 lo-res 子資料夾中，儲存縮小至 50% 的影像資產

default hi-res/@2x + 50% lo-res/

從圖層產生兩個影像資產：

• hi-res 子資料夾中，名稱後加 @2x 的影像資產
• lo-res 子資料夾中，縮小至 50% 的影像資產

最後，如果編排已不需要產生圖檔資產時，可將「影像資產」勾選取消或是

1. 選擇「編輯 > 偏好設定 > 增效模組」。
2. 取消選取「啟動產生器」。
3. 按一下「確定」。