デザイン

DESIGN

画像アセット書き出し用レイヤー名をまとめました

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冊で全て習得できる!

●あらゆるテクニックがそろってる!
・コラージュを使った楽しい作品が作れる!
・トレンドの画像加工が簡単にできる!
・ハイクオリティーな作品が作れる!
・肌を綺麗に見せる定番のレタッチ
・風景を魅力的に見せるテクニック
・魔法のような世界の作り方
・図鑑に出てくる立体図の作り方
・バラバラに拡散するエフェクトテクニック


ブログ記事一覧