【Photoshop】グループ(フォルダ)レイヤーごと書き出す方法(画像アセット)
Photoshopでグループレイヤーごとに「ファイル名+拡張子」の名前で画像を書き出す方法をご紹介。
Index
この記事を読んでる人におすすめの書籍
書き出したいグループレイヤー(フォルダ)にファイル名+拡張子で命名
書き出したいグループレイヤー(個別レイヤーも可)の名前の後ろに書き出したい拡張子を付ける。（○○.jpgや○○.png）という感じ。
画像アセットを生成(=書き出し)
レイヤー名を書き換えた後、メニューバーからファイル > 生成 > 画像アセットに移動してチェックを入れます。
画像アセットにチェックを入れたら、あとはpsdファイルを保存すると自動的にファイル名に拡張子をつけたレイヤーが書き出されます。
書き出し画像の保存先はpsdファイルと同じディレクトリに「グループレイヤー名-assets」の名前で書き出し用のフォルダが作成されます。
グループレイヤー内で個別に拡張子をつけると、グループレイヤーの画像と個別の画像とそれぞれを書き出すことも可能です。
書き出し結果。こんな感じ。
ちなみに、画像アセットは毎回チェックを入れる必要はなくて、一度チェックを入れると、そのpsdファイルは内容を変更・保存するたびに最新の画像が上書きされて書き出されます。
チェックを入れたままDropboxやOneDrive上で作業している場合、保存する度に同期するので最後にチェックを入れた方が良いです。
対応する画像形式
- JPG
- GIF
- PNG
- SVG（CC2014以降）
画像アセットの便利な設定
画像のサイズを指定する
画像サイズの数値をレイヤー名の先頭に追加します。
書き出し例
| レイヤー名 | 説明 |
|---|---|
| 100 x 60 logo.png | 横100px、縦60pxのPNG画像として書き出し |
| 200% logo.png | PSD上で配置されているサイズの2倍のPNG画像として書き出し |
| 100px x 60mm logo.png | 横100px、縦60mmのPNG画像として書き出し※異なる単位とピクセル数を混合可能 |
対応サイズ単位
- px（省略化）
- % パーセント
- in インチ
- cm センチメートル
- mm ミリメートル
※画像サイズとレイヤー名の間には必ずスペースを追加する。「x」はアルファベットの小文字のエックス。
画像の画質を指定する
必要な出力画質をレイヤー名の末尾に追加します。
JPG画像は初期設定では90 ％の画質で生成され、PNG画像は初期設定で 32 ビット画像として生成されます。GIF画像は基本的なアルファ透明度で生成されます。
JPG画像の書き出し例
| レイヤー名 | 説明 |
|---|---|
| logo.png100% | 画質100%のJPG画像として書き出し |
| photo.jpg65% | 画質65%のJPG画像として書き出し |
| photo.jpg33% | 画質33%のJPG画像として書き出し |
PNG画像の書き出し例
| レイヤー名 | 説明 |
|---|---|
| logo.png8 | 8bitのPNG画像 |
| logo.png24 | 24bitのPNG画像 |
| logo.png32 | 32bitのPNG画像 |
画像サイズは「レイヤー名の前」、画質は「レイヤー名の後」に設定と覚えよう。
１つのレイヤーに対して複数の設定で書き出す
1つのレイヤーに対して複数の設定で書き出したいときには「,（カンマ）」で区切ります。
画像の書き出し例
| レイヤー名 | 説明 |
|---|---|
| logo.png, 200% logo_2x.png | PSD上で配置されているサイズのPNG画像と、その２倍のサイズのPNG画像としてそれぞれ書き出し |
| logo.jpg10%, logo_80.jpg80% | 画質10%と80%のJPG画像としてそれぞれ書き出し |
| 100 x 100 logo.jpg50, 150% logo.png24 | 画像サイズ100x100px、画質50%のJPG画像と、画像サイズがPSD上のサイズの1.5倍、画質が24bitのPNG画像としてそれぞれ書き出し |
書き出すディレクトリ(フォルダ名)を指定する
画像を保存するディレクトリ名を変更したい場合はファイル名の前に「○○○○/」とディレクトリ階層とそのフォルダ名を指定します。
最上位の書き出しフォルダの「レイヤー名+assetss」は変更が出来ませんが、その中に指定したディレクトリが作成され、書き出されます。
| レイヤー名 | 説明 |
|---|---|
| [subfolder]/logo.png | logo-assets/subfolder/ディレクトリにlogo.png画像を書き出し |
まとめ
5〜6年前に「Slicy」というPhotoshopから画像を書き出すアプリがあって重宝してた。
その機能が更に便利になって、Photoshopで使えるようになった感じでしょうか。
ちなみにこの方法は「レイヤー書き出し」ではなく、「画像アセットの生成」と言うらしい。
「photoshop レイヤー 書き出し」などの検索キーワードで見つからなかったので、参考になれば嬉しいです。
簡単に書き出せるのでおすすめです。
この記事を読んだ人におすすめの書籍
