Photoshop画像アセットの生成ルールまとめ

Photoshopの「画像アセットの生成」がとても便利で重宝しています。
ルールがややこしいので、一覧で見られるようにまとめましたので参考になれば幸いです。

………
「画像アセットなにそれ？」って人は、下部にAdobeの公式解説サイトを掲載しておくのでそちらをご参照ください。他にもわかりやすく書いているサイトさんがあるので、初めての人は「画像アセット photoshop」で検索をおすすめします。

画像アセットとは？
・レイヤー名に名前をつけると画像が自動生成される便利機能。
・ツールバー→ファイル→生成→画像アセット　クリックで書き出し用のフォルダが作られ、その中に画像が自動生成されます。フォルダはPSDのデータ内、同階層に作成されます。
………


【画像アセットの生成ルール】
「logo」という名前の画像にしたい場合
レイヤー名かフォルダ名に下記を入力。

■jpg
☆logo.jpg　　　→未指定の場合、90%の画質。
・logo.jpg10　　→jpgの100%画質（1~10で指定可能）
・logo.jpg70%　 →jpgの70%画質（0％~100%で指定）

………
■png
☆logo.png　　→未指定の場合、png-32形式。（透過効果あり）
・logo.png24　→png-24形式。（透過効果なし）
・logo.png8　 →png-8形式。（透過効果なし）

………
■大きさ指定（縦横サイズ、％）
※名前の頭に指定、半角スペースあける。
・300×200 logo.jpg　→横300×縦200pxのjpg画像。
・200% logo.jpg　　→200％の大きさ

………
■複数の書き出し（形式や画質を一度に複数書き出しできる）
※コンマで区切るだけ。
・logo.png,logo.gif　→pngとgif画像が生成される。
・200% logo@2x.png,logo.png　→logo@2x.png(200%の大きさ)と、logo.pngを生成。

………
■フォルダー分けしたい場合
[subfolder]/logo.png
　→アセットファイルの中にサブフォルダーができて、その中に画像が入る。

………
■Retina用@2x　２倍書き出し
・200% logo@2x.png　→logo@2x.png（200%に拡大）という名前の画像生成。
・logo.png,200% logo@2x.png　→ logo.pngと、logo@2x.png（200%に拡大）
・[normal]/logo.png,200% [2x]/logo@2x.png
　　→normalフォルダにlogo.png。2xフォルダにlogo@2x.png(200%に拡大)

____________________________________________
※gif、svgも指定して保存可能。

※WEB用に保存する場合、未指定でOK
　jpgは90〜80画質で使う人が多いもようです。

※フォルダでもレイヤーでもOK
　名前つければそのデータを書き出してくれます。

※画像の切り抜きや、余白をつけたい場合
　…レイヤーマスクで範囲を設定しておけばOK

※複数の書き出しの場合、＋でも,で区切ってもOK
____________________________________________

………
■データ全体にまとめて設定したい時
☆[例]default @1x/, 200% @2x/ @2x
※例えばRetina対応の為に、２倍画像も全部用意しないと行けない時、
　全レイヤーにいちいち記述しなくても、まとめて設定できる便利な方法！

1：空のレイヤーを作成する。
2：レイヤー名の先頭に「default 」 を付ける。（半角スペース必要）
　　続けて、全体に適用したいルールを設定する。

☆default normal/, 200% 2x/ @2x
　→normalという名前のフォルダに画像生成＋
　　2xという名前のフォルダに、200%に拡大して、名前の後ろに@2xとついた画像を生成
　　（例）logo.pngというレイヤー名がある場合
　　　　　→normalフォルダ／logo.png
　　　　　　2xフォルダ　　／logo@2x.png（200%に拡大した画像）

↓わかりやすい解説図がtwitterに掲載されています。
https://twitter.com/purples313/status/911038644936310785/photo/1?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E911038644936310785&ref_url=https%3A%2F%2Fblog.rokuzeudon.com%2Fentry%2Fasset_photoshop

☆default @1x/, 200% @2x/ @2x
　この記述がわかりやすそう。
　→@1xフォルダにノーマル画像生成。＋@2xフォルダに、200%に拡大＆@2xと名前の後ろにつけて生成。

…………
・その他の例
　default -m,50% -low,200% -hi
　　（例）logo.pngというレイヤー名がある場合
　　　　　→３つの画像が生成される。
　　　　　　logo-m.png　　（100%画質で名前の後ろに-mがつく）
　　　　　　logo-low.png　（50%画質で名前の後ろに-lowがつく）
　　　　　　logo-hi.png 　（200%画質で名前の後ろに-hiがつく）

　default img/
　→img という名前のサブフォルダーにすべての画像アセットを生成する。
　
default img/@2x　→imgのサブフォルダー＋名前の後ろに@2x を付ける。（例）logo@2x.png
　default 50% half/　→画像を50%縮小して、halfフォルダ内に画像生成。
　default hi/@2x + 50% low/　→1 つのレイヤーから 2 つの画像を生成。＋hiフォルダーに、名前の後ろに@2x が付いた画像を生成。更に、lowフォルダーに、50% 縮小された画像を生成。

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

画像アセットの公式解説、基本ルールは下部からどうぞ。
Adobe：レイヤーからの画像アセットの生成
https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.htm