Photoshop CC の便利な画像書き出し機能、自動アセット。レイヤー名に必要な情報を入れておくと自動で書き出してくれる。

しかし、Ratina対応などで複数サイズの画像を書き出そうとすると hoge.png, 200% hoge@2x.png, 300% hoge@3x.png のように長い文字列をレイヤー毎に書かなきゃいけないのがめちゃくちゃ面倒。

…と思っていたが、カンタンにできる良い方法があった。
※よく見たら公式サイトにも書いてあった。（下の方にある項目「アセットの初期設定の指定」）

自動アセット書き出しを楽にする方法

例えば、ある空のレイヤー名を
default @1x/, 200% @2x/ @2x, 300% @3x/ @3x
...みたいに書いておくと、その条件にて全てのアセット画像が一括で書き出される。

サンプルのpsdデータをつくってみた。「使ったことない」とか、「やってみたけど動かん」みたいな方は試してみてほしい。

• asset_sample_folder.psd ...フォルダver

• asset_sample_name.psd ...ファイル名ver

ファイル > 生成 > 画像アセット ...にチェックを入れると、同じディレクトリにフォルダが自動生成される。

ルール

• 先頭の “default” は必須

• 語尾に “/” をつけるとフォルダ扱いになる(必須ではない)

• サイズは “%” で指定できるが、“900 x 555” のような指定は今のところ不可

• “+” または “,” で区切って複数種類のアセットを生成できる

• 何かしらミス（重複や表記ルールズレ、非対応の特殊文字など）があると生成されないしエラーも出ない

• 個別のレイヤー名にサイズ（%）が入力されていればそちらが優先される

一番楽な書き方

フォルダ分け不要であれば、こう書くと一番楽。

default 100% + 200% @2x

• hoge.png

• hoge@2x.png

参考： Photoshopの「アセットの初期設定の指定」にフォルダー名はいらないよ、という話 – skpn @maepon -

終わりに

nanayuki先生に教えていただいたのをきっかけに書きました。

ありがたや〜〜。皆さん普通に知ってたのだろうか…。
私は今まで、Ratina用画像は レイヤー右クリック > 書き出し形式 ...を選び、書き出したいサイズ指定で対応していたが、これからはそんな手間も省ける。（実際今日も役に立った）