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

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

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

画像アセットとは?

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

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

画像の命名規則

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

JPEG画像
hogehoge.jpg
GIF画像
hogehoge.gif
PNG画像
hogehoge.png

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

出力画質の指定方法

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

画質80%のJPEG画像
hogehoge.jpg8 または hogehoge.jpg80%
画質10%のJPEG画像
hogehoge.jpg1 または hogehoge.jpg10%
画質100%のJPEG画像
hogehoge.jpg10 または hogehoge.jpg100%

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

出力画質8のPNG画像
hogehoge.png8
出力画質24のPNG画像
hogehoge.png24
出力画質32のPNG画像
hogehoge.png32

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

サイズの指定方法

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

200 x 200 の場合
200 x 200 hogehoge.jpg
元のサイズから 200% の場合
200% hogehoge.jpg

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

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

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

元画像とRetina対応画像を書き出す場合
hogehoge.jpg,200% hogehoge2x.jpg

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

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

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

サブディレクトリを分けて元画像とRetina対応画像を書き出す場合
img/hogehoge.jpg,200% img2x/hogehoge.jpg

まとめ

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