Photoshopのassets-generatorを使うの捗る

Photoshop CCでsvg吐き出すのどうやんだろうかと調べたら
こちらの記事を見つけた。
ほほー、assets-generatorなんてあんのかーと色々調べると色々面白かったのでメモ

セットアップ

1. homeディレクトリに.generator.jsonを作成

   • 最初generator.jsonじゃないといけないのかなー、ヤだなーと思っていたけど調べたらdotfile的な感じでもOKらしい。
   • homesickの管理下に置くと捗る

2. .generator.jsonをこんな感じで下記を記載

   • svgを吐き出したかったのでやったけどしなくても動くかも

   {
         "generator-assets":  { 
           "svg-enabled": true,
           "webp-enabled": true
         }
   }
   

   • ほかにもこんなオプションが設定可能

3. Photoshopを再起動（重要）

4. Photoshopのメニューから「ファイル」→「生成」→「画像アセット」を選択してチェックを入れる

   • このチェック、起動のたびに押さないといけなそう

5. ファイル名_assetsというディレクトリにもりもり出てくる

使い方＆Tips

• 基本的にはレイヤーの名前をfoo.pngのようにすることで画像がぼこぼこ生成される
• グループ化されたレイヤーにつけると、グループがまとまった状態で生成される
• 複数フォーマットほしいときはfoo.png, foo.svgのようにできて熱い
• 200% foo.png とすると二倍化された画像が出てきて熱い
  • 100x100 foo.pngなんかも動くらしいけど未検証