- Coding Methodology
- 第90回 スライス不要の画像切り出し方法
第90回 スライス不要の画像切り出し方法
Photoshop で画像を書き出しする際、従来のやり方では、画像をスライスし「Web 用に保存」から書き出しを行っていたと思いますが、Photoshop CCになり、書き出し機能の種類が増えました。レイヤーから直接画像が書き出せるようになったり、自動で一括で簡単に書き出しができるようになったので、大幅に作業時間を短縮することができます。今回は、便利な機能「画像アセットの生成」を使った書き出し方法についてご紹介したいと思います。
手順①：画像の書き出し設定をする
画面① - 下のような4つの画像の書き出しを例に手順を説明します。
書き出すファイルの詳細設定は、レイヤーパネルでおこないます。（画面①- 右）
書き出したい画像のレイヤーまたはレイヤフォルダ名を以下のルールで書き換えます。今回はそれぞれの画像セットがレイヤフォルダにまとまっているので、レイヤフォルダ名を書き換えます。
基本的には、レイヤ/ レイヤフォルダ名がそのまま書き出し後のファイル名となります。
png形式
デフォルトはpng-32形式。「.png8」や「.png24」のように指定することで書き出し設定を変更することができます。
jpg形式
デフォルトは画質80%。「.jpg1」～「.jpg10」のように、10段階で画質設定をすることができます。
gif形式
デフォルトは透過gif。それ以外の設定はできません。
【画面 ① 】レイヤパネル
手順②：自動書き出し設定をする
「ファイル」＞「生成」＞「画像アセット」を選択し画像アセット機能をオンにすると、psdファイルと同じ階層に「psdのファイル名-assets」という名前のフォルダが自動生成され、その中に画像が書き出されます。（画面②）
以後、このpsd ファイルを保存するたびに、自動で画像が書き出されますので、画像編集のたびに書き出しするという作業を省略することができます。
他にも細かい設定ができますので、詳細はPhotoshopヘルプをご参照ください。
(https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html)
この機能をうまく活用するには、レイヤフォルダの構成のしかたがポイントになります。書き出しの効率化を図るためにも、パーツの整理という意味でも、レイヤフォルダの構成についてルールを考えてみるのはよいかもしれません。
【画面 ② 】書き出された画像
