您可以從 PSD 檔案的圖層或圖層群組內容產生 JPEG、PNG 或 GIF 影像資產。當您將支援的影像格式副檔名附加至圖層名稱或圖層群組名稱時,就會自動產生。或者,您也可以指定產生之影像資產的品質和大小參數。

從 PSD 檔案產生影像資產在多裝置網頁設計時特別有用。

影片: 在 Photoshop CC 中產生網頁資產

影片: 在 Photoshop CC 中產生網頁資產
此影片將逐一說明在 Photoshop CC 中使用資產產生器的各種方式,以輸出不同尺寸和解析度的影像供其他專案使用。
Chris Converse

如何使用 Adobe Generator 建立並產生設計網頁圖形,請參閱摘取網頁的資產

從圖層或圖層群組產生影像資產

為了更深入了解影像資產產生器,請考慮一個簡單的 PSD 檔案 (由此連結下載),並具備下列圖層階層:

Photoshop 產生影像資產
PSD 檔案範例與其圖層階層

此檔案的圖層階層有兩個圖層群組—Rounded_rectanglesEllipses。每個圖層群組都包含 5 個圖層。

遵循以下步驟,即可由此 PSD 檔案產生影像資產:

  1. 開啟 PSD 檔案,並選取「檔案 > 產生 > 影像資產」
  2. 在您想要產生影像資產的圖層或圖層群組名稱中,加入適當的檔案格式副檔名 (.jpg.png.gif)。例如,將圖層群組 Rounded_rectanglesEllipses 重新命名為 Rounded_rectangles.jpgEllipses.png;將圖層 Ellipse_4 重新命名為 Ellipse_4.gif

註解:

圖層名稱不支援特殊字元 :*

Photoshop 就會產生影像資產並將其儲存至來源 PSD 檔案的相同子資料夾。如果來源 PSD 檔案尚未儲存,Photoshop 會將產生的資產儲存在
您桌面的新資料夾中。

Photoshop 影像資產名稱
影像資產名稱是由圖層名稱/圖層群組名稱產生

註解:

影像資產產生會為目前的文件啟用。啟用後,文件開啟時此功能都會維持可用。若要停用目前文件的影像資產產生,請取消選取「檔案 > 產生 > 影像資產」

從圖層或圖層群組產生多個資產

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

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

將資產儲存至子資料夾

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

[子資料夾]/Ellipse_4.jpg 

網頁設計使用案例

從 PSD 檔案產生影像資產在多裝置網頁設計時特別有用。請考慮下列網頁設計及其圖層結構:

網頁設計與其圖層階層
網頁設計與其圖層階層

以下將摘取頂端圖示和「整體聚光」(Global Hotspots) 影像格點的第一列做為影像資產:

  • 附加影像格式副檔名至適當的圖層名稱。
Photoshop 重新命名適當的圖層/圖層群組
Photoshop 重新命名適當的圖層/圖層群組

重新命名適當的圖層/圖層群組

註解:

將會從圖層/圖層群組的內容產生單一影像資產。例如,上方螢幕畫面中的 AdventureCo Logo 圖層群組包含形狀圖層和即時文字圖層。從圖層群組產生影像資產時,這些圖層會平面化。

Photoshop 會產生影像資產並將其儲存至來源 PSD 檔案的相同位置。

Photoshop 產生的影像資產
產生的影像資產

指定品質和大小參數

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

重新命名圖層或圖層群組以便準備產生資產時,您可自訂品質和大小。

JPEG 資產參數

  • 在資產名稱的字尾加上想要的輸出品質: .jpg(1-10) 或 .jpg(1-100%)。例如:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • 在資產名稱的字首加上想要的輸出影像尺寸 (相對尺寸或支援格式: pxincmmm)。Photoshop 會據以縮放影像。例如:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

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

註解:

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

PNG 資產的參數

  • 在資產名稱的字尾加上想要的輸出品質: 82432。例如:
    • Ellipse_4.png24
  • 在資產名稱的字首加上想要的輸出影像尺寸 (相對尺寸或支援格式: pxincmmm)。Photoshop 會據以縮放影像。例如:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

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

註解:

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

GIF 資產的參數

  • 在資產名稱的字首加上想要的輸出影像尺寸 (相對尺寸或支援格式: pxincmmm)。例如:
    • 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 資產。

建立複雜的圖層名稱

命名資產產生的圖層時,您可以使用參數指定多個資產名稱。例如:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop 會從此圖層產生下列資產:

  • Delicious.jpg (縮放至 120% 的 8 品質 JPG 影像)
  • Delicious.png (縮放至 42% 的 24 位元 PNG 影像)
  • Delicious_2.jpg (90% 品質的 JPG 影像,絕對大小為 100x100 像素)
  • Delicious.gif (縮放至 250% 的 GIF 影像)

指定資產的預設設定

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

  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% 的影像資產

註解:

預設縮放係數會被個別圖層指定的縮放係數覆寫。

停用所有文件的影像資產產生

您可以修改「偏好設定」,全域停用所有 Photoshop 文件的影像資產產生。

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

註解:

「偏好設定」停用影像資產產生時,將無法使用「檔案 > 產生」選單指令。此功能必須從「偏好設定」對話框才能再次啟用。

常見問題解答

我需要指定唯一的資產名稱嗎?

資產名稱在文件層級必須是唯一的。

各種影像資產產生的預設品質等級是?

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

Photoshop 從圖層產生影像資產時會具備透明度和其他效果嗎?

會。套用至圖層的透明度和其他效果會反映在從圖層產生的資產中。不過,在產生的資產中這些效果會被平面化。

從版面出血之圖層產生的影像資產會是怎樣?

資產剪裁至文件邊界。如果影像並未落在文件邊界內,Generator 就不會建立關聯的影像資產。

逗號是影像資產名稱之間唯一允許的分隔字元嗎?

除了逗號 (,),您還可以使用加號 (+) 做為影像資產名稱之間的分隔字元。例如:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

與下列相同:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

影片: 使用 Photoshop Generator 建立 Edge Reflow 專案

影片: 使用 Photoshop Generator 建立 Edge Reflow 專案
此影片將說明如何建立根據螢幕大小調整的網頁版面 (320 像素到 1,000 像素以上)。
Chris Converse

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策