Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Photoshopのassets-generatorを使うの捗る

More than 5 years have passed since last update.

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 とすると二倍化された画像が出てきて熱い
terrierscript
https://zenn.dev/terrierscript
https://terrier.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away