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

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

ビデオ:Photoshop CC での Web アセットの生成

ビデオ:Photoshop CC での Web アセットの生成
このビデオでは、Photoshop CC のアセットの生成機能を使って、他のプロジェクトで使用できる、様々なサイズと解像度の画像を出力する複数の方法を順を追って説明します。
Chris Converse

Adobe Generator を使った Web グラフィックの作成および生成方法については、Web用にアセットを抽出するを参照してください。

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

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

PSD ファイルとレイヤー階層の例
PSD ファイルとそのレイヤー階層の例

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

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

  1. PSD ファイルを開き、ファイル/生成/画像アセットを選択します。
  2. 画像アセットを生成するレイヤーまたはレイヤーグループの名前に適切なファイル形式の拡張子(.jpgpng または .gif)を追加します。例えば、レイヤーグループ名の Rounded_rectanglesEllipsesRounded_rectangles.jpgEllipses.png に変更し、レイヤー名の Ellipse_4Ellipse_4.gif に変更します。

注意:

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

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

画像アセット名はレイヤー名またはレイヤーグループ名から生成される
画像アセット名はレイヤー名/レイヤーグループ名から生成される

注意:

画像アセットの生成は現在のドキュメントで有効です。一度有効にすると、この機能は次回ドキュメントを開くたびに有効になっています。現在のドキュメントで画像アセットの生成を無効にするには、ファイル/生成/画像アセットの選択を解除します。

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

レイヤー/レイヤーグループから複数のアセットを生成するには、コンマでアセット名を区切ります。例えば、以下のレイヤー名では 3 つのアセットが生成されます。

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

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

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

[subfolder]/Ellipse_4.jpg 

Web デザインでの使用例

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

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

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

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

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

注意:

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

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

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

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

JPEG アセットは初期設定で 90 %の画質で生成されます。PNG アセットは初期設定で 32 ビット画像として生成されます。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 ビットの PNG 画像)
  • Delicious_2.jpg(絶対サイズ 100x100 px、画質 90 %の JPG 画像)
  • 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/

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

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

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

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

注意:

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

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

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

  1. 編集/環境設定/プラグインを選択します。
  2. Generator を有効にする」の選択を解除します。
  3. OK」をクリックします。

注意:

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

FAQ

一意のアセット名を指定する必要がありますか。

アセット名はドキュメントレベルで一意である必要があります。

各画像アセットを生成するときの初期設定の画質レベルを教えてください。

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

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 Relow プロジェクトを作成

ビデオ:Photoshop Generator から Edge Relow プロジェクトを作成
このビデオでは、320 ピクセルから 1,000 ピクセル以上までの画面サイズに対応する Web レイアウトを作成する方法を説明します。
Chris Converse

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー