Photoshop CCには、画像の変更と同時にリアルタイムにレイヤーを書き出す「画像アセット」というとても便利な機能があります。
しかし、先日他社のデザイナー、エンジニアと話していて、画像アセットの便利な機能が意外に知られていないことに気づきました。今回は、知っているととても便利なPhotoshop CCの画像アセット機能のテクニックについて紹介します。
使用しているPhotoshopのバージョンは、CC 2015です。
書き出し画質が設定できる
書き出し画像は、画質の設定によって大きく品質が変わってきます。画像アセット機能では、JPEG、PNGの書き出し画質を設定することができます。なお、GIF画像はアルファチャンネルありの8ビット画像のみ書き出すことができます。
JPEG画像の画質設定
JPEG画像は「~.jpg」という名前で書きだすことができますが、デフォルトの画質は80%です。他の画質で書き出したときは、レイヤー名の接尾辞を以下のように設定します。
| 接尾辞 | 画質 |
|---|---|
| .jpg | 80% |
| .jpg100 | 100% |
| .jpg6 | 60% |
PNG画像の色数指定
PNG画像は「~.png」という名前で書きだすことができますが、デフォルトでは32ビットのPNG画像（アルファチャンネルあり）です。他のビット数でレイヤー名の接尾辞を以下のように設定します。
| 接尾辞 | ビット数 | アルファチャンネル |
|---|---|---|
| .png | 32 | あり |
| .png24 | 24 | なし |
| .png8 | 8 | あり |
SVG画像の書き出しもできる
レイヤー名の接尾辞を「~.svg」とすることで、SVG画像の書き出しもできます。
書き出しフォルダの指定ができる
画像はPSDと同階層の「PSD-assets」というフォルダに保存されていきますが、この中でフォルダを指定して画像を書き出すことが可能です。大量の画像をフォルダに分けつつ効率よく書き出したいときに便利です。
HTML相対パスを指定するのと同じ手順で、
「書き出したいフォルダ名/画像名」
とします。
例えば、hogeフォルダにpiyo.pngを書き出したければ、以下のように設定します。
hoge/piyo.png
最後に
画像アセット機能は、Photoshop CCの数ある画像書き出し機能の中でもトップクラスに使いやすい機能です。（※）今回紹介した機能を使いこなし、より効率のよい制作につなげていただければと思います。
※ 「Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ - ICS MEDIA」にて各書き出し方法を比較しています。