使用手冊 取消

從圖層產生影像資產

註解:

影像資產」現在位於「檔案 > 自動化 > 產生器外掛程式」之下。

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

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

如需了解如何建立和轉存網頁圖形,請參閱如何從 Photoshop 將檔案轉存為各種格式。

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

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

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

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

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

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

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

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

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

註解:

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

產生雲端文件的資產

如果您使用的是雲端文件,則資產會儲存在「Photoshop Cloud Associates」目錄中:

  • Windows:C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
  • macOS:/Users/yourname/Documents/Adobe/Photoshop Cloud Associates

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

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

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

將資產儲存至子資料夾

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

[子資料夾]/Ellipse_4.jpg 

網頁設計使用案例

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

網頁設計與其圖層階層

以下將擷取頂端圖示和「整體聚光」影像格點的頂端列做為影像資產:

  • 附加影像格式副檔名至適當的圖層名稱。
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 影像)

絕對縮放範例

絕對縮放的良好範例

  • 100x80 foo.png (簡單的絕對縮放)
  • 80 x 100px foo.png (長度間距)
  • 4in x100 foo.png (單位混合以及無單位)
  • 90mm x120cm foo.png (混合不同單位)
  • 100x? foo.png (萬用字元)
  • ?x60in foo.png (萬用字元開頭)

絕對縮放的不良範例

  • 100x100foo.png (檔案名稱前沒有空格)
  • 80x100 60% foo.png (同時混合絕對和相對縮放)
  • 50% 80x100 foo.png (同時混合絕對和相對縮放)
  • 20in cm x50cm foo.png (多個單位)
  • 30nm x20 nano.png (無效單位)

格式化和分離多個檔案

良好範例

  • Layer 1.png (檔案名稱中可以使用空格,會產生名為「Layer 1.png」的單一檔案)
  • Layer 1.png,Layer 2.jpg (以逗號做為分隔符號)
  • Layer 1.png, Layer 2.jpg (以逗號後接空格做為分隔符號)
  • Layer 1.png+Layer 2.jpg (以加號做為分隔符號)
  • Layer 1.png + Layer 2.jpg (以加號後接空格做為分隔符號)

將全部檔案整合在一起

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif 會產生三個檔案 (會忽略「100% Delicious」字串,因為這不是檔案名稱):

  • Layer 1.png,比例為 42% 的 24 位元 png
  • Layer.jpg,絕對大小為 100x100 像素,品質為 90% 的 jpg
  • Foo Bar Baz.gif,位於 Quux 子資料夾,比例為 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. 按一下「確定」
註解:

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

產生器外掛程式選單

Photoshop 桌面版 2024 月 7 月版 (25.11 版) 之前的版本,可在選單「檔案 > 產生」下找到產生器外掛程式。

現在所有產生器外掛程式,包含預設的「影像資產」外掛程式,均可在「檔案 > 自動化 > 產生器外掛程式」下找到。  進行這項變更可讓次選單的名稱更清楚易懂,並可與其他新的生成式功能如「產生影像」區別。

常見問題解答

更多相關資訊

更快、更輕鬆地獲得協助

新的使用者?