マニュアル キャンセル

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

注意:

画像アセットは、ファイル/自動処理/ジェネレータープラグインに表示されるようになりました。

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

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

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

Adobe Photoshop logo

まずは無料で試してみる
世界中で利用されている画像編集ツールを試そう

レイヤーまたはレイヤーグループからの画像アセットの生成

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

Photoshop 画像アセットを生成
PSD ファイルとそのレイヤー階層の例

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

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

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

特殊文字の : および * はレイヤー名には使用できません。

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

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

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

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

[subfolder]/Ellipse_4.jpg 

Web デザインでの使用例

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

Web デザインとそのレイヤー階層

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

  • 画像形式の拡張子を該当するレイヤー名に追加します。
Photoshop 適切なレイヤー/レイヤーグループの名前を変更

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

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

注意:

レイヤー/レイヤーグループのコンテンツから 1 つの画像アセットが生成されます。例えば、上のスクリーンショットの AdventureCo Logo のレイヤーグループは、シェイプレイヤーとライブテキストレイヤーを含んでいます。これらのレイヤーは、画像アセットがレイヤーグループから生成されたときに統合されます。

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

Photoshop 生成された画像アセット
生成された画像アセット

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

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

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

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%に拡大された 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 を付けます。次に、そのドキュメントから生成されるすべての画像アセットに適用する設定を入力します。以下に例を挙げます。

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/

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

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

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

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

初期設定の拡大縮小係数は、個々のレイヤーに指定された拡大縮小係数で上書きされます。

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

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

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

環境設定で画像アセットの生成を無効にすると、ファイル/自動処理/ジェネレータープラグインメニューコマンドは使用できなくなります。この機能は、環境設定ダイアログボックスでのみ再度有効にすることができます。

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

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

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

FAQ

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合