今回は、
「Photoshopのレイヤーは理解したので、レイヤーパネルの使い方をマスターしたい」
「レイヤーの操作を思い出したい」
という方向けに、レイヤーパネルの整理について解説してまいります。

これからWebデザインを始めたい方は、特に読んでいただきたい記事です。

PhotoshopでWebデザインをする場合はレイヤーの数がどんどん増えて、レイヤーパネルがごちゃごちゃになってしまいがちなので、
本記事を読んで普段から整理するクセをつけてほしいと思っています。

今回は、具体的にレイヤーの名前をつける、重なり順の入れ替え、グループ化、結合、ロック切り替えの方法を基礎から説明します。

覚えておくと便利なショートカットもご紹介するので、効率よく作業するために、レイヤーパネルを整理するクセをつけましょう。

「レイヤーってなに?」
「レイヤーパネルに触れたことがない」

という方は、下記の記事を読んでから、本記事を読んでいただくことをオススメします。

レイヤーに名前をつける

長方形ツールで描画した長方形は、自動的に「長方形 1」という名前がつきます。
ほかのツールで描画するときも同様に自動的に名前がつきます。

「長方形 1」「長方形 2」「長方形 3」…と、どんどんレイヤーが増えていけば、
どれがどのレイヤーなのか、自分でもわからなくなってしまいます。

それぞれのレイヤーは名前を変更することができるので、
わかりやすい名前をつけましょう。

名前を変更するときは、レイヤー名の上でダブルクリックします。
レイヤー名をダブルクリックすると、名前が変更できる状態になるので、任意の名前を入力します。

レイヤーパネルの整理 レイヤー名の変更

Webデザインをする場合は、それぞれのレイヤーにわかりやすい名前をつけておくと、
あとでレイヤーを編集するときに困らずにすみます。

レイヤーの重なり順を入れ替える

レイヤーの重なり順序を入れ替える場合は、
レイヤーパネル上で、レイヤーをドラッグして動かすだけで入れ替えることができます。

レイヤーパネルの整理 レイヤーの重なり順の入れ替え

まとめて動かす場合は複数のレイヤーを選択して、ドラッグするだけで動かすことができます。

複数のレイヤーを選択する方法

Windowsは、Ctrlキーを押しながらクリックする。

Macの場合は、⌘(command)キーを押しながらクリックする。

レイヤーの複数選択の方法は、下記の記事で詳しく説明してるので、ご参考にしていただければと思います。

レイヤーをグループ化する

レイヤーの数が増えたときは、レイヤーのグループ化機能を使用して、整理するクセをつけましょう。
関連する複数のレイヤーをグループ化することで、いちいち個々のレイヤーを選択して作業するのではなく、
グループ単位で作業をすることが可能になり、作業効率がグッとあがります。

グループ化

まずは、グループ化したいレイヤーを選択してください。

レイヤーパネルの整理 レイヤーのグループ化

複数のレイヤーを選択する方法

Windowsは、Ctrlキーを押しながらクリックする。

Macの場合は、⌘(command)キーを押しながらクリックする。

グループ化したいレイヤーを選択できたら、
レイヤーパネル右上のメニューをクリックしてください。

レイヤーパネルの整理 レイヤーのグループ化

メニューが開くので、[レイヤーからの新規グループ]を選択してください。

レイヤーパネルの整理 レイヤーのグループ化

[レイヤーからの新規グループ]ダイアログボックスが表示されたら、
任意のグループ名を入力して「OK」ボタンを押してください。

レイヤーパネルの整理 レイヤーのグループ化

これでグループ化が完了しました。

レイヤーパネルの整理 レイヤーのグループ化

覚えようショートカット

レイヤーのグループ化のショートカットは、よく使うので覚えておきましょう。

グループ化したいレイヤーを選択してから、下記のショートカットを試してみてください。

Macの場合

⌘(command)+G

Windowsの場合

Ctrl+G

グループを解除する

グループを解除したいときは、解除したいグループをまず選択してください。
選択できたら右クリックして、[レイヤーのグループ解除]を選択すると、解除できます。

レイヤーパネルの整理 レイヤーのグループ解除

グループの中のレイヤーを表示

グループの中のレイヤーを表示させたいというときは、
グループアイコン(フォルダのようなアイコン)の左横にある矢印アイコンをクリックします。

レイヤーパネルの整理 レイヤーのグループの中身を表示切り替え

