BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. デザイン
  5. Photoshopレイヤーマスク・ベクトルマスクの使い方【Photoshopのマスクまとめ後編】
by かわさき かわさき

Photoshopレイヤーマスク・ベクトルマスクの使い方【Photoshopのマスクまとめ後編】

Photoshopレイヤーマスク・ベクトルマスクの使い方【Photoshopのマスクまとめ後編】

いやはや毎日暑いですね。かわさきです。

さて、今回は前回の予告どおりPhotoshopのマスク解説、後編「レイヤーマスク・ベクトルマスク」をお送りいたします。

前編「クリッピングマスク」の記事はこちら↓

※こちらの記事は「Photoshop CC」を使用して執筆・検証しております。バージョンによっては操作方法や名称に違いがある場合がございますのでご了承ください。

Photoshop 各マスクを比較

クリッピングマスク、レイヤーマスク、ベクトルマスクの特徴を表にまとめました。(※クリックorタップで拡大)クリッピングマスク、レイヤーマスク、ベクトルマスクの特徴

レイヤーマスク・ベクトルマスクとは

レイヤーマスク・ベクトルマスクは白と黒の濃淡でかけるマスクです。白い箇所が表示、黒い箇所が非表示になります。

クリッピングマスクは下からくり抜くようなイメージでしたが、レイヤーマスク・ベクトルマスクは上から被せるようなイメージです。黒いマスキングテープでマスキングするようなかんじですね。

レイヤーマスクとベクトルマスクの違いは、

  • レイヤーマスク・・・塗りや選択範囲でマスクを作成(ラスター画像)
  • ベクトルマスク・・・パスでマスクを作成(ベクター画像)

となります。

レイヤーマスクは塗りなので濃淡の表現(黒~グレー~白)が可能ですが、ベクターマスクはパスなので、黒100%か白100%のみになります。

レイヤーマスクとベクトルマスクの違い

その他、基本的な操作方法などは同じなので「レイヤーマスクのパス版がベクトルマスク」…といって差し支えないかと思います。

レイヤーマスク

レイヤーマスクのかけ方

1.選択範囲を指定してかける

マスクをかけたいオブジェクトを選択し、マスクしたい箇所を選択範囲ツールで選択します。

マスクしたい箇所を選択範囲ツールで選択

その状態でレイヤーパネルの下にあるマスクボタンをクリック。

レイヤーパネルの下にあるマスクボタンをクリック

選択範囲でマスクが作成されました。

マスク完成

2.先にマスクをかけて、マスクしたい範囲を後から追加する

マスクしたいレイヤーを選択して、マスクボタンをクリック。全画面が表示された状態のマスクがかかります。

マスクのサムネイルをクリックすると、マスクを編集できるようになります。

マスクのサムネイルをクリック

選択範囲ツール+デリートや、消しゴムツールで非表示にしたい箇所を消していきます。

非表示にしたい箇所を削除

作成済みのレイヤーマスクを再編集したいときも同様の手順でできます。

ちなみに、レイヤーマスクは初期状態ではリンクされており、オブジェクトとレイヤーは一緒に動く状態になっています。マスクをずらしたい場合は、オブジェクトとレイヤーのサムネイルの間にある鎖マークをクリックしてリンクを解除します。

鎖マークをクリックしてリンクを解除

3.クイックマスクを使用してかける

クイックマスクは、一時的に選択範囲に色をつけて表示させ、調整するための機能です。クイックマスクを使うと細かい箇所まで調整しやすくなります。

まずは自動選択ツールなどでざっくりと切り抜きたい箇所を選択。ツールパネルの下の方にあるクイックマスクモードで編集ボタンをクリックします。

クイックマスクモードで編集ボタン

すると、選択範囲外がうっすら赤い色で表示されます。

選択範囲外がうっすら赤い色で表示

クイックマスクモードになると、編集範囲をブラシツールや消しゴムツールで編集できるようになるので、表示したい部分を塗り足したり、非表示にしたい部分を消したりして調整します。

ちなみに、非表示エリア(赤い部分)が塗り(ブラシツールや選択範囲→塗りつぶしなど)で編集、表示エリアが削除(消しゴムツールや選択範囲→削除など)で編集となっています。

クイックマスクを編集

再度クイックマスクモードで編集ボタンをクリックするとクイックマスクモードが解除され、選択範囲表示に戻ります。

選択範囲表示に戻る

あとは、1の手順でレイヤーマスクをかければOKです。

4.「選択とマスク」機能を使用する

簡単に切り抜きレイヤーマスクができる機能です。3で説明した手順がひとまとまりになったというか…。自動選択の精度がかなりいいので、正直普通の切り抜きならクイックマスクでわざわざ自力でやる意味はないかもしれません。特に髪の毛等ふわふわしたものが含まれる写真をマスクするのに便利です。

選択とマスクツール

「選択とマスク」をここで説明すると長くなってしまうので、詳しくはAdobeのチュートリアルなどで紹介されている記事をご覧ください。

【番外】レイヤーマスクを解除する

レイヤーパネルでマスクを選択してDeleteキー、もしくはパネル下にあるゴミ箱にドラックアンドドロップするとマスクが解除されます。

マスクを削除

