PSD ファイルのレイヤーまたはレイヤーグループのコンテンツから JPEG、PNG または GIF 画像アセットを生成できます。サポートされている画像形式の拡張子をレイヤー名またはレイヤーグループ名に追加すると、アセットが自動的に生成されます。また、生成される画像アセットの画質およびサイズパラメーターを指定することもできます。
PSD ファイルからの画像アセットの生成は、マルチデバイス Web デザインで特に役立ちます。
Web グラフィックの作成および書き出し方法については、「Photoshop からさまざまな形式でファイルを書き出す方法」を参照してください。
画像アセットの生成を理解するには、以下のようなレイヤー階層を持つシンプルな PSD ファイル(このリンクからダウンロード可能)をご覧ください。
このファイルのレイヤー階層には、Rounded_rectangles と Ellipses の 2 つのレイヤーグループがあります。これらのレイヤーグループはそれぞれ 5 つのレイヤーを含んでいます。
以下の手順に従って、この PSD ファイルから画像アセットを生成してください。
- PSD ファイルを開き、ファイル/生成/画像アセットを選択します。
- 画像アセットを生成するレイヤーまたはレイヤーグループの名前に適切なファイル形式の拡張子(.jpg、png または .gif)を追加します。例えば、レイヤーグループ名の Rounded_rectangles と Ellipses を Rounded_rectangles.jpg と Ellipses.png に変更し、レイヤー名の Ellipse_4 を Ellipse_4.gif に変更します。
注意:
特殊文字の : および * はレイヤー名には使用できません。
Photoshop で画像アセットが生成され、ソースの PSD ファイルと同じサブフォルダーに保存されます。ソースの PSD ファイルがまだ保存されていない場合、生成されたアセットはデスクトップの新しいフォルダーに保存されます。
注意:
画像アセットの生成は現在のドキュメントで有効です。一度有効にすると、この機能は次回ドキュメントを開くたびに有効になっています。現在のドキュメントで画像アセットの生成を無効にするには、ファイル/生成/画像アセットの選択を解除します。
レイヤー/レイヤーグループから複数のアセットを生成するには、コンマでアセット名を区切ります。例えば、以下のレイヤー名では 3 つのアセットが生成されます。
Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png
特定のレイヤー/レイヤーグループから生成された画像アセットを、ドキュメントのアセットフォルダー直下のサブフォルダーに保存できるようになりました。レイヤー/レイヤーグループ名にサブフォルダー名を含めます。例:
[subfolder]/Ellipse_4.jpg
注意:
レイヤー/レイヤーグループのコンテンツから 1 つの画像アセットが生成されます。例えば、上のスクリーンショットの AdventureCo Logo レイヤーは、シェイプレイヤーとライブテキストレイヤーを含んでいます。これらのレイヤーは画像アセットがレイヤーグループから生成されたときに統合されます。
- 必要な出力画質を .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
注意:
必要な出力画像サイズを指定するときは異なる単位とピクセル数を混合できます。例えば、4in x 100 Rounded_rectangle_3.jpg はアセットの生成に有効なレイヤー名です。
- 必要な出力画質を 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
注意:
必要な出力画像サイズを指定するときは異なる単位とピクセル数を混合できます。例えば、4in x 100 Rounded_rectangle_3.png はアセットの生成に有効なレイヤー名です。
- 必要な出力画像サイズ(相対値または px、in、cm、mm などのサポートされている形式)をアセット名の最初に追加します。以下に例を挙げます。
- 42% Ellipse_4.gif
- 300mm x 20cm Rounded_rectangle_3.gif
- 20in x 50cm Rounded_rectangle_3.gif
注意:
必要な出力画像サイズを指定するときは異なる単位とピクセル数を混合できます。例えば、4in x 100 Rounded_rectangle_3.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 画像)
生成されたアセットに対してドキュメント全体の初期設定を指定できます。次の手順に従います。
- ドキュメント内に空のレイヤーを作成します。
- レイヤー名の先頭にキーワード default を付けます。次に、そのドキュメントから生成されるすべての画像アセットに適用する設定を入力します。以下に例を挙げます。
注意:
初期設定の拡大縮小係数は、個々のレイヤーに指定された拡大縮小係数で上書きされます。
注意:
環境設定で画像アセットの生成を無効にすると、ファイル/生成メニューコマンドは使用できなくなります。この機能は、環境設定ダイアログボックスでのみ再度有効にすることができます。
