PhotoshopCCの画像アセットの生成機能の使い方

PhotoshopCCの画像アセットの生成を使えば、カンプを作成する最中にWebで必要な画像がどんどん書き出される便利な機能があります。これを使うとスライスの必要がほば無くなります。
今回の例はPhotoshopCC2017を使用しています。

画像アセットの生成方法

事前準備

画像アセットを使用するにはまず環境設定のプラグインから「Generatorを有効にする」にチェックを入れておく必要があります。

次にメニューの「ファイル」から「生成」を選択して「画像アセット」を選択してチェックをつけておきます。

これで準備OKです。
あとはWeb用として保存したい画像のレイヤーの名前を書き出すファイル名とします。

レイヤー名の付け方

「photo01.jpg 」などのように拡張子を付けたファイル名とします。
「photo01.jpg,200% Photo01@2x.jpg」のようにカンマ区切りで、通常サイズと２倍サイズのものを同時に書き出すことも可能です。また、クリッピングマスクを併用するとその結果の画像が書き出されます。

なお、jpgの場合はjpg100% jpg50%などのように拡張子の後に%単位で数字を指定すると画質を指定できます。

書き出された画像はPhotoshop形式で保存した「当該ファイル名-assets」というフォルダ内に保存されます。

ファイル名のレイヤー名を付けた画像は保存と同時に書き出しされます。そしてもし、そのレイヤーが不要となり削除したら画像も連動して削除されます。