Photoshop

レイヤーカンプ機能を使ってボタンのon/offを素早く切り替え

eye-catch_130402

こんにちは、小林です。
昨日はエイプリルフールで、いろんなサイトがジョーク・コンテンツを繰り広げていましたね!
個人的には映画ライジング・ドラゴンとジャッキー・コーガンの公式サイトで、ジャッキー・チェンとブラッド・ピットの主役が入れ替わる!?というのが面白かったです。 

下記公式サイト(ジョーク・コンテンツは終了している模様です)
ライジング・ドラゴン公式サイト 
ジャキー・コーガン公式サイト

今回は、Photoshopのレイヤーカンプ機能について試してみました。

photoshop上でボタンのon/offを切り替えする時、どのように処理していますか?
onとoffで別々のレイヤー(フォルダ)を作成して、onのレイヤー(フォルダ)には色をつけて区別する、という方法が多いのではないかと思います。

ひとつのボタンならまだしも、何個もボタンがあって、ひとつひとつレイヤーを表示/非表示で操作してボタンのon/offを切り替えするのは面倒だと感じた時、Photoshopのレイヤーカンプ機能を使えば1発で全部のボタンのon/offが切り替えられるので、簡単にご紹介したいと思います。

レイヤーカンプとは?

Adobeの公式サイトでは下記のように説明されていました。

レイヤーカンプについて

デザイナーは、クライアントに見せるためによく複数のデザイン案(カンプ)を作成します。レイヤーカンプを使用すると、1 つの Photoshop ファイルで、複数のレイアウトバリエーションを作成、管理および表示することができます。

レイヤーカンプとは、レイヤーパネルの各レイヤーの状態を記録したスナップショットのことです。レイヤーカンプには、次の 3 種類のオプションが記録されます。

レイヤーパネル内のレイヤーの表示と非表示

ドキュメント内のレイヤーの位置

レイヤースタイルや描画モードの適用によるレイヤーの外観

注意: レイヤー効果とは異なり、スマートフィルターの設定はレイヤーカンプごとに変更することはできません。スマートフィルターをレイヤーに適用すると、画像のすべてのレイヤーカンプに表示されます。

読んだだけではなかなか理解しにくいと思うので、実際に試してみます。

実際にやってみた

下記のようなデザインがあるとします。↓

この状態で[ウィンドウ]→[レイヤーカンプ]でレイヤーカンプのパネルを表示して、右下にあるアイコンをクリックして新規レイヤーカンプを作成します。↓

下記のようなダイアログで出てくるので、適当な名前でレイヤーカンプ名を付けます。
レイヤーに適用で 3つのチェックボックスがありますがここは全部チェックつけておくのが良いと思います。↓

作成できると下記のようにレイヤーカンプが作成されます。↓

次に、ホバー時のレイヤーを作成して、それらを全て表示させた状態にします。↓

そしてこの状態で先ほどと同じように新規レイヤーカンプを作成します。↓

これで基本OKです!
あとはレイヤーカンプの切り替えをするだけです。(下記gifアニメ)↓

レイヤーカンプをうまく活用すれば、他のパターンのデザインもひとつのPSD上で作成できます。
(下記はページ1のon/off、ページ2のon/offの計4パターンを切り替えしています)↓

使い方のポイントとしては、スナップショットを撮るわけですので見せたい状態にしてから新規レイヤーカンプを作成するというところではないでしょうか。

という私もまだ全然使いこなせていないのですが、慣れればかなり便利な機能だと思いました。
より詳しい説明は下記をご参照頂けたらと思います。

http://help.adobe.com/ja_JP/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7870a.html
http://www.adobe.com/jp/designcenter/photoshop/articles/phs8lyrcomp.html