#1 ベクトルマスク活用術 - Photoshop

第1回目はPhotoshopを使ってwebデザインをする人向けに、小技をご紹介します！

Photoshopで制作をしているとマスクをかける場面って結構ありますよね。
単純にマスクをかけるだけでも、かけ方がいくつかあるんです。
今回はマスクの種類と特徴、そしてその中でも優秀なマスクのかけ方をご紹介いたします！

Photoshopでかけられる3つのマスクと特徴
―――

Photoshopのマスクのかけ方は大きく分けて、下記の3種類があります。

● クリッピングマスク
● レイヤーマスク
● ベクトルマスク

まずは、それぞれどんな特徴があるのかをご紹介します。

■クリッピングマスク

すぐ下にある下層レイヤーのオブジェクトの形に切り抜くマスクです。

メリット
・一番簡単にマスクをかけられる
・調整レイヤーも同じようにマスクをかけられる

デメリット
・オブジェクトを動かす時に、マスク部分も選択しなければならない
・オブジェクトとマスクの間に別のレイヤーが入った場合マスクが解除される
・レイヤーの数が多くなる

■レイヤーマスク

選択範囲から作成するマスクです。

メリット
・選択範囲をとる方法が様々なため、その分使い勝手が良い
・フォルダにマスクをかけられる
・マスクをかけたフォルダに、内包されたオブジェクトにもマスクがかかる
・レイヤーにマスクがリンクされる形になるため、1つのレイヤーで済む
・グラデーションをかけられる

デメリット
・一度マスクを作成すると、後でマスクのサイズや形を変えるのが面倒

■ベクトルマスク

パスから作成するマスクです。

メリット
・パスによってマスクの形を自由に変えられる
・フォルダにマスクをかけられる
・マスクをかけたフォルダに、内包されたオブジェクトにもマスクがかかる
・レイヤーにマスクがリンクされる形になるため、1つのレイヤーで済む
・グラデーションをかけられる
・CCから搭載された属性パネルでマスクの大きさや角丸、パスの形状を変えることができる
・マスクを拡大縮小しても境界線がぼけない

デメリット
・マスクのかけ方を覚えていないと使うことを忘れちゃう

・・・・・

それぞれメリットとデメリットをあげましたが、ベクトルマスクがCCから搭載された属性パネルのおかけでだいぶ使いやすくなりました。

webデザインでは1ピクセル単位で調整することがよくあります。
数値指定で調整できたり、角丸や境界線がボケないベクトルマスクは、webデザインをするのにとても優秀だと言えるんではないでしょうか。

ベクトルマスクのかけ方 - その1
―――

それでは、ベクトルマスクのかけ方をご紹介します。

①パスを描画

1.マスクをかけるレイヤーを選択します。
2.ペンツールや長方形ツールでパスを作成します。
※この時、ツールモードは「パス」にします。

②マスクを作成

パスを作成したあと、上部のメニューバーにある「作成」の「マスク」をクリックします。

ベクトルマスクのかけ方 - その2
―――

仮置きしているシェイプオブジェクトがある場合、その形でマスクをかける方法。

①シェイプオブジェクトを選択する。

マスクにしたいオブジェクトを選択します。

②シェイプオブジェクトのパスをコピーする。

command + C （Macの場合）でパスをコピーします。

③マスクをかけたいレイヤーにペーストする。

1. マスクをかけたいオブジェクトを配置します。
2. マスクをかけたいレイヤーを選択します。
3. command + V（Macの場合）でコピーしたパスをペーストします。

・・・・・

他にもベクトルマスクのかけ方はいろいろあります。
制作工程に合わせたかけ方を習得しましょう。

ベクトルマスクでできること
―――

①属性パネルを使った変形

属性パネルを使えば、複数オブジェクトも一括で変更することができます。

②パスで作成されているので自由自在に形を変えられる

パスを追加したり、形をかえたりできます。

まとめ
―――

今回3種類のマスクのかけ方とベクトルマスクのご紹介をさせていただきましたが、それぞれの用途や特徴に応じて、マスクのかけ方を選んでもらえたらと思います。

ただ、ベクトルマスクはwebデザインをする上でとても優秀ですね。
ベクトルマスクの活用方法はまだまだあるので、自分なりのやり方を見つけてみてください。