Adobe Photoshop 画像アセットの使い方を紹介

Adobe Photoshop の画像アセットの使い方と命名規則を紹介します。
例えば、元画像とRetina対応画像を一緒に書き出したい場合に便利な方法です。

1. 画像アセットとは？
2. 画像の命名規則
3. 画質やサイズの調整方法
   1. 画質の指定方法
   2. サイズの指定方法
   3. Retina対応の画像を書き出す場合
   4. ディレクトリを指定する場合
4. 画像が書き出されない時の対処方法

画像アセットとは？

画像アセットとは、レイヤー名にGIF・JPG・PNGなどの拡張子をつけることで、そのレイヤーやグループを指定した拡張子で書き出すことのできる Photoshop の便利機能です。
アセットを使用する場合は「ファイル」>「生成」>「画像アセット」にチェックを入れると、同一ディレクトリに「xxxx-assets」ファルダーが作成されて画像が書き出されます。

画像の命名規則

画像アセットでJPG・GIF・PNG画像を書き出す場合、次の命名規則で指定の画像を書き出すことができます。
以下、画像のファイル名が hogehoge の場合の書き出し方法です。

出力画質やサイズの調整方法

出力画質の指定方法

JPGの出力画質を指定する場合は次のようになります。

PNGの出力画質を指定する場合は次のようになります

GIFの出力画質は指定できません。

サイズの指定方法

画像サイズを指定する場合は、相対値または px、in、cm、mm などの単位を指定します。

サイズをピクセルで指定する場合は単位を省略できます。
透明部分は画像領域とみなされない場合があります。レイヤーマスクで画面全体を覆うなどで適宜調整を加えてください。
また、例えば 200% と指定して表示サイズよりも大きい画像で書き出す場合は、スマートオブジェクトなどを活用してください。

Retina対応の画像を書き出す場合

Retina 対応の画像を書き出す場合は、次のような指定方法があります。

「,（カンマ）」でアセット名を区切ることで、一度に複数の画像を書き出すことができます。

ディレクトリを指定する場合

保存される画像をディレクトリで分ける場合は、ディレクトリ名とアセット名の間にスラッシュを挿入します。

画像が書き出されない時の対処方法

アセット画像が書き出されないとエラーファイルが表示されます。
画像が書き出されない場合は次の点を確認してください。

アプリを再起動

一度アプリを再起動してみましょう。

レイヤー名（アセット名）を再設定

正しく指定している場合でもエラーが出る場合があります。レイヤー名を一度消して記入し直してください。

同一ファイル名を変更

同じアセット名があるとエラーがでます。名前を変えてください。

まとめ

Adobe Photoshop の画像アセットの使い方と命名規則を紹介しました。