画像アセット機能を使って画像を書き出す

こんにちは！

本日は、Photoshopの画像アセット機能についての記事です。
皆さんはPhotoshopで画像を書き出す際、「画像アセット」機能、使っていますか？

自分も従来は、Web用画像の書き出しをする際は「Web用に保存」メニューを使用していたのですが、
「画像アセット」機能の登場以来、画像の書き出し方法が圧倒的に便利になりました！

具体的には、
・スライスの概念に依存しない
・レイヤーフォルダごとに命名規則を変えるだけで柔軟なサイズ変更が可能
・jpg,png,gifの書き出し時に細かく設定を変えて一気に書き出し可能

などなど、従来の「Web用に保存」と比較して、優れている点がたくさんたくさんあります。
では早速、png形式の書き出しを例に、実際の書き出し手順をみてみましょう。

基本的な手順

手順としては、
(1). 書き出したい画像レイヤーを一つのレイヤーフォルダにまとめる
(2). そのレイヤーフォルダ名を、画像アセット用の命名規則にそって命名する
(3). [ファイル] > [生成] > [画像アセット]を選んで、画像アセット機能をオンにする

これだけです。例えば、

100％ stamp000.png32

この様にレイヤーフォルダ名を命名した上で（ここまでが上記の手順の(1)~(2)）、
[ファイル] > [生成] > [画像アセット]を選んで、画像アセット機能をオンにすると、これだけで
同階層の「****(psdファイル名)-assets」ディレクトリに、「等倍、32ビットのpng画像」が自動生成されます。

命名規則の基本形は、

[画像サイズ]+[半角スペース]+[画像名]+[拡張子]+[末尾パラメーター]

で、これは jpg,png,gif 全て共通の基本形です。

では、jpg,png,gif ではそれぞれどんなパラメーターが指定できるのか、見てみましょう。

pngの場合

[末尾パラメーター]部分に、出力画質を 8、24、32 から指定できます。
[画像サイズ]部分に、相対値(%)、または絶対値(px等)で画像サイズを指定できます。

例：

200％ stamp000.png32

2倍(@2x)のサイズ、32bitのpng画像を書き出し

320 x 240 stamp000.png32

横幅320px、高さ240pxの、32bitのpng画像を書き出し

jpgの場合

[末尾パラメーター]部分に、出力画質を 1~100% の間で指定できます。
[画像サイズ]部分に、相対値(%)、または絶対値(px等)で画像サイズを指定できます。

例：

100％ stamp000.jpg80%

等倍(@1x)のサイズ、画質80%のjpg画像を書き出し

640 x 480 stamp000.jpg60%

横幅640px、高さ480pxの、画質60%のjpg画像を書き出し(この例の様に、末尾の%は省略も可能です。)

gifの場合

[画像サイズ]部分に、相対値(%)、または絶対値(px等)で画像サイズを指定できます。

例：

50％ stamp000.gif

半分のサイズのgif画像を書き出し

上記の様になっています。

@2x、@3x画像生成時の注意点

retinaディスプレイなど、高解像度のモニタ対応のため、2倍、3倍の画像を書き出す必要がある場合がありますよね。そんな場合でも、「画像アセット」機能なら、1つのpsdから複数サイズの画像を一気に書き出す事が可能です。[画像サイズ]部分に100%(等倍),200%(@2x),300%(@3x)と命名したレイヤーフォルダ（とその中に、必要な画像レイヤー）をそれぞれ用意しておくだけです！

ただし、この際に注意が必要なのは、
「それ用の解像度を確保した元画像を用意した状態」で、「スマートオブジェクト」を用意しておく

という事です。書き出すのがベクター画像であれば上記の心配はいらないのですが、「画像アセット」機能が担保してくれるのはあくまでもサイズ生成の自動化部分であって、ラスター（ビットマップ）画像の@2x、@3x画像を書き出したい場合に関しては、当然の事ながら、必要とする大きさのピクセル数を持った元画像データがなければ期待通りの結果にはならない点に、ご注意ください！

この記事のまとめ

今回は、Photoshopの「画像アセット」機能を使った画像書き出しの方法について書きました。
この機能を上手に利用すると、例えばですが、「LINEスタンプ作成時」の効率の良いレイヤー作り・一括書き出しなどにも役に立ちます！

今後も、Webデザイン関連の記事について、執筆していきますのでどうぞ楽しみにしてください！