スマートフォンアプリ開発、webシステム開発の株式会社INDETAIL

WEBデザイナー必見!? Photoshop便利機能「レイヤーカンプ」

2016.12.14
marusa
Category -

photoshop

WEBデザインの際にヘッダー・フッターやグローバルナビなど、共通のデザインになるパーツはまとめて管理したほうが効率的ですね。
今回は共通パーツの管理に非常に便利なPhotoshopの機能「レイヤーカンプ」をご紹介したいと思います。

レイヤーカンプとは?

レイヤーカンプを使用すると、1 つの Photoshop ファイルで、複数のレイアウトバリエーションを作成、管理および表示することができます。

引用元:アドビサポート

Photoshopファイルの、ある状態をいくつも記録しておいてくれて、ボタン一つでその状態に切り替えることができる機能で、配置先のPhotoshopファイルからも状態を切り替えることが可能です。
レイヤーカンプでは

  • レイヤーパネル内のレイヤーの表示と非表示
  • ドキュメント内のレイヤーの位置
  • レイヤースタイルや描画モードの適用によるレイヤーの外観

上記3種類のオプションが記録できます。

どんなシーンで活躍する?

共通パーツとはいえ、グローバルナビをアクティブにしたい、特定の要素を非表示にしたい、色を変えたい、などページによって多少の違いを持たせたい場合がありますね。
そんな時こそ「レイヤーカンプ」の出番です。

今回は

  • PAGE-A.psd、PAGE-B.psd、PAGE-C.psdを作成
  • 共通パーツを外部ファイル(header.psb)で管理
  • 各ページで対応するグローバルナビをアクティブな状態にする

という状況を想定して、レイヤーカンプ機能の使い方を説明していきます。
Photoshopファイルの構成は以下の通りです。

20161213-01

レイヤーカンプの作成

1)共通パーツ「header.psb」を開き、非アクティブ状態/アクティブ状態を作成しておきます。文字色やシェイプの塗りを変更する場合はレイヤースタイルで変更するようにしてください。

20161213-02-1

2)ウィンドウ/レイヤーカンプを選択して、レイヤーカンプパネルを表示します。

20161213-02-2

3)レイヤーカンプパネル下部の「新規レイヤーカンプを作成」ボタンをクリックします。ダイアログボックスが表示されますので、カンプの名前を指定しましょう。まずは「PAGE-A」をアクティブな状態にするカンプを作成するので、「PAGE-A アクティブ」とします。

20161213-02-3

4)「PAGE-A」だけがアクティブな状態になるよう調整します。

20161213-02-4

5)レイヤーカンプパネルで更新したいレイヤーカンプを選択して「レイヤーカンプを更新」ボタンをクリックします。

20161213-02-5

以上で「PAGE-A」がアクティブな状態を記録できました。「PAGE-B」「PAGE-C」についても同様に記録してファイルを保存します。

レイヤーカンプの適用

1)PAGE-A.psdを開き、ウィンドウ/属性で属性パネルを表示し、header.psbを配置しているレイヤーを選択します。

20161213-03-1

2)この状態で属性パネルを確認すると、「レイヤーカンプを使用しない」となっているプルダウンがありますので、これを先ほど記録した「PAGE-A アクティブ」に変更します。

20161213-03

するとどうでしょうか。グローバルナビの「PAGE-A」だけがアクティブな状態に変わりましたね!

他のページも同様にレイヤーカンプを変更すればOKです。

最後に

今回は共通パーツの状態の管理にレイヤーカンプ機能を使用しましたが、使い方次第でいろんな作業を効率化できる機能だと思います。
使ったことがなかった方はぜひ試してみてください。

marusa

WEBデザイン、フロントエンド担当。Illustrator・Photoshop・Sketchネタ、HTML・CSS・Javascriptネタ、Wordpressネタなど。

コメントを残す