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 とすると二倍化された画像が出てきて熱い