Webデザインでは、デザイナーは複数の案やページを作りますよね。
例えばPhotoshopでヘッダーの微妙に異なるデザインを2パターン用意する時、どちらが効率の良い作り方だと思いますか？
- 2つのPSDファイルに別々のデザインを保存する
- 1つのPSDファイル内のレイヤーで切り替える
大抵ヘッダーなどの共通パーツは別ファイルに保存して読み込んで使いますよね。
2つのPSDファイルに別々のデザインを保存する方法だと、違うパターンが採用された時にリンク先またはリンク元を変更しなくてはいけませんね。
1つのPSDファイル内のレイヤーで切り替える方法だと、違うパターンにする時に変更したパーツの表示・非表示をポチポチと切り替えなくてはいけません。
正直、どっちもめんどくさい！こんなめんどくさい作業を頑張ってこなしている方、もっと良い方法がありますよ！
ここで説明するPhotoshopの「レイヤーカンプ」機能を使えば、作業効率もアップしますし、HTMLコーディングをするコーダーにも喜ばれます。
便利な機能を使いこなして、デザインを提出した時に「おっ！」と思わせることができるようなWebデザイナーになりましょう！
このページで紹介している内容
レイヤーカンプとは？
レイヤーカンプとは、簡単にいうとボタンひとつで複数のデザインパターンを簡単に切り替えできる機能です。
しかも何パターンも登録できて、書き換えも自由。
具体的にいうと、
- レイヤーの表示・非表示
- レイヤーの位置(ドキュメント内)
- レイヤースタイルや描画モードなどの外観
をそれぞれ選択して(複数選択可)記録できます。
切り替えパーツの階層が深いと悲惨
Webデザイナーはもちろん、画像の切り出しを行うコーダーも経験がある方は多いと思いますが、表示・非表示を切り替えるパーツの階層が深いとかなり面倒ですよね。
ボタンや画像のhover用を用意してあったりするとなおさらです。
これを探したり切り替えたりしている時間は制作する際にロスになるので、できるだけ簡潔に済ませたいもの。
それを実現するのがPhotoshopの「レイヤーカンプ」。
さっそく使い方を見ていきましょう！
レイヤーカンプの使い方
レイヤーカンプの使い方はとても簡単ですので、Webデザインを始めたばかりの方も覚えておきましょう。
今回使うのは、こちらの画像。メイン画像中央のボタンの色を通常時とhover時の2パターンで切り替えます。
通常ボタンを作成
まずは通常時のボタンを作成します。ここでは、[button]フォルダとしています。
hover時のボタンを作成
通常時のボタンを作り終わったら、hover時のボタンを作成します。
別レイヤーで作っても良いですが、今回は通常ボタンにレイヤースタイルを追加して色を変更しました。新しいレイヤーは使っていません。
レイヤーカンプを作成
それぞれのボタンが用意できたら、通常ボタンの表示にしておきます。(ここでは、hover用のスタイルを非表示にしておきましょう)
レイヤーカンプパネルから新規レイヤーカンプを作成し(レイヤーカンプパネルが表示されていない場合は、[ウィンドウ]→[レイヤーカンプ]で表示されます。)、新規作成アイコンをクリックして、レイヤーカンプ名を入力します。
ここでは、「button default」という名前をつけ、チェックボックスは全てチェックします。
通常ボタン用として使用する「button default」というレイヤーカンプができました。
切り替え用のレイヤーカンプを作成
次は、切り替え用にhover用のレイヤーカンプを作成します。
先ほどと同じように、新規作成アイコンから作成します。
こちらはhover用として使用するので、「button hover」というレイヤーカンプ名にしました。
名前は何でも良いですが、他の人がファイルを開いても「何のレイヤーなのか」「どこの場所のデザインか」がすぐわかるようなネーミングが好ましいです。
それぞれのレイヤーカンプに、表示したい「画面」を記録
レイヤーカンプが2つできたら、先ほど非表示にした「hover時用のスタイル」を表示します。
つづいて「button hover」レイヤーカンプを選択し、更新アイコンを押すと、「button hover」にhover時の表示状態が記録されます。
それでは、レイヤーカンプを切り替えてみましょう
それぞれの表示状態がレイヤーカンプに記録できたら、レイヤーカンプをポチポチ押して切り替えてみましょう。
このように、ボタンひとつで簡単に切り替わります！
複数のレイヤー表示を切り替えられる
今回は1つのボタンレイヤーの切り替えで説明しましたが、複数のレイヤーを表示・非表示した状態でレイヤーカンプに記録すればまとめて表示が切り替わります。
極端に言えば、レイヤーカンプで次のページ、次のページと全ページのWebデザインを切り替えることも可能です(重くなるので実際にはやらないでくださいね)。
これができればいちいち一つずつ表示・非表示を切り替えなくても、簡単に切り替えができるので、複数パターンの書き出しもラクになりますね！
ここまででレイヤーカンプの魅力は十分伝わったかと思いますが、レイヤーカンプにはさらに便利なところがあるのです～！
PSDでスマートリンクやスマートオブジェクトとして配置した場合
ヘッダーやフッターなどの固定要素は、共通デザインであることがほとんどなので、別ファイルにPSD化していますよね。
例えばページごとにヘッダーのリンクの状態を変えたりしたい時も、レイヤーカンプを使えば簡単に変更できます！
やり方は超簡単。レイヤーカンプのあるファイルを配置すると、[属性]パネルにレイヤーカンプの選択できるボックスが表示されます。
ここから目的のスタイルに切り替えるだけです！
ページごとに切り替える時も、たった1つの選択作業だけ。
これなら今まで手作業でやっていた方なら、作業効率がぐんと上がりますね。
まとめ
画像の切り替えや切り出し作業というのは本当に手間でしかないので、こういった機能はどんどん活用して作業効率をあげていきたいですね！
ちなみにレイヤーカンプを使うと、PhotoshopやDreamweaverで使用できる「Extract(エクストラクト)」でもレイヤーカンプ機能が使えるので、とても便利ですよ！