今回は、Webデザインを始めたいというPhotoshop初心者向けに、「レイヤー」とは何なのか解説してまいります。

Photoshopの初心者の方は、デザインを作る前に、「レイヤー」という概念・構造を理解しておく必要があります。

レイヤーとは

「レイヤー(Layer)」は、日本語だと「層」「重ね」といった意味があります。

Photoshopには「レイヤー」という概念、機能があり、Webデザインをする場合は、理解しておく必要があります。

Photoshopの「レイヤー」は、透明なフィルムをイメージしてもらうとわかりやすいです。
複数の画像を層(透明なフィルム)に分けて、重ね合わせ、一枚の画像・デザインとして出来上がります。
複数のレイヤー(層)にわけて管理することで、それぞれのレイヤーを効率よく画像処理することができます。

言葉だと分かりづらいので、下の画像をご覧ください。

Photoshopのレイヤー
Photoshopのレイヤー

上から
1. ピンクの円のフィルム
2. 緑の三角のフィルム
3. 青の四角のフィルム
4. 背景

このように1枚1枚のフィルム、つまりレイヤーを重ねて、1枚の画像として作ることができます。

それぞれのレイヤーを編集できる

各レイヤーは、個別に移動したり、編集することができます

個別に処理できるので、他のレイヤーに影響を与えることがないという最大のメリットがあります。

「やっぱり緑の三角形の画像いらないな」というときは、
三角のフィルムだけ選択して、削除することができるので、ほかのレイヤーに影響を与えることはありません。

Photoshopのレイヤー それぞれのレイヤーに対して作業ができる

選択しているレイヤーを意識する

Photoshopを始めたときにやりがちなミスは、編集したいレイヤーを間違って選択してしまうことです。

「やっぱり緑の三角形の色を変えたい」というときに、
「ピンクの円形」レイヤーを間違って選択したまま、作業してしまうということがよく起こります。

Photoshopのレイヤー 選択しているレイヤーを意識する

Webデザインを作る場合は、レイヤーの数がどんどん増えていくので、
あるレイヤーに対して何らかの作業をするときには、
今どのレイヤーを選択しているのか
と確認することを絶対に忘れないようにしましょう。

もし間違ったレイヤーを選択したまま作業してしまった場合は、ヒストリーパネルなどで元に戻せば問題ないです。
作業のやり直し方法は下記の記事でご紹介しているので、わからない方はご覧ください。

重なり順序を意識する

重なっているレイヤーの順序を意識することも大切です。

例えば「写真の上にテキストを置きたい」ときに、
レイヤーの順序が「写真」レイヤーが上で、「文字」レイヤーが下になっていると、
文字が画像の下に隠れてしまいます。

Photoshopのレイヤー 重なっているレイヤーの順序を意識する

上の図のように、本来であれば「ピンクの円形」レイヤーを一番上にしたかったのに、「水色の四角形」レイヤーを一番上に置いてしまったせいで、
「ピンクの円形」や「緑の三角形」がすべて「水色の四角形」レイヤーの下となり、隠れてしまっている状態になっています。

「文字を入力したのにない!」
「画像が消えちゃった!」
というときは順序を間違えている可能性があるので、まずレイヤーの順序を確認してください。
順序を間違えていれば、レイヤーの順序は入れ替えることができるので、常にレイヤーが重なっている順序を確認しておきましょう。

透明のレイヤー

レイヤーの透明部分は、「白とグレーの市松模様」で表されます。

透明のレイヤー

Photoshopのカンバス上で、レイヤーの透明部分の模様が見えていても、画像として保存すると「透明」や「白」になります。
画像形式によって、「透明」になるか、「白」になるか決まります。

まとめ

この記事のまとめ

  • 「レイヤー」は、透明なフィルムのようなもの。
  • レイヤーを重ね合わせて一枚の画像・デザインとして出来上がる。
  • 各レイヤーは、個別に移動したり、編集することができる。
  • 「今どのレイヤーを選択しているのか」と常に確認しながら、作業を行う。
  • 重なっているレイヤーの順序を常に意識する。
  • レイヤーの透明部分は、「白とグレーの市松模様」で表される。