閉じる運営:株式会社セルリアビジネスを成功へと導くWebコンサルティング・インターネット広告・Web制作を提供する会社です。ニュース速報WebコラムHOME>デザイン/Web制作>Photoshop>Photoshopの3種類のマスクを使い分けて画像を...Photoshopの3種類のマスクを使い分けて画像を切り抜く方法Photoshopにはクリッピングマスク・レイヤーマスク・ベクトルマスクの3種類があります。それぞれ切り抜き方法が異なり、使い分けることで画像編集やデザイン制作がスムーズに進みます。Photoshopの3種類のマスクの使い方を解説します。記事URLhttps://min-web.com/photoshop-mask/POINTこの記事をざっくり言うとクリッピングマスクはレイヤーを2つ用意して既存の形に切り抜けるペイントツールを使って切り抜くレイヤーマスクベクトルマスクはパスを使って画像を切り抜けるPhotoshopの「マスク」機能を使用すると画像を直接切り取ったり、削除したりせずに画像を切り抜く事ができます。画像を直接切り抜くのと違い、マスクを使用すれば編集に失敗しても、後からやり直す事ができます。Photoshopのマスク機能は、「クリッピングマスク」「レイヤーマスク」「ベクトルマスク」の3種類があります。それぞれの使い方やどんな時に使うのかなどについて紹介します。まとめ写真を好きな形に切り抜くことができる【クリッピングマスク】クリッピングマスクとはクリッピングマスクは、2枚のレイヤーを重ね、下にあるレイヤーのオブジェクトの形に沿って、上のレイヤーを切り抜く機能です。自分が用意した画像の形に写真を切り抜きたい時に便利な機能です。画像だけでなく、「テキスト」の形に切り取ることもできるので、文字の形に画像を切り抜くことも可能です。Webサイトに掲載する画像の形を工夫したり、文字の形に切り抜いてロゴマークを作ったりする時に便利でしょう。切り抜きたい形のレイヤーを用意するまず、切り抜きたい形のレイヤーを用意しましょう。Photoshopを使用して切り抜く形のオブジェクトを作成しても、既存の画像を用意してもどちらでも問題ありません。既存の画像を用いてマスクを使用する場合は、背景が透明になっていることを確認しましょう。今回は、写真をりんごの形に切り抜きます。レイヤーを配置する切り抜きたい形のレイヤーを用意したら、その上に切り抜きをおこなう写真のレイヤーを配置します。→りんごの順番にレイヤーを重ねます。クリッピングマスクを作成する切り抜きをおこなう写真のレイヤー(今回の場合、青空の写真のレイヤー)を右クリックします。以下の表示が出てくるので「クリッピングマスクを作成」をクリックします。用意した切り抜きたい形(今回はりんごの形)に写真を切り抜くことができます。最後に切り取りをおこなったなったレイヤーの位置を移動して、切り抜きたい写真の範囲を調整します。クリッピングマスクを使うときのポイントクリッピングマスクはでは2つのレイヤーが必要です。クリッピングマスクを多用すると、レイヤーの数が増えてしまい、管理が難しくなります。そのため、使用する際は、管理しやすいようレイヤーに名前をつけるか、使いすぎないよう調整しましょう。画像のいらない部分を消すことができる【レイヤーマスク】レイヤーマスクとはレイヤーマスクは、ペイントツールなどを使って画像のいらない部分を消せるマスクで、白い部分と黒い部分で構成されています。白の部分が画像として残しておく範囲、黒の部分が表示しない範囲です。切り抜きとは違いマスクで隠しているだけなので、簡単に元の画像に戻すことができます。範囲を選択するレイヤーマスクをかける範囲を選択します。今回はバナナの画像を使用してレイヤーマスクを使用します。以下の画像では、バナナを縁取るように範囲選択しています。レイヤーメニューから「マスクを追加」を選択します。マスクを調整する「マスクを追加」をクリックするとマスクが作成されますが、範囲選択がしっかりおこなわれていないので画像に少し違和感が残っています。ブラシを使用して綺麗に表示できるよう調整します。画像を綺麗に調節するには左側の「カラーピッカー」を選択します。カラーピッカーの色は上記の四角い部分で確認できます。別の色になっている場合は、カラーピッカーの設定画面を表示させます。白色を選択し「OK」をクリック。表示させたい箇所をブラシでなぞります。マスクで隠れてしまっていた部分が表示されます。隠しきれなかった部分を隠すマスクで隠しきれなかった部分を黒のブラシを使用して隠します。カラーピッカーから黒のブラシを選択し隠したい箇所をなぞります。赤く囲んだ部分など変に表示されてしまっている部分や、細かすぎて消せなかった部分を黒のブラシでなぞりましょう。黒でなぞったことで輪郭が綺麗になりました。グラデーションをつけるマスクのサムネイル部分を選択し、Ctrlキー(macの場合commandキー)を押しながらクリックすると、グラデーションを作成することができます。カラーピッカーの不透明度を下げる事で半透明にレイヤーマスクをかけることも可能です。レイヤーマスクを使うときのポイントレイヤーマスクはレイヤーの画像を残したまま切り抜きができるので、マスクを使用した後からでも調整が可能です。切り抜きできる範囲を自由に調節できるので、複雑な画像を切り抜くのに向いています。レイヤーマスクを使うとファイルが重くなってしまうので、圧縮をかける必要があります。ペンツール・シェイプツールを使用する【ベクトルマスク】ベクトルマスクとはベクトルマスクは、ペンツールやシェイプを使用して作成するマスクです。ベクトルマスクは、画像の拡大や収縮を繰り返しても、マスクが劣化しないので、解像度を気にすることなく編集できます。「ペンツール」「シェイプツール」を使用して「パス」を選択する「ペンツール」または「シェイプツール」を選択します。ツールを選択したら、オプションバーから「パス」を選択します。範囲を書いてパスを作成します。今回はみかんの画像を使用し、右下の範囲を選択します。ベクトルマスクを作成するメニューから「レイヤー」→「ベクトルマスク」→「現在のパス」の順にクリック。作成したパスの通りにマスクをかけられます。作成したパスを変形させて範囲を調整できます。レイヤーから濃度やぼかしを設定できます。レイヤーマスクを使うときのポイントベクトルマスクはマスクがかかっていない部分に半透明やグラデーションをかけられません。画像のサイズを拡大、収縮しても解像度が保たれる特徴があるので単純な画像を作成する時に向いています。3つのマスクの使いわけ今回のりんごの形のように、単純に何かの形に切り抜きたい場合は「クリッピングマスク」が向いていますが、少し複雑な形に切り抜きたい場合は「レイヤーマスク」が適しています。解像度をキープしたい場合は、拡大・縮小しても画像が劣化しない「ベクトルマスク」が良いでしょう。まとめマスクを使用する事で画像を直接切り取ったりすることなく、画像を好きな形に切り抜けます。画像を直接切り抜いてしまうと途中で元に戻すことができなくなってしまいますが、マスクを使用すれば元の画像に戻すことも可能です。今までマスクを使用した事がない人は活用してみてはいかがでしょうか。その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。こんなに簡単!?Photoshopで背景を透明にする方法Photoshopで背景を透明にできる3つの簡単な方法を紹介します。Photoshopで画像を切り抜く方法7選(キャンバスや図形、被写体など)Photoshopの基本的なキャンバスを切り抜く方法から一番難易度が高い文字の形に切り抜く方法まで詳しく解説します。Photoshopのレイヤーとは?基本的な操作と注意点Photoshopの基本的な機能「レイヤー」についてわかりやすく使い方を解説します。最後までお読みいただきましてありがとうございます。以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。企画し実装まで支援する伴走型Webコンサルティング会社です。<AOHON>Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。【全3種】他の資料もチェックする無料で資料をダウンロードするそのままの計画で、目標達成できますか?Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。