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
