Photoshopの画像アセットで高速Web書き出し！

こんにちは！Webサイトの制作で Photoshop のスライスが一番大変なhoshidaです！

特にコーディングとスライスを交互に行うときなど、わずかしかない脳内メモリーがいっぱいになってしまい頭の中からカリカリ音がします。しかし Maromaro は Web 制作がメインの業務ですし、スライスから逃れることなどできるはずはない…

そんな最中、Photoshop CC から「画像アセット」というWeb用画像を書き出す機能が追加されました。この機能が従来の書き出し機能であるスライスよりもかなり時間を短縮できるので今回ご紹介します。

Photoshop 画像アセットの使い方

こちらのデータの画像アセットを生成してみます。

レイヤーはこんな感じ。

設定

上部メニューの「ファイル ＞ 生成 ＞ 画像アセット」にチェックを入れます。

書き出したい要素のレイヤー名を変更

レイヤー名は「書き出し後ファイル名.拡張子」です。
つまりそのままの名前を付ければOK。

ファイルを保存する

保存すると Photoshop データと同じ階層にフォルダが生成され、

その中に名前を付けたレイヤーの画像が書き出されています。

これだけ！

PNG や GIF はきちんと透過されています。

レイヤーを結合して書き出し

複数のレイヤーをグループ化し、グループに拡張子付きの名称を付ければ、レイヤーが結合されて生成されます。

レイヤー名の記述によって、ビット数や圧縮率も指定

以下のように指定することで、PNG のビット数や JPEG などの圧縮率の調整にも対応しています。サイズの指定や複数画像の書き出しも可能です。

「myimage.png」 → 32bit PNG
「myimage.png24」 → 24bit PNG
「myimage.png8」 → 8bit PNG
「myimage.jpg8」 → 80% 圧縮 JPEG
「300px x 200px myimage.png」 → 300px×200px の png
「myimage01.png, myimage02.jpg」 → 二つの画像

書き出し画像の修正

画像を修正したい場合は、再度保存すれば、生成される画像も書き出し直されます。

画像アセットのメリット

・書き出し作業が楽で正確
・書き出し画像の命名も楽
・保存するだけで書き出しできるので、後からの修正が楽

画像アセットのデメリット

・リピートする背景画像などの書き出しには不向き
・書き出し範囲が内容にフィットするので、余白込みで書き出せない
・形式を GIF や 8bit PNG にした場合、レイヤー内の余白は透過になる
・形式を JPEG や 24bit PNG にした場合、レイヤー内の余白は白色になる

画像アセットのポリシーと使いどころ

画像アセット機能がリピート画像や余白込みの画像書き出しに適さないのは「その辺はcssでやってくれ～」という意図を感じます。逆にこの機能でできること、できないことから、よりスマートなコーディングとは何かが浮き彫りに見えて来る気もします。

画像の役割はあくまで情報としての画像（写真やロゴマーク）であり、装飾（背景や枠線、余白）はCSSで行おうよ、ということなのでしょう。つまりはW3Cの方針に即した書き出し機能ということですね。そして、きっとこのようなマークアップの方針に合わせ、デザインデータの作成方法や、デザインそのものも変化させていく必要があるのでしょう。

実質的な話に戻ると、レガシーブラウザへの配慮の必要がなく、html5、CSS3の機能をいかんなく発揮できるような案件とはより相性が良さそうです。ただ、実際はすべての装飾をCSSで行える案件というのなかなかないので、状況によってスライスと併用しながら適度に使用していくのが良いでしょう。

なお、細かい仕様や規則などは以下 Adobe の Help ページからご確認ください。
https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

それでは皆さん、画像アセットでどうか安らかなるWebクリエイターライフをお過ごしください！