BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. デザイン
  5. Photoshopクリッピングマスクの使い方【Photoshopのマスクまとめ前編】
by かわさき かわさき

Photoshopクリッピングマスクの使い方【Photoshopのマスクまとめ前編】

Photoshopクリッピングマスクの使い方【Photoshopのマスクまとめ前編】

どうもこんにちは、かわさきです。

今回は、Photoshopのマスク機能について、前後編2回に渡って使い方や特徴を解説いたします。少し今更感もあるのですが…個人的にPhotoshopのマスクに未だ苦手意識がありまして、その克服と復習を兼ねてまとめていきます。

前編は「クリッピングマスク」について、後編は「レイヤーマスク・ベクトルマスク」についてを予定しております。

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

Photoshop 各マスクを比較

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

Photoshop各マスクを比較

クリッピングマスクとは

クリッピングマスクとは、レイヤーの透明部分を利用したマスクです。透明部分が見えなくなり、レイヤー内でオブジェクトがある箇所のみが表示されるようになります。

クリッピングマスクの図

丁度クッキー型で抜いたような状態ですね。

クリッピングマスクのかけ方

マスクをかけるレイヤーを上に、マスクにするレイヤーを下に用意します。マスクにするレイヤーはシェイプ、塗り、写真、テキスト…等、オブジェクト+透明エリアで構成されているものなら何でもOKです。

マスクをかけるレイヤーとマスクレイヤー

レイヤーパネルの各レイヤーの境界部分でAltを押しながらクリック。(その際、下向き矢印のアイコンが表示されます。)

マスクレイヤーを背面に配置して、間を「Altキー」を押しながらクリック

以上で完了です。クリッピングマスクがかかると、レイヤーの左に下向き矢印が表示されます。

クリッピングマスクがかかると、レイヤーの左に下向き矢印が表示されます

解除する際は同様にレイヤーの間をAlt+クリックでOKです。

クリッピングマスクのいいところ

とにかく手軽

マスクするレイヤーを準備してAlt+クリックするだけなので、手軽にマスクすることができます。レイヤーマスク・ベクトルマスクで対応できない場合以外は、基本的にクリッピングマスクで事足ります。

どんなレイヤーでもマスクにすることができる

先に書いたように、パスや塗りで書いたオブジェクト等、どんなレイヤーでもマスクにすることができます。

こんな風にテキストでマスクしたり、

テキストでクリッピングマスク

ラスター画像(ビットマップ画像)のイラストでマスクしたり…色々応用が効きます。

ラスター画像でクリッピングマスク

透過を使ったぼかしやグラデーションマスクが可能

不透明度もマスクに反映しますので、ぼかしやグラデーションを使ったマスクが可能です。

グラデーションマスクは、グラデーションの設定を「描画色から透明に」にして塗りつぶします。シェイプを使用すると、グラデーションの位置や方向を後から調整しやすいです。

シェイプのグラデーション(描画色から透明に)を使用すると細かい調整がしやすい

ぼかしたマスクは、ラスター画像に「ぼかし(ガウス)」等のフィルタをかけます。

ラスター画像をそのまま用いてもいいですが、シェイプを一旦スマートオブジェクト化しスマートフィルタでぼかしをかけると、後からサイズやぼかし具合を調整できて便利です。

シェイプをスマートオブジェクトに変換してからスマートフィルタでぼかしをかけると後からサイズやぼかしを調整しやすい

レイヤーマスクの再編集が容易

マスクと対象が別々のレイヤーかつ、適用・解除がワンクリックでできるので、調整しやすいのも強みです。

例えば、前例のテキストでマスクした場合だと、マスクしたままテキストの内容を編集することもできます。

マスクをしたまま各レイヤーを編集可能

同様に同じ形でマスクをかけたい場合も、マスクレイヤーを複製するだけなのでとっても手軽です。

クリッピングマスクの注意点

グループには使えない

あくまでレイヤーへのマスクなので、グループを使ってまとめてマスクすることはできません。

※マスクしたい複数レイヤーをまとめてスマートオブジェクト化することで、擬似的にグループにマスクをかけた状態を再現することもできます。

複数レイヤーをまとめてスマートオブジェクト化すると擬似的にグループへのマスクが可能

別々のレイヤーなので別々に移動可能

デフォルトの状態ではそれぞれのレイヤーを選択して、個別に動かせる状態になっています。別々に動くのが便利な場面もありますが、位置が決まっているのに動いてしまうのも面倒…なので、マスク位置が決まったらリンクしておくと一緒に動かせるようになるのでいいかもしれません。

デフォルトだと別々に動くのでマスク位置が決まったらリンクしておくと便利

下のレイヤーオブジェクトは存在している

Illustratorのクリッピングマスクは、マスクレイヤーは透明な状態でグループ化されたような状態になりますが、Photoshopのクリッピングマスクは普通に別レイヤーとして表示された状態になります。

そのため、マスクをかけたオブジェクトを透過するとそのまま透過されるのではなく、下のオブジェクトが透けて表示されます。

不透明度を下げるとマスクレイヤーが透けて見える

もし、オブジェクトを透過したい場合は、レイヤーオブジェクトを透過すると反映します。

マスクレイヤーの不透明度を下げると透過される

上記の特性を応用して、特定の写真やオブジェクトに調整レイヤーを反映したい場合もクリッピングマスクが使えます。その場合は、調整を反映させたいオブジェクトをレイヤーオブジェクトにします。

特定の写真やオブジェクトに調整レイヤーを反映したい場合もクリッピングマスクが使えます

こんな風に重ねがけも可能です。

シェイプの線やレイヤースタイルはマスク結果に反映されない

塗りの部分しか反映しないので、シェイプの線やレイヤースタイルの光彩はマスクの形に反映しません。ラスター画像のぼかしは反映します。

シェイプの線やレイヤースタイルはマスク結果に反映されない

 

レイヤーが増えるので、量が多いとごちゃつく

例えばこんな風にクリッピングマスクが増えると……

あわわわわ…(((´・ω・`)))

あわわわわ…(((´・ω・`)))

増えてくると結構選択するレイヤーを間違えてたりする事故が起こるので、グループ化したりしてうまく整理してあげましょう。

グループが間に割り込むたびにマスクが解除される

レイヤーの重なり順を移動いているときにクリッピングマスクの間に割り込むと、該当レイヤーにもクリッピングマスクが反映します。

が、グループが割り込むと、グループにはクリッピングマスクをかけられないせいか都度解除されてしまい少し面倒です。

レイヤーの場合は割り込むとクリッピングマスクが適用されるがグループの場合は割り込むとクリッピングマスクが解除される

まとめ

私は元々DTPのデザインを関係上、Illustratorをよく使用していました。Illustratorではクリッピングマスクは「マスクレイヤーが上・マスクしたいオブジェクトが下」なので、「なぜ逆なのか…?」と始めは混乱しました(笑)。今回、改めて細かく特徴をまとめてみて、良い復習になったかなぁ…と思います。

次回は、レイヤーマスクとベクトルマスクを合わせて解説予定です。

ページの先頭に戻る