Photoshop｜画像アセット

Photoshop｜画像アセットで一括管理

Illustratorにもアセットの書き出し機能があり、WEB制作では非常に便利です。
Photoshop（以下PS）にも画像アセットという機能があります。PSでWEBデザインをされる方だとスライスよりも活用されている機能かも知れません。

私はOGPファイル（バナーなど）の作成に使用しています。便利なのは、一度、「画像アセット」を行う（画像アセットにチェックが入っている状態）と「（PSのファイル名）-assets」というフォルダを自動で生成してくれます。
今回の元ファイルは「ogp.psd」ですが、このファイルを別の場所へ複製しても、新たにその場所へ「（PSのファイル名）-assets」フォルダを生成します。

「ogp-assets」フォルダには、それぞれ数字の書かれたファイルがあります。JPEGファイル3点、PNGファイル1点。この数字は画像サイズを表しています。
このファイルは「ogp.psd」で作成されたデータです。

ogp.psdデータの中

アートボードで区分された大きさの違う4つのオブジェクトがあります。レイヤーを見るとアートボード名に画像サイズ（アートボードサイズ）と拡張子が書かれています。
この拡張子が重要な役割を担っています。
先ほどの ogp-assets フォルダ内にあるファイル名とまったく同じことに気づいたでしょうか。

今回はアートボードで4つに区分していますが、一つのアートボードにレイヤーで区分されたオブジェクトがある状態でも同じです。それぞれのレイヤーをどういったファイル名で、画像形式は何で出力するかをアートボード名やレイヤー名にします。

簡単な手順を見てみましょう。
画像を開き、保存します。この状態では、psdファイルがあるだけです。

PSに戻り、レイヤー名を変更します。ファイルを閉じていれば、再度、開いてください。

レイヤー名＋拡張子が入力できたら、メニューから「画像アセット」を選びます。

psdファイルを保存した場所を確認してください。psdファイル名-assets フォルダができていることが確認できます。
画像アセットを選ぶと自動でフォルダを生成してくれます。

その assets フォルダ内には、先ほど、レイヤーに付けた名＋拡張子のファイルが生成されています。このファイルはJPEGファイルとして出力されたデータです。

psd ファイルと assets フォルダの関係性が形成されたら、この2つのファイル、フォルダは密接に関係し、例えば、psd ファイルを開き、先ほどのレイヤーの画像を変更するだけで、即座に assets フォルダ内のファイルが更新されます。