画像の書き出し作業を圧縮する Photoshopデザインのポイント

HTML・CSS

Photoshopをメインツールとして使い始めて数年になりますが、ここ最近のバージョンアップで使用感が大きく変わってきたなぁと実感しています。

特にウェブデザインのためのツールとしては、よりマークアップへの連携がしやすい方へと進化していると思います。
なかでも、スライスを使わずに画像の書き出しができる画像アセット機能のすばらしさについては、言うまでもありません！

マークアップとの連携を意識してデザインデータを作ると、マークアップの作業はかなり圧縮されます。
画像アセット機能をはじめとするウェブデザインツールとしてのPhotoshopの機能強化で、特にその傾向は顕著になってきていると思います。
もちろん、デザイナーだけでなくマークアップ側でも、知っておくとより作業がラクになります。

そこで今回は、普段デザインもマークアップもしている私が、デザインデータを作る際に工夫していることをご紹介します。

［おさらい］画像アセット書き出しの利点

1. すべての書き出し要素に対していちいち書き出し領域を割り当てる必要がない

つまり、スライスという余計な作業が不要です＼(^o^)／
意図的に余白を含めたい場合には工夫が必要ですが、そうでない場合は、要素の最小サイズで書き出してくれるので、ドロップシャドウや光彩などどこまでが要素かぱっと見で判断しにくい場合にはかなりの時短になります。

2. 選択した要素以外は含めずに書き出してくれる

要素が重なっている場合でも表示・非表示を切り替える必要がありません＼(^o^)／
表示・非表示を繰り返しているうちに必要な要素まで忘れてた…なんてこともなし！

画像アセットでの書き出し単位

画像アセットの書き出しはレイヤーまたはレイヤーグループ単位でできます。
なので複数のレイヤーをあわせて書き出したいときは、書き出したいレイヤーをまとめてグループ化するか、もしくはスマートオブジェクト化します。
私はスマートオブジェクトにするメリットが明確にない場合は、なるべくグループ化にしておきます。
その理由については後で書きます。→スマートオブジェクト VS レイヤーグループ？

意図的に余白を含めたい場合

画像アセットの書き出しでは、要素にレイヤー（グループ）に含まれないものは書き出されません。
しかし、マークアップの都合で画像サイズを揃えたい場合など、意図的に余白を含めて書き出したいことがあります。
この場合は少し工夫が必要になります。

書き出したいサイズのシェイプを一番下の階層に敷く

この方法が一番手軽だと思います。
書き出したいサイズのシェイプをベースとして、書き出すレイヤーグループの最下層に置きます。
もし、書き出したいサイズをはみ出すようであれば、ベースにしたシェイプでクリッピングマスクにすればシェイプのサイズで書き出せます。

書き出したいサイズでレイヤーグループをマスクする

上の方法が使えるのは、jpgやpngでも非透過の場合です。
透過画像にしたいからといってベースのシェイプが非表示になっていたり、透明度を100%にしてしまうと、そのシェイプはないものとして扱われてしまいます。
余白を透過にしたまま指定のサイズで書き出したい場合は、レイヤーグループにシェイプマスクもしくはレイヤーマスクでマスクします。

シェイプマスクでもレイヤーマスクでも書き出した結果は同じですが、私はシェイプマスクを使うことが多いです。
その理由についても後で書きます。→シェイプマスク VS レイヤーマスク？

デザインワークで必要な作業をマークアップにも生かす

レイヤーはなるべく整理して、意味のある名前を英語でつけておく

画像アセットでの書き出しでは、レイヤー（グループ）名が書き出した画像のファイル名になります。
なので、レイヤーを整理するついでに書き出しを意識してレイヤー名をリネームしておくと、あとでわざわざ書き出し用にリネームする必要が減りますね。
すでにコーディングガイドラインやディレクトリマップなどが準備されている場合は、デザイン前にざっと目を通しておくといいと思います。

レイヤーの整理は苦手な人もいるようですが、きちんと整理しておくと書き出し時の手間が減りますし、修正が発生した場合にも修正箇所がはっきりしやすいです。
デザインデータはマークアップに渡すこともありますし、やむをえず途中から別のデザイナーに引き継ぐこともあります。
場合によってはクライアントに納品することもありますので、やはり最低限のレイヤーの整理はしておいたほうがいいと思います。

スマートオブジェクト VS レイヤーグループ？

最近では画像ではなくCSSで表現できることも増えたので、書き出す要素を選択する自由度はなるべく残しておくために、私はレイヤーグループでもいいところはレイヤーグループにしています。
たとえば一部要素は書き出し画像に含めないということになると、いったんスマートオブジェクトの編集画面を開いて作業しなければならず、かえって煩雑になってしまいます。

スマートオブジェクトでもレイヤーグループでも書き出し結果は同じなので、スマートオブジェクトにしたほうがメリットがある場合以外は、レイヤーグループをおすすめします。

ただし、スマートオブジェクトにすると変更がすべての要素に反映されます。
そのため、同じ要素が繰り返し何度も使用されている場合（たとえば、アイコンやシンボルマークなど）はスマートオブジェクトにしておいたほうが修正に強いデータといえます。
場合によってうまく使い分けましょう。

シェイプマスク VS レイヤーマスク？

意図した大きさで書き出すためにマスクをかける際、シェイプマスクでもレイヤーマスクでも結果は同じです。
ですが、私はほとんどの場合、シェイプマスクでマスクをかけています。

ウェブ用に使用する場合、書き出した画像の大きさや配置はピクセル単位で把握します。
（実際は%で指定する場合でも、数値を計算するためにデザインデータの段階ではピクセルでの情報が欲しい）
その作業に強いのがシェイプマスクなのですが、これにはCCから実装されたライブシェイプの登場が大きく影響しています。

ライブシェイプになっている場合、対象のシェイプを選択するだけで属性パネルからサイズ・位置や色などを確認したり変更できるので、今までのように選択してから変形モードにする必要がないのでとっても便利です。
ライブシェイプはシェイプレイヤーだけでなく、マスクに使うシェイプにも有効なので、たとえばマスクをかけた画像の書き出しサイズを変更したい場合でも、ライブシェイプでマスクしておくと変更が簡単です！