三角のアイコンをクリックすることで、グループ内のレイヤーを表示・非表示することができます。

レイヤーを既存グループに追加する

すでにあるグループにレイヤーを追加したいというときは、
追加したいレイヤーをドラッグし、グループ内に移動して追加することができます。

レイヤーパネルの整理 レイヤーを既存のグループに追加

グループを色分けしてわかりやすくする

グループ化をして整理することで、Webデザインを作るときも作業効率がグッとあがりますが、
さらにレイヤーパネルを視覚的にわかりやすくする機能があります。

レイヤー(もしくはグループ)の目のアイコン部分を右クリックします。
右クリックすると、それぞれレイヤーやグループに、色をつけることができます。

デフォルトでは、「カラーなし」に設定されているので、試しにレッドを選択してみましょう。

レイヤーパネルの整理 レイヤーのグループの色分け

選択したグループに赤色をつけることができました。

レイヤーがたくさん増えて、グループ化を行い、
さらにグループがたくさん増えた場合など色分けして、
視覚的にわかりやすく整理しておくと無駄な時間を使わずにすみます。

メモ

使い方の例

メインビジュアルを3パターン用意したときに、
「メインビジュアルA」「メインビジュアルB」「メインビジュアルC」
と名前をつけたとします。

それぞれのグループ(またはレイヤー)を色付けしておくと、
視覚的にわかりやすいので色付けの機能を覚えておきましょう。

複数のレイヤーを結合する

グループ化ではなく、レイヤーの結合する方法もご紹介したいと思います。

グループは複数のレイヤーをまとめたとしてもそれぞれのレイヤーは保持されますが、
結合はひとつのレイヤーとして結合されます。

文章だとわかりづらいので、実際にやってみましょう。

まずは、結合したい複数のレイヤーを選択してください。

レイヤーパネルの整理 複数レイヤーを結合する

複数のレイヤーを選択する方法

Windowsは、Ctrlキーを押しながらクリックする。

Macの場合は、⌘(command)キーを押しながらクリックする。

結合したいレイヤーを選択できたら、
選択したレイヤーのどれかを右クリックして、
[レイヤーを結合]を選択してください。
(※[表示レイヤーを結合]と[画像を統合]は、覚えなくて良いです。)

レイヤーパネルの整理 複数レイヤーを結合する
レイヤーパネルの整理 複数レイヤーを結合する

結合することができました。

結合することによって、レイヤーの数が減るのでわかりやすいですし、データも軽くなります。

ただし、「結合」は「グループ化」とは違い、一度結合すると元に戻したり、編集ができなくなってしまいます。
なので、基本的に「グループ化」したほうが、後々編集しやすいので、うまく使い分けましょう。

注意しよう

「結合」は「グループ化」とは違い、
一度結合すると元に戻したり、編集ができなくなる

基本的に「グループ化」したほうが、後々編集しやすいので、使い分ける。

レイヤーをロックする

レイヤーを編集や移動させないようにロックする機能がPhotoshopのレイヤーパネルには搭載されています。

プロのWebデザイナーでも、誤って別のレイヤーを操作してしまうことがあります。

例えばですが、よくあるのは背景写真などを誤って動かしてしまうことがあるので、動かさないようにロックしておきます。

実際にやってみましょう。

まずは、ロックしたいレイヤーやグループを選択します。

レイヤーパネル上部の「ロック:」という文言の横にアイコンがあります。
すべて選択したレイヤーやグループをロックする機能ですが、
それぞれ機能が違います。

一番使うのは、右側の鍵アイコンなので、覚えておきましょう。
「すべてをロック(鍵アイコン)」をクリックすると、編集や移動が一時的にできなくなります。

レイヤーパネルの整理 レイヤー・グループのロック

誤ったレイヤー操作をしないために、レイヤーが増えてきたらロックの機能もうまく使うことをオススメします。

まとめ

この記事のまとめ

  • 名前を変更するときは、レイヤー名の上でダブルクリックして、入力する。
  • レイヤーパネル上でレイヤーをドラッグして、順番を入れ替えることができる。
  • グループ化のショートカットは、Macは⌘(command)+G、WindowsはCtrl+G
  • 「結合」は「グループ化」とは違い、一度結合すると元に戻したり、編集ができなくなる。
  • 誤ってレイヤーを編集や移動させないように一時的にロックする。