Photoshop CCの画像アセットで画像の書き出しの効率化

Photoshop CC 2015から画像アセット機能が追加され、デザイン上の画像の書き出しが便利になりました。
今までの画像の書き出し方法は、書き出す画像または書き出す部分に対してスライスを切ってスライスの書き出しという流れで画像を生成していたかと思いますが、これからはその手間が必要なくなります。

Webデザイン等でデザインで利用している画像などを書き出す際に手間を省いて効率よく作業を進めれるよう、Photoshopの画像アセットでの画像書き出し方法をご紹介します。

Photoshopの画像アセット

Photoshopツールバーの「ファイル」から「生成」といき、画像アセットにチェックを入れます。

画像アセット機能は、Photoshopのアップデートの影響で表示の場所が変更されることもあります。
2024年7月頃のアップデート後は、「ファイル」から「自動処理」と進み、「ジェネレータープラグイン」の項目に表示されるようになりました。

これでデザインファイルと同じ階層に「｛ファイル名｝-assets」という名前の画像アセットのフォルダが作られます。
生成されたフォルダは後で確認します。

この画像アセットを利用する設定は後でも問題ありません。

画像アセットを利用する設定したら、レイヤーから書き出す画像に対してファイル名とファイル形式（.jpg、.png、.gif、.svg）を設定します。

以上で画像アセットでの書き出しが完了です。
他に何かやることはありません。

あとはレイヤーからファイル名を変えたり設定を変更すれば、自動的に「｛ファイル名｝-assets」のフォルダに生成されます。

これは便利ですね。
今までのスライスツールでスライスを切る作業がいらないわけです。

書き出す画像の形式はいろいろ設定できます。
いくつか見ていきましょう。

まずは書き出すことができる画像形式から。

ファイル形式

・JPEG
・PNG
・GIF
・SVG

書き出しオプションは以下のようにすることで設定したオプションで画像を書き出すことができます。
画質やサイズのパラメーターを設定していきます。

まずは画質パラメーターから。
画質パラメーターは末尾に設定を追加します。

画質パラメーター

JPEG

sample.jpg
sample.jpg8 （画質80%）
sample.jpg1 （画質10%）
sample.jpg50% （画質50%）

PNG

sample.png （半透明のアルファチャンネルのPNG-24）
sample.png8 （PNG-8）
sample.png24 （PNG-24）

続いてサイズの設定です。
サイズパラメーターはファイル名の前に追加します。
単位は「px、in、cm、mm」で出力することができます。
拡大・縮小は「%」を使います。

サイズパラメーター

300 x 200 sample.png （300px x 200px）
200% sample.png （200%の大きさ）
100mm × 20mm sample.png （100mm × 20mm）

ピクセル数で指定する場合は単位を省略できます。

複数のアセット生成

アセット生成はカンマ（,）で区切ることで複数生成することができます。

sample.jpg, sample.png

上記では一つの画像に対してJPEGとPNGの2種類の画像をアセット生成しています。

もちろん画像だけでなくテキストもいろいろとデザインして画像で書き出すこともあるでしょう。
画像と同じようにファイル名とデータ型の拡張子で名前を付けてあげるだけで画像として書き出すことができます。

2倍サイズの画像生成

Webデザインでは、Retinaディスプレイに対応するために2倍サイズの画像を用意する必要があります。
画像アセットでは、Photoshopで作成している等倍サイズだけでなく、2倍サイズの画像も生成できます。

注意点として、
画像などのビットマップデータは、拡大すると劣化してしまいます。
Photoshopで画像を扱う際には、大きいサイズの元画像から縮小するなどして利用する必要があります。
そして、2倍の画像を画像アセットで生成する前に、拡大・縮小しても劣化しないように、対象の画像をスマートオブジェクトに変換しておきましょう。

ちなみに、元画像を超える拡大は劣化してしまいます。
Photoshopで画像を扱ってデザインを作成する際は、なるべく元画像は大きいサイズの画像を利用して調整していきましょう。

対象の画像を選択した状態で、上部メニューの「レイヤー」から「スマートオブジェクト」と進み、「スマートオブジェクトに変換」を選択します。