コーディングスピードが上がる画像書き出し方法 – Photoshop CCの「画像アセット」機能 –

2018.06.06

WEB

Webデザイン

Webサイト制作の際に必要となる画像書き出し作業。Webデザイナー・コーダーの方はどのような方法で書き出し作業を行っていますか？

1枚ずつ書き出しをしている、もしくはスライス機能のみで書き出しをしているという方に向けて、今回はPhotoshop CCから登場した「画像アセット」機能をご紹介します。
大量の画像の場合でも個別に設定ができ、一括で書き出すことによりスピードアップが見込めます。

この機能は、Photoshopでのデザイン作成時にデータの作り方を少し工夫するだけで、画像の書き出し時間を短縮することができますのでコーダーだけではなくデザインをメインで担当されているWebデザイナーもぜひご参考にしてください。

INDEX

PhotoshopCCの「画像アセット」機能について
「画像アセット」機能の使い方
ファイル形式・画質設定方法について
さいごに

PhotoshopCCの「画像アセット」機能について

レイヤー・レイヤーグループに拡張子付きの名前をつけると、その名前で個別に自動で画像を生成する機能です。
例えば、「レイヤー1」となっている画像のレイヤー名を「img.jpg」に変更すると、「img.jpg」という画像を勝手に生成してくれます。

これまで、スライスツールを使って画像ごとにスライスして、「Web用に保存」で書き出していた手間を考えるとかなり効率的です。
ただし、Photoshop CCから新しく追加された機能ですので過去のバージョンの方はご使用できませんのでご注意ください。

「画像アセット」機能の使い方

では、手順についてご紹介します。非常に簡単で、2回の手順で作業が完了します。

① 書き出したい画像のレイヤー・レイヤーグループに名前を付ける

書き出しをしたい画像のレイヤー・レイヤーグループに名前を付けます。
その際、必ず拡張子（png、gif、jpg、svg）をつけてください。拡張子をつけないと画像が書き出されません。
これで下準備が完成です。

②「画像アセット」を選択し画像ファイルを生成する

次に画像を生成します。
メニューバー「ファイル」＞「生成」＞「画像アセット」を選択します。

これで画像の生成が完了しました。

作業しているPSDデータがあるフォルダと同じ階層に「ファイル名- -assets」というフォルダが生成され、その中に①で設定した拡張子の形式で画像が書き出されます。生成される画像はレイヤー名に拡張子がついているものだけです。
PSDデータが変更されても、データを保存することによって書き出されたデータも更新されます。

ファイル形式・画質設定方法について

ファイル形式

ファイル形式はpng、gif、jpg、svgの4つに対応しており、特に設定をしない場合だと下記の画質レベルで画像が生成されます。

ファイル形式	画質初期設定
jpg	90 ％
png	32 bit
gif	透過GIF

画質の設定

初期設定の画質から設定を変更するには、レイヤー名に入力した拡張子の後ろに変更したい値を下記のように加えてください。

例）jpgの場合

レイヤー名の付け方	レイヤー名の例	書き出される画像
.jpg4 or .jpg40%	img.jpg4	画質40％
.jpg6 or .jpg60%	img.jpg6	画質60％
.jpg10 or .jpg100%	img.jpg10	画質100％

例）pngの場合

pngの場合は下記3種類となります。

レイヤー名の付け方	レイヤー名の例	書き出される画像
.png8	img.png8	PNG-8（透過あり、256色の表現）
.png24	img.png24	PNG-24（透過なし、1,670色の表現）
.png32	img.png32	PNG32（透過あり、1,670色の表現）

サイズの設定

サイズを書き出し時に変更するには、レイヤー名の前に変更したい値を下記のように加えてください。

例）元画像が100px × 100pxの場合

アセット名の前に数字と単位（%、px,in,cm,mmなど）と半角スペースを設定してください。
※pxは省略することができます。

レイヤー名の例	書き出される画像
200% img.jpg	200px × 200pxのjpg画像
100mm × 20mm img.png	100mm × 20mmのjpg画像
10in × 20in img.png	100in × 20inのjpg画像

この他にも複数のアセットを組み合わせた設定やRetinaディスプレイ対応の書き出し、余白の設定など細かく設定をすることができますので、詳細はAdobe Help Centerをご確認ください。

レイヤーからの画像アセットの生成（Adobe Help Center）

https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

さいごに

今回はPhotoshop CCの「画像アセット」機能について説明しました。
画像アセットはレスポンシブサイトの構築にも適した書き出し方法です。
デザイン作成時にレイヤー名に書き出し名と拡張子をつけてデザイン作業を進めれば、スライスの設定をする必要がなくなり、書き出しの時間が大幅に短縮できコーディングスピードも格段に上がると思います。
今までスライス機能に慣れていたベテランWebデザイナー・コーダーの方も是非一度試してみてください。