Photoshopの画像アセットの生成用レイヤー名まとめ
画像アセット書き出し用レイヤー名をまとめました
Photoshopの画像アセット書き出しは非常に便利なのですが、レイヤー名の規則を忘れがちなのでまとめました。
画像アセットの生成をするには
メニューから、ファイル > 生成 > 画像アセット のチェックを入れるだけです。
【デフォルト】画像アセットの生成で対応しているファイル形式（png・jpg・gif・svg）の書き出し初期設定
| png | PNG-24（アルファチャンネル（透過）あり） |
|---|---|
| jpg | 画質90% |
| gif | 透過gif |
| svg |
画像アセット書き出し用レイヤー名の命名規則
レイヤー1 → XXX.png
のように、レイヤー名を書き出したいデータに合わせて変更するだけで、自動的に画像が書き出されます。
| png | XXX.png | アルファチャンネル（透過）ありPNG-24 |
|---|---|---|
| XXX.png8 | PNG-8 | |
| XXX.png24 | PNG-24（※透過なし） | |
| jpg | XXX.jpg(or .jpg9) | 画質90% |
| XXX.jpg1 | 画質10% | |
| XXX.jpg10 | 画質100% | |
| XXX.jpg30% | 画質30% | |
| XXX.jpg100% | 画質100% |
※GIFアセットでは画質パラメーターは使用不可
複数書き出し・サイズ変更
| 複数書き出し（,コンマで区切る） | XXX.png, XXX.jpg | XXX.pngとXXX.jpg |
|---|---|---|
| サイズ指定（単位：px） | 400×300 XXX.png | XXX.png（W400 x H300px） |
| サイズ指定（%） | 200% XXX.png | XXX.png（200％の大きさ） |
| 組み合わせ | 200% XXX@2x.png, XXX.png | XXX@2x.png（200％の大きさ）とXXX.png |
※サブフォルダーへの保存
（フォルダ名）/XXXX.jpg
例）images/logo.jpg
上記のようにすると、生成された画像アセットをドキュメントのアセットフォルダー直下のサブフォルダーに保存できます。
※ピクセル単位以外のサイズ指定
20in x 400mm logo.jpg
上記のように単位指定（相対値または px、in、cm、mm などのサポートされている形式のみ）することも可能です。（ただし、正しく指定しないと画像の比率が変わってしまうので注意）
複雑な書き出し設定とレイヤー名の設定
例）
200% sample.jpg, 50% sample.png24, 200x200 sample2.jpg70%, 300% sample.gif
上記のように設定すると以下の4つのファイルが書き出されます。
- sample.jpg（200 ％に拡大された 90 ％の画質のjpgファイル）
- sample.png（50％に縮小されたPNG-24のpngファイル）
- sample2.jpg（200x200px で 画質70％ のjpgファイル）
- sample.gif（300％に拡大されたgifファイル）
おすすめのPhotoshop技術書
Photoshop しっかり入門 増補改訂版 【CC完全対応】[Mac & Windows対応]
いちばんやさしい入門書
知識ゼロから、きちんと学べる入門書！
はじめてPhotoshopを触る人を対象とした、超入門書です。
Photoshopの各ツールの基本機能から、実務で使える鉄板の応用技まで、
この1冊でPhotoshopの基本は必ず習得できます!
最新バージョンに完全対応しており、また操作手順を省くことなく、全手順を解説しているので、
初心者でも操作に迷うことはありません！
これからはじめる人に読んでほしい、オススメの1冊です。
Mac & Windows 対応
基本の「き」から1つずつ、
Photoshopの使い方とデジタル画像の基礎知識を解説。
人気講師が教える「手を動かしながら学ぶ授業」です。
Photoshopレタッチ・加工 アイデア図鑑
この1冊でレタッチ・加工のあらゆるスキルが習得できる!
すぐに使えるレタッチの基本から、
目を奪われるようなプロレベルの作品まで、
使えるテクニックがそろっている!
ロゴ/人物/風景/ロゴ/コラージュ/3D/最新表現テクニック
Photoshopのレタッチ・加工に関わるあらゆるスキルを、この1冊で全て習得できる!
●あらゆるテクニックがそろってる!
・コラージュを使った楽しい作品が作れる!
・トレンドの画像加工が簡単にできる!
・ハイクオリティーな作品が作れる!
・肌を綺麗に見せる定番のレタッチ
・風景を魅力的に見せるテクニック
・魔法のような世界の作り方
・図鑑に出てくる立体図の作り方
・バラバラに拡散するエフェクトテクニック