Photoshop 画像アセット生成の使い方を説明します。
Photoshop 画像アセット生成
画像アセット生成とは、レイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成できる機能です。元のPSDを修正し保存すると、自動で画像アセットも更新されます。
書き出し形式
- .jpg
- .png
- .svg
- .gif
Photoshop 画像アセットの基本な使い方
例)
- グループ「arisan」(目、線画、色を格納)
- 背景「BG」
- グループ名/レイヤー名の末尾に書き出したい拡張子(.png / .jpg / .gif / svg)をつける
- メニューから「ファイル→生成→画像アセット」を選択
- PSDファイルと同じ階層に「PSDファイル名-assets」フォルダが作られ、その中にアセット生成される
Photoshop 画像アセット生成のオプション
Photoshop 画像アセット生成のオプションにはサイズ、画質指定などのオプションがあります。ルール通りに名前をつけるとオプションが機能します。
書き出しサイズ指定
レイヤー/グループ名の先頭にサイズを記入します。
- 100%photo.jpg: 100%
- 50%photo.jpg: 画0%
- 10%photo.jpg: 画質10%
JPGの画質指定
- photo.jpg100%: 画質100%
- photo.jpg50%: 画質50%
- photo.jpg10%: 画質10%
PNGの画質指定
- photo.png8: 8bit
- photo.png24: 24bit
- photo.png32: 32bit
1つレイヤー/グループから複数書き出し
1つのレイヤーから複数書き出したいときには「,(カンマ)」で区切ります。
- logo.png8, 200% logo@2x.png8
- photo.jpg10, photo.png24
出力先フォルダの変更
- デフォルト(psd名-assets):hogehoge.ong
- psd名-assets/img/:img/hogehoge.jpg