【Photoshop入門】Webデザインをはじめよう！第6回 完成したWebデザインから、画像やCSSコードを生成しよう
PhotoshopでWebデザインをはじめよう！
Webデザインが完成したら、実際のWebページで使用する画像を書き出します。本記事では、定番の「スライス機能」を使った書き出し方法のほか、Photoshop CC 14.1から搭載された「画像アセット機能」を使った自動書き出し方法を解説します。また、簡単なシェイプからCSS3コードを抽出する方法も取り上げます。
完成したWebデザインから、画像やCSSコードを生成する方法
第5回「写真をレタッチして、配置しよう」では、PhotoshopでWebデザインを完成させました。今回は、完成したWebデザインから、実際のWebページで使用する画像やCSSコードを生成する方法を解説します。
※Photoshopは最新版を使用してください（執筆時のバージョンはCC 14.2）。記事では、Mac OS Xを基本に解説しています。ショートカットは、「command（Ctrl）」のように、Windowsの場合を括弧内で表記しています。
非常に大まかに言うと、Webページは「テキスト」と「画像」で構成されており、HTMLでWebページの構造を決めて、CSSでその見た目を装飾します。
Photoshopで作成したWebデザインは1枚の画像ファイルなので、そのままでは実際のWebページには使えません。画像として利用する領域をバラバラに書き出して、Webページに利用します。Photoshop CCでは、次の2通りの方法で、画像を書き出すことができます。
また、ボタンの土台などの簡単な形であれば、画像を使わずに、CSS3のコードだけで表現できるようになりました。Photoshop CCでは、第2回や第4回で取り上げた「シェイプ」から、CSS3のコードを抽出することができます。
それでは、画像を書き出したり、CSS3コードを抽出したりしてみましょう。サンプルファイルのphotoshop-web-design-06-sample-before.psdを開いてください。これは、第5回で完成させたWebデザインのファイルです。
スライス機能を使った書き出し
スライスツールで切り分ける
スライスは、古くからPhotoshopに搭載されている機能で、オーソドックスな画像書き出し方法です。
［ツール］パネルで［スライスツール］を選択し、クリック＆ドラッグでスライスしたい範囲を選ぶと、スライスが作成されます。スライス部分は、左上角に水色のラベルが表示されます。
スライスを作成すると、スライスのサイズに応じて、周囲に「自動スライス」が自動的に生成されます。自動スライス部分は、左上角に灰色のラベルが表示されます。
スライスは［スライスツール］で作成する。作成したスライスには水色のラベル、自動スライスには灰色のラベルが表示される
スライスの範囲を変更する場合は、［ツール］パネルで［スライス選択ツール］に持ち替えて、編集します。［スライス選択ツール］でスライスを選択し、その状態でoption（alt）キーを押すと、カーソルアイコンにプラスマークがつきます。このままスライスをドラッグすると、同じ範囲のスライスが複製されます。
［スライスツール］でスライスした直後や、「［スライス選択ツール］が選択された状態でスライスをダブルクリックすると、［スライスオプション］ダイアログボックスが開き、スライスを書き出す際のファイル名や、スライスのサイズを設定できます。
［スライスオプション］ダイアログボックス
グローバルメニューをスライスしていきましょう。メニュー項目の幅をできるだけ等間隔にしたいので、1つのメニュー項目のスライス幅を「グローバルメニューの横幅（960px） ÷ メニューの数（6） ＝ メニュー項目の横幅（192px）」とします。
スライスを1つ作成し、［スライスオプション］ダイアログボックスで横幅を192pxとしてから、そのスライスを必要な分だけ複製します。
※画像の幅や高さの値には割り切れる数字、偶数、5の倍数を使ったり、同じ要素（見出しなど）では高さを揃えるなどの配慮を行っておくと、後のコーディング作業の効率アップに繋がります。
以上の要領で、画像として書き出したい箇所にスライスを作成していきます。次の図は、すべてのスライス作業が完了した状態です（ガイドは非表示にしてあります）。
スライス作業が完了したところ
– スライスに関する小技 –
覚えておくと便利なスライスの小技を紹介しておきましょう。
【レイヤーに応じたスライス】
シェイプなどのレイヤーを選択し、［レイヤー］メニュー→［レイヤーに基づく新規スライス］を選ぶと、シェイプレイヤーに沿ったスライスが作成されます。ボタンやバナーなどのスライスを作成する際に便利な機能です。
【ガイドに沿ったスライス】
［スライスツール］を選択し、ツールオプションバーで［ガイドに沿ったスライス］のボタンをクリックすると、ガイドに沿ったスライスが自動で作成されます。デザインの種類やスライスの量によってはこの機能を使うのも便利です。ただし、［スライスツール］で作ったスライスは削除されるので注意しましょう。
画像の書き出し
スライス作業が完了したら、［ファイル］メニュー→［Web用に保存］を選択します。［Web用に保存］ダイアログボックスが開き、画像が少し薄めに表示されます。
［Web用に保存］ダイアログボックス
右側で、画像形式など、書き出しの設定を行います。この書き出し設定はすべてのスライスに適用されますが、スライスごとに設定を変更したい場合は、この画面の中の［スライス選択ツール］を選択し、該当するスライスをクリックで選び、書き出しの設定を変更します。
スライスを選択した状態でダブルクリックすると、［スライスオプション］ダイアログボックスが開くので、ファイル名などを変更できます。
［スライスオプション］ダイアログボックス
設定し終わったら、［保存］をクリックします。［最適化ファイルを別名で保存］ダイアログボックスが開くので、［名前］はそのままで、［フォーマット］は「画像のみ」、［スライス］は「すべてのユーザー定義スライス」を選び、［保存］をクリックします。
［最適化ファイルを別名で保存］ダイアログボックス
すると、［場所］に指定したところにimagesフォルダ（初期設定時）が作成され、先ほど設定したファイル名とスライスに応じた画像が書き出されます。
書き出された画像
［スライスオプション］ダイアログボックスでファイル名を指定しないで書き出しを行うと、［最適化ファイルを別名で保存］ダイアログボックスの［名前］に応じて「clinic_top_第六回_01.png」などのファイル名が自動で付きます。
Webページ用の画像のファイル名には日本語は使えませんし、何の画像かすぐわかるように、リネームを行う必要があります。事前にファイル名を設定しておくことで、再編集、再書き出しが楽になります。ファイル名が決まっているものに対しては極力入力していきましょう。
［最適化ファイルを別名で保存］ダイアログボックスの［設定］で「その他」を選択すると、［出力設定］ダイアログボックスが開き、書き出しについて細かい設定ができます。
［出力設定］ダイアログボックス
［アセットを抽出］を使った画像の書き出し
次に、2014年10月に搭載された「アセットを抽出」を使った画像書き出しについて紹介します。任意の箇所を指定して画像を書き出すスライスツールとは異なり、この機能は、レイヤーとレイヤー名に準拠した書き出しが自動で行なえます。
2014以前のPhotoshopCCにも「アセットの生成」は搭載されていますが、「アセットを抽出」パネルが加わったことによって、レイヤーパネルで拡張子を指定する手間が短縮されるほか、.psdファイルからRetinaディスプレイ向けの2倍画像や、マルチデバイス用画像、更に.svgファイルなども直感的なインターフェースを使って書き出せます。
［アセットを抽出］ 機能は、書き出したい抽出したいレイヤーとレイヤーグループを選んで、 ［ファイル］メニュー→ ［アセットを抽出］を選ぶか、抽出したいレイヤーとレイヤーグループを右クリック（［control］＋クリック）で起動します。
ファイルメニューから選択
レイヤーを右クリックして選択
［アセットを抽出］で書きだそう
［アセットを抽出］を使うと、レイヤー名がそのままファイル名になります。web用として使うファイルは日本語の名前だと後々リネームが必要になるので、日本語のレイヤー・レイヤーグループ名は半角英数字の名前をつけて整理しておきます。
今回は画像として書き出す必要のないテキストなどのパーツは日本語表記のままで、画像として書き出したいレイヤー・レイヤースタイルを英数字にします。
フォルダ名の整理
書き出したいレイヤー・レイヤーグループを選択して、 ［アセットを抽出］パネルを起動すると、パネルの右側に抽出対象一覧が表示されます。今回は、すべてのレイヤーを選択してパネルを起動します。
［アセットを抽出］パネルを起動
表示されたレイヤー・レイヤーグループを一度クリックすると、書き出しファイルの拡張子を指定できるプルダウンが選べるようになります。デフォルトではpng32形式となっていますが、例えばjpgを指定すると100を基本として、画質の品質指定もできます。
プルダウン形式で選べる拡張子
jpgの品質指定も細かく数字で設定可能
また、「＋」マークをクリックすれば、一つのレイヤー・レイヤーグループから複数のフォーマットを指定できるので、例えばロゴデータなどで.pngと.svgの両方が必要な時でも、同時に書き出すことが可能となります。
同時に複数のファイルを書き出せる
書き出し不要なレイヤー・レイヤーグループはゴミ箱のアイコンをクリックして一覧から削除します。
書き出し不要なファイルは削除します
必要なファイルの設定ができたら、［抽出］ボタンを押すと、画像のフォルダ名とフォルダの格納先を訪ねるダイアログが出るので、必要に応じて任意の名前をつけます。
「ファイル名-asettes」がデフォルト
格納先を指定すると、レイヤー名の変更を確認するダイアログが出るので、［OK］をクリックすると、抽出が実行されます。
ファイルが書き出される
レイヤーを見てみると、抽出の対象になったレイヤー・グループ末尾の拡張子が確認できます。
拡張子が自動で付与される
［アセットを抽出］を使いこなす
［アセットを抽出］パネル右上のボタンで書き出しサイズを4種類から選択して追加できます。選択した倍率でのサイズでの画像が追加で抽出され、Retina対応やマルチデバイス対応の書き出し時間が短縮できます。
2xをクリックすると2倍の大きさが書き出せる
2xを選択した状態で書き出すと、末尾に@2xがついた2倍サイズの画像が同時に書き出せました。
別フォルダに2倍の画像が書き出された
※異なる大きさで書き出すためには、意図しない画像ボケを防止するために、非破壊編集の「スマートオブジェクト」や「シェイプ」を使用してオブジェクトを作成してください。
歯車のマークをクリックして設定パネルを開くと、解像度ごとにフォルダ名や接尾辞の変更が可能です。また、より多くの解像度の指定が可能です。
任意のフォルダ名を設定可能
［アセットを抽出］ を使うメリット
- スライスツールによるピクセルのズレが防げる
スライスがズレた例
- PSDファイルの変更・保存と同時にアセット画像も自動生成されるので、変更が楽に
自動生成を有効にするには［ファイル］メニュー→［生成］→［画像アセット］にチェックを入れるか、設定パネル内で画像アセットにチェックを入れておきます。
ファイルメニューから設定
［アセットを抽出］の［設定］パネル内からチェック
- 別レイヤーで作った非表示のロールオーバー用画像なども同時に書き出せるので便利
ロールオーバー用画像も書き出される
- 任意の倍数で書き出せるので、マルチデバイス対応・Retina対応が楽
- Creative Cloud Extractとの連携でコードの生成やチームとの連携作業もスピーディーに
Creative Cloud Fileとの連携
CSS3コードの抽出
最後に、CSS3コードの抽出について解説します。新規ファイルを開いて、角丸シェイプを作りましょう。レイヤーを右クリック→［CSSをコピー］を選択すると、そのシェイプを再現するCSS3コードがクリップボードにコピーされます。あとは、Dreamweaverなどのエディタを開いてペーストしてみましょう。
［CSSをコピー］を選択して、Dreamweaverなどのエディタにペーストする
このように、画像補正ソフトであるPhotoshopは、バージョンアップを重ねるごとに、Webデザインとの親和性がますます高くなってきています。ぜひ、Webデザインにトライしてみましょう。皆さんが思い描いた素敵なWebサイトができますように！
最後に、本連載で紹介してきた技術は基本的なものばかりです。一通りWebデザインができるようになったら、レスポンシブなカンプ作りや、Dreamweaverの使い方を読んで、一歩も二歩も進んだWebデザイン制作を目指しましょう！