※クリッピングマスクは解除してもマスクもレイヤーとして残りますが、レイヤーマスクの場合は解除するとマスクは消えてしまうのでご注意を…。

レイヤーマスクのいいところ

パスで描画しづらい細かいマスクに対応

レイヤーマスクは主に写真の補正・合成やイラストの制作に使用されます。

突然の雑コラ

突然の雑コラ。

全項目でも記載しましたが、髪の毛や動物の毛足など、ふわふわしたものを切り抜くにはパスより塗りのほうが適しています。

ぼかしたマスクやグラデーションマスクも

選択範囲の縁をぼかしたり、グラデーションで塗ることでぼかしをかけたマスクやグラデーションマスクもできます。

ぼかしたマスク&グラデーションマスク

ぼかしをかけたマスクやグラデーションマスクは以前、別の記事で紹介されていたのでこちらをご覧ください。

写真の合成やレタッチを行う際も、縁をぼかすことでなじませたり…といった使い方ができます。

ふちをぼかしてなじませる

突然の雑コラその2。

グループにもかけられる

クリッピングマスクと違ってグループにもかけることができます。

レイヤーマスクはグループにもかけられる

やりかたはレイヤーにかけるときと一緒で、グループを選択してからレイヤーパネルのマスクボタンをクリックします。

レイヤーマスクの注意点

マスクがラスター画像なので、再編集や再利用がやりにくい

ラスター画像なので、拡大縮小を何度も繰り返したりすると、普通の画像と同じくぼけてしまいます。

縮小→再度拡大して縁がボケたマスク

※マスクの劣化を防ぐには、ある程度大きいサイズで作成し、一度スマートオブジェクト化しておくといいかもしれません。

また、かけているマスクのサイズを再編集するときに、塗りや選択範囲で再調整することになるので、やりにくい面があります。

ベクトルマスク

ベクトルマスクのかけ方

1.マスクしてから範囲を書く

ツールパネルからシェイプツール、またはペンツールを選択して、オプションバーで「パス」を選択します。

シェイプツールまたはペンツールを選択

マスクをかけたいオブジェクトを選択し、「Ctrl または commandキー」を押しながらレイヤーパネルの下にあるマスクボタンをクリック。

「Ctrl または commandキー」を押しながらレイヤーパネルの下にあるマスクボタンをクリック。

レイヤーにベクトルマスクが設定されます。あとはマスクを選択し、切り抜きたい形にパスを描けば完了です。

切り抜きたい形にパスをかけば完成

2.既存のシェイプレイヤーやパスでマスクをかける

正確には「既存のシェイプレイヤー・パスをコピーしてマスクをかける方法」です。

前面に配置している長方形レイヤーでかけてみます。(わかりやすいように全面においていますが、別に背面にあっても問題ありません。)

既存のシェイプレイヤーでマスクをかける

ツールパネルからパス選択ツールを選び、シェイプレイヤーを選択してコピーします。

パス選択ツールでコピー

あとは、マスクをかけたいレイヤーを選択してペーストしたら完了です。(※レイヤーパネルのマスクボタンをクリックする必要はありません。)

マスクをかけたいレイヤーを選択してペーストしたら完了

ベクトルマスクのいいところ

パスデータなので再編集に強い

パスデータ(ベクター画像)なので、拡大・縮小を繰り返してもマスクが劣化することはありません。また、パスは後から調整や複製がやりやすいのもメリットです。

写真の切り抜きも、境界がある程度はっきりしたものであれば、ベクトルマスクで切り抜いたほうが境界がはっきりして仕上がりがきれいです。

ちなみに縁をぼかしてなじませたい場合は属性パネルから調整可能です。

レイヤーパネルでシェイプレイヤーを選択し、属性パネルの「ぼかし」の値を調整します。

濃度なども調整できます。ちなみに書かなかったんですが、レイヤーマスクも属性パネルで調整可能です。

グループにもかけられる

これはレイヤーパネルと同様です。レイヤーパネルより再調整がやりやすい…というメリットがありますので、写真などをまとめてマスクしたりするのに使われます。

あとは、限定的ではありますが、レイヤーからWeb用の画像書き出しをオブジェクトと違う形で行いたい場合に使えたりします。

言葉だとわかりにくいのですが、例えばオブジェクトにわざと、透過した余白を付けて書き出したい場合…

余白を付けてWeb用に書き出す方法

こんな感じで、2パターンのグループを用意して書き出しプレビューしてみます。

A.余白分のサイズにした透過シェイプレーヤーを配置
B.余白分のサイズでベクトルマスクをグループに設定

その結果ですが、Aの場合は余白はできません。透明度や塗りが0%の画像は書き出し時に無視されます。

Aの場合は余白はできない

Bの場合は、このようにベクトルマスク分の余白ができます。

Bの場合余白ができる

ものすごーーく限定的な活用方法ではありますが、ランディングページやhtmlメルマガなど、大きい画像でがしがしっと書き出したいときに便利です。

ベクトルマスクの注意点

グラデーションマスクや複雑なぼかしはできない

パスでのマスクになるので、濃淡を表すことはできないためグラデーションマスクや複雑なぼかし(フィルタを用いたものなど)はできません。この辺はレイヤーマスクやクリッピングマスクとの使い分けていきましょう。

ページの先頭に戻る