資格試験合格率95%
全コース完全1対1で24年の実績!!! ワードやエクセルなどのMOS(Microsoft Office Specialist)の資格をはじめとするパソコン資格はもちろん、簿記、医療事務、CAD、WEB、プログラム、ネットワークまで幅広い資格を1対1で学べるパソコンスクールです。

【初心者必見】Photoshopのクリッピングマスクの使い方

最終更新日:2019.09.28

cutout-shape-212016_1280

Photoshop(フォトショップ)のクリッピングマスクは、画像を希望の形に型抜きしたように見せる技法の一つです。例えるならば、クッキー生地を型抜きをしたようなイメージです。
下のレイヤーの領域から型抜いたように見せる事が出来るマスクがクリッピングマスクです。一度設定をした後でも、表示領域を簡単に変更する事ができますよ。素材の画像などをそのまま配置するのではなく、形を変更し配置することが出来るので、様々な場面で活用することが出来ます。
このような操作はPhotoshop(フォトショップ)ならではですので、幅広く知識を持つことでデザインの幅を広げる事が出来ます。操作手順をしっかりと理解しないままでいると、苦手意識がついてしまったりしますので、一からしっかりと覚えましょう!

Photoshopのクリッピングマスク技法①希望の画像を準備して実際にクリッピングマスクをかけてみましょう!

任意の画像を準備した後、その画像が背景になっていないか確認をしてください。そのままだと実行する事ができません。“背景”は“レイヤー”に必ず変更しておきましょう。
準備が出来たら早速クリッピングマスクを掛けてみますよ!

  1. ①クリッピングマスクを掛けたい画像の上に希望の形を作成します。
  2. ※形を作るツールはシェイプでもPNG画像でもOKです。

  3. ②形を配置したらレイヤーを確認します。切り抜きたい部分は、切り抜きたい画像の背面に置きます。
  4. ③切り抜きたいレイヤーを右クリックし、クリッピングマスクを選択。
  5. ④希望の形にクリッピングマスクにくりぬかれ完了です。

Photoshopのクリッピングマスク技法②背景をタイル状に複数の画像を使用したデザイン

tiles-shapes-2617112_1280
一つのカンバス内に数種類の画像をきれいに配置したいという場合にも、クリッピングマスクが活用できます。技法①を応用する形になりますが、カンバスサイズに合わせて一つの画像のサイズを計算します。中央で分けて左半分に画像を2枚、右半分に画像を3枚とタイル状に画像を配置するとした場合も、シェイプのサイズを測り領域を指定することで、右と左にきれいに配置することが出来ます。

操作を行う際に、一つの画像だけにマスクを掛けるのではなく複数の画像のサイズに合わせて領域を指定し、画像をきれいに整列させながら配置することが出来ます。

飲食店やカフェなどきれいにメニューの画像を配置したいけど、素材の解像度がバラバラだから、きれいに配置できない!とお悩みの方も、この領域を指定することで思い描いたように配置することが可能です。

Photoshopのクリッピングマスク技法③文字の部分だけ背景の透けて見えるデザイン

文字の部分を透けて見えるようにデザインすることも出来ます。この操作は、上記に記載したように型抜きのようなイメージなので、文字も型抜きの様に活用することが出来るという事です。

例えば背景がきれいな水色の海の背景だとしましょう。その上に、文字を配置して文字には単色やグラデーションを掛けるわけではなく、その海の背景が色の様に透けて見えればいいのに。という時などに活用できます。要は文字が型抜きの変わりなので、下記の手順で操作をして頂ければ出来ます。

  • ①背景となる希望の画像を配置します。
  • ②その上に白の長方形を配置します。(※色は任意です。)
  • ③さらにその上に文字を配置していきます。
  • ④メニューからクリッピングマスクを選択し完了です。

上記のような操作を行って頂く事で、長方形の上に配置した文字の部分だけが消え、その文字部分の背景が透けて見えるようになるという仕組みです。

その他のクリッピングマスクの方法とまとめ

型抜きをしたい部分の領域を指定するという簡単な操作になりますので、上記に記した物だけではなく様々な領域の指定方法で使用することが出来ます。
シェイプや文字のクリッピングマスクは上記に記した通りですが、その他にもブラシツールを使用し領域を指定して実施することも可能になります。
画像をただそのまま配置するより、こうした加工を一つ加えるだけで見え方が良くなりますよね。また、こうした技法を知っていると素材の失敗や余計な部分までも見せないように(隠れるように)配置することも出来ますので、様々なシーンで活用することが期待できますね!
その他にも、方法はたくさんありますので、いろいろな領域を指定させてスキルアップをしてみてください。デザインの表現力の幅も広がりますよ!

この記事を配信している
ソフトキャンパスを
いいね!で応援してね♪

最新情報をお届け!

Twitterでソフトキャンパスをフォロー!

関連記事

受講コース・資格講座のご紹介

  • 個別レッスンの簿記講座
  • パソコン MOS(Word・Excel・PowerPoint)資格講座
  • 就職に役立つ医療事務の資格
  • CADスクール(Auto CAD・JW CAD・VectorWorks)・資格講座
  • Webデザインスクール・HTML・CSSスキルアップ・資格取得 講座
  • DTPデザイン(Photoshop講座・Illustrator講座)
  • CCNA・LPIC ネットワークエンジニアの資格
  • プログラミングスクール・プログラマー講座
  • 企業研修・新人研修・オリジナルカリキュラム
  • キャリアコンサルタント技能士対策講座・国家資格キャリアコンサルタント講座
  • シニア専門パソコン教室
  • 小学生のためのロボット教室・プログラム講座

PAGE TOP