Adobe Photoshop

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

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

  1. 画像アセットとは?
  2. JPGの命名規則
    1. 画質の指定方法
    2. サイズの指定方法
    3. Retina対応の画像を書き出す場合

画像アセットとは?

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

JPGの命名規則

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

JPEG画像
hogehoge.jpg

画質の指定方法

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

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

サイズの指定方法

JPG画像のサイズを指定する場合は次のようになります。

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 の画像アセットの命名規則を紹介しました。

スポンサーリンク

合わせて読みたい関連記事