LOGzeudon

名古屋で働いているWebデザイナーのブログです

空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になった

空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になった

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

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

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


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

f:id:rokuzeudon:20170923031324j:plain

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

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

f:id:rokuzeudon:20170923031333j:plain

ルール

  • 先頭の “default” は必須
  • 語尾に “/” をつけるとフォルダ扱いになる(必須ではない)
  • サイズは “%” で指定できるが、“900 x 555” のような指定は今のところ不可
  • “+” または “,” で区切って複数種類のアセットを生成できる
  • 何かしらミス(重複や表記ルールズレ、非対応の特殊文字など)があると生成されないしエラーも出ない
  • 個別のレイヤー名にサイズ(%)が入力されていればそちらが優先される

フォルダ不要な場合の一番楽な書き方

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

default 100% + 200% @2x
こんな感じに書いておくと、

  • hoge.png
  • hoge@2x.png

のように出力されるそうです!

終わりに

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

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