Adobe Photoshop 画像アセットの命名規則を紹介

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

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

画像アセットとは？

画像アセットとは、レイヤー名にGIFやJPG、PNGなどの拡張子をつけることで、そのレイヤーやグループをそのままその拡張子で書き出すことのできる Adobe Photoshop 機能です。

機能を有効化する場合は、「ファイル」>「生成」>「画像アセット」にチェックを入れます。

画像の命名規則

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

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

出力画質の指定方法

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

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

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

サイズの指定方法

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

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

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

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

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

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

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

まとめ

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