レイヤーからの画像アセットの生成

PSD ファイルのレイヤーまたはレイヤーグループのコンテンツから JPEG、PNG、GIF または SVG 画像アセットを生成できます。サポートされている画像形式の拡張子をレイヤー名またはレイヤーグループ名に追加すると、アセットが自動的に生成されます。また、生成される画像アセットの画質およびサイズパラメーターを指定することもできます。

PSD ファイルからの画像アセットの生成は、マルチデバイス web デザインで特に役立ちます。

Web グラフィックの作成および書き出し方法については、Photoshop から様々な形式でファイルを書き出す方法を参照してください。

画像アセットジェネレーターについて理解するには、以下のレイヤー階層を持つシンプルな PSD ファイル（このリンクからダウンロード可能）をご覧ください。

このファイルのレイヤー階層には、Rounded_rectangles と Ellipses の 2 つのレイヤーグループがあります。これらのレイヤーグループはそれぞれ 5 つのレイヤーを含んでいます。

以下の手順に従って、この PSD ファイルから画像アセットを生成してください。

1. PSD ファイルを開き、ファイル／自動処理／ジェネレータープラグイン／画像アセットを選択します。
2. 画像アセットを生成するレイヤーまたはレイヤーグループの名前に、適切なファイル形式の拡張子（.jpg、.png、.gif または .svg）を追加します。例えば、レイヤーグループ名の Rounded_rectangles と Ellipses を Rounded_rectangles.jpg と Ellipses.png に変更し、レイヤー名の Ellipse_4 を Ellipse_4.gif に変更します。

Photoshop で画像アセットが生成され、ソースの PSD ファイルと同じサブフォルダーに保存されます。ソースの PSD ファイルがまだ保存されていない場合、生成されたアセットはデスクトップの新しいフォルダーに保存されます。

クラウドドキュメントのアセットの生成

クラウドドキュメントで作業をしている場合、アセットは「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

アセットのサブフォルダーへの保存

特定のレイヤー／レイヤーグループから生成された画像アセットを、ドキュメントのアセットフォルダー直下のサブフォルダーに保存できるようになりました。レイヤー／レイヤーグループ名にサブフォルダー名を含めます。以下に例を挙げます。

[subfolder]/Ellipse_4.jpg 

Web デザインでの使用例

PSD ファイルからの画像アセットの生成は、マルチデバイス web デザインで特に役立ちます。以下の web デザインとそのレイヤー構造を考えてみてください。

Global Hotspots 画像グリッドの最上部のアイコンおよび最上部の行を画像アセットとして抽出しましょう。

• 画像形式の拡張子を該当するレイヤー名に追加します。

適切なレイヤー／レイヤーグループの名前を変更

Photoshop で画像アセットが生成され、ソースの PSD ファイルと同じ場所に保存されます。

画質パラメーターとサイズパラメーターの指定

JPEG アセットは初期設定で 90％の画質で生成されます。PNG アセットは初期設定で 32 bit 画像として生成されます。GIF アセットは基本的なアルファ透明度で生成されます。

アセット生成の準備でレイヤーやレイヤーグループの名前を変更するときに、画質とサイズをカスタマイズできます。

JPEG アセットのパラメーター

• 必要な出力画質を .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
のようにします。

PNG アセットのパラメーター

• 必要な出力画質を 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
のようにします。

GIF アセットのパラメーター

• 必要な出力画像サイズ（相対値または 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
のようにします。

GIF アセットでは画質パラメーターは使用できません。

複雑なレイヤー名の作成

アセット生成のためのレイヤー名を指定する場合、パラメーターを使用して複数のアセット名を指定できます。以下に例を挙げます。

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

このレイヤーから、Photoshop で以下のアセットが生成されます。

• Delicious.jpg（120％に拡大された 90％の画質の JPG 画像）
• Delicious.png（42％に縮小された 24 bit の PNG 画像）
• Delicious_2.jpg（絶対サイズ 100x100 px、画質 90％の JPG 画像）
• 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 では、3 つのファイルが作成されます（「100% Delicious」の文字列はファイル名ではないため無視される）。

• Layer 1.png、42％に縮小された 24 bit の PNG 画像
• Layer.jpg、絶対サイズ 100 x 100 ピクセル、画質 90％の JPG 画像
• サブフォルダー Quux 内の Foo Bar Baz.gif、250％に拡大された GIF 画像

アセットの初期設定の指定

生成されたアセットに対してドキュメント全体の初期設定を指定できます。次の手順に従います。

1. ドキュメント内に空白のレイヤーを作成します。
2. レイヤー名の先頭にキーワード default を付けます。次に、そのドキュメントから生成されるすべての画像アセットに適用する設定を入力します。以下に例を挙げます。
   

hi-res という名前のサブフォルダーにすべての画像アセットを生成します。例：[asset_folder]/hi-res/Delicious.jpg

hi-res という名前のサブフォルダーにすべての画像アセットを生成します。さらに、アセット名にサフィックスとして @2x を付加します。例：[asset_folder]/hi-res/Delicious@2x.jpg

画像アセットを 50% 縮小して、ドキュメントのアセットフォルダーの lo-res という名前のサブフォルダーに保存します。

1 つのレイヤーから 2 つの画像アセットを生成します。

• hi-res サブフォルダーに、サフィックス @2x が名前に付いた画像アセット
• lo-res サブフォルダーに、50% 縮小された画像アセット
  

すべてのドキュメントの画像アセット生成を無効にする

環境設定を変更することにより、すべての Photoshop ドキュメントでグローバルに画像アセットの生成を無効にできます。

1. 編集／環境設定／プラグインを選択します。
2. 「ジェネレーターを有効にする」の選択を解除します。
3. 「OK」をクリックします。

ジェネレータープラグインメニュー

Photoshop デスクトップ版バージョン 25.11 の 2024年7月リリース以前、ジェネレータープラグインは、ファイル／生成のメニューにありました。

現在は、初期設定の画像アセットプラグインを含むすべてのジェネレータープラグインが、ファイル／自動処理／ジェネレータープラグインのメニューにあります。  この変更は、サブメニュー名をより明確にし、「画像を生成」などの新しい生成機能と区別するために行われました。

FAQ