Webサイト制作において、画像の書き出し作業ではスライスツールを使い1つずつ画像を切り出して書き出すというフローが必須でしたが、Photoshop CC以降から「画像アセット」機能が追加され、各レイヤーを個別の画像ファイルとして自動的に書き出す事が可能になりました。
今回は「画像アセット」を使った画像の書き出し方法をご紹介します。もくじ
◆画像アセット機能の手順
手順1.書き出したい画像のレイヤー・レイヤーグループ名に拡張子を付ける
初めに、書き出しをしたい画像のレイヤー・レイヤーグループ名に任意の「拡張子」を付けます。
例えばレイヤー名を「sample」にしてJPG形式で画像を書き出したい場合、レイヤー名を「sample.jpg」とします。
手順2.「画像アセット」を選択し画像ファイルを生成する
次にアプリケーションバーの上にあるメニューバーから、「ファイル」→「生成」→「画像アセット」を選択します。
これで画像の生成は完了となり、作業中のPSDデータがあるフォルダと同じ階層に「フォルダ名-assets」という新しいフォルダが自動的に生成されます。
その「フォルダ名-assets」の中に手順1で設定した拡張子の画像が書き出され、保存されます。
拡張子をつけていない画像は保存されないので注意してください。
また作業中のPSDデータが保存される度にここで書き出された画像は自動的に更新される為、再度画像アセット機能を使って書き出しを繰り返す必要はありません。
◆書き出しサイズの指定
画像アセット機能では、書き出したい画像の拡張子の前にサイズを記載する事が出来ます。
例えば、横240px、縦40pxのサイズのPNG画像を書き出したい場合には、「240 x 40 sample.png 」とします。
また、画像の書き出しの際には書き出す画像のデータサイズを最小限に抑えることが重要となりますが、JPG画像の書き出しの際には画質を0から100まで指定することができます。
例えば、画質100%のJPG画像を書き出したい場合には「sample.jpg10」とし、画質80%のJPG画像の場合には、「sample.jpg8」とします。
PNG画像も同様に、PNG-8、PNG-24、PNG-32の中から画質を指定することができます。
◆画像アセット機能のメリット
Photoshop CC以前では、スライス作業によって書き出したい領域を指定し、画像ファイルとして書き出していましたが、任意の画像を部分的に透過させたいときには、その都度レイヤーを表示・非表示させなくてはならず、書き出す画像が多い場合には手間が掛かり、その分ミスも起こりやすいです。
しかし画像アセット機能を使えば、レイヤー名の変更と書き出し処理だけで処理が済み、作業時間が短縮できる為ミスも起こりにくくなります。
また、大量の画像の書き出しも簡単に行うことが出来ます。
◆まとめ
画像アセット機能を使えば、今まで時間と手間が掛かっていたスライス作業をなくし、大幅に作業時間を短縮することができます。
また、コーディングのスピードアップにもつながります。
今までのスライス機能に慣れていたWebデザイナーやコーダーの方もぜひ積極的に画像アセット機能を活用してみてください。