Adobe Photoshop 画像アセットの命名規則を紹介
最終更新日 - 公開日 2017.10.11
by
Adobe Photoshop の画像アセットの命名規則を紹介します。
例えば、元画像とRetina対応画像を一緒に書き出したい場合に便利な方法です。
画像アセットとは?
画像アセットとは、レイヤー名に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 の画像アセットの命名規則を紹介しました。