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

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

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

 

Photoshopの画像アセット

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

 
これでデザインファイルと同じ階層に「｛ファイル名｝-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種類の画像をアセット生成しています。

 

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

 

昔からPhotoshopを利用されている方は、意外と追加された新機能を見逃していることもあります。
とても便利ですので是非、画像アセットを利用してみてください。