【クリッピングマスク】PhotoshopとIllustratorそれぞれのやり方を解説

指定のサイズに合わせた写真を

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

デザイン特化のメディアでは国内最大級のTwitterインスタグラムを運営しています。

今日のテーマ:クリッピングマスク

クリッピングマスクの基本的なやり方と、文字に対してのクリッピングマスクのテクニックを4種類紹介しています!

基本操作であるクリッピングマスクですがこれを覚えることでできることはかなりあります。ぜひ自分のデザインの幅を広げてください。

 

こちらの記事は落ち着いたデザインまとめ記事にも含まれています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事では落ち着いたデザインにするテクニックを[…]

Photoshop&Illustratorでクリッピングマスクの基本操作を解説

Photoshop&Illustratorでクリッピングマスクの基本操作を解説

こちらが今回のデザインサンプルです。

左上の写真が下の文字ぴったりに揃っています。

これはそのようなサイズの写真を使ったのではなく、左右揃うように切り取ったのです!

左右の幅が文字にぴったり、写真をクリッピングマスク

このように指定の形に写真のサイズを変更できるのがクリッピングマスクという機能です!

これまでもクリッピングマスクを使ったデザインは紹介してきましたが、今回の記事では基本的なクリッピングマスクの操作を解説していきます。

1番簡単なのは指定のサイズの図形を作りクリッピングマスクをすること!

イラレとフォトショそれぞれで解説していきます。

Photoshopでのクリッピングマスクのやり方

フォトショップでのクリッピングマスクのやり方

このように図形の上に写真をのせて、レイヤーとレイヤーの間でoptionを押しながらクリックします!

文字に対してやりたい場合は、文字の上に写真をのせて、optionを押しながらクリックです。

 

Illustratorでのクリッピングマスクのやり方

イラストレーターでのクリッピングマスクのやり方

イラストレーターの場合は、フォトショップと逆で、図形の下に写真です。その配置にしたあとに2つを選択しcmd(ctrl)+7で完了です!

ちなみにこのような画像だけの場合は、図形は作らずにcmd(ctrl)+7のみでクリッピングマスクができます。

イラレの知られていないクリッピングマスク

 

クリッピングマスクのショートカットキーは?▼
イラレではcmd(ctrl)+7、フォトショではoption+クリックになります!

 

写真のサイズに縛られることなく調節しよう!

その調節の仕方がクリッピングマスクということですね。簡単に指定のサイズで作ることができます。

 

デザ研
ここからは文字に対してクリッピングマスクの機能を使ったデザイン紹介!

 

 

IllustratorでもPhotoshopでも!文字に対してクリッピングマスクを使おう!

文字に対してクリッピングマスクでできること

こちらはクリッピングマスクを文字に対して使うテクニックをまとめました。

これらは全て過去記事で解説しているので紹介していきます!

クリッピングマスクを使って文字を線で隠す

クリッピングマスクを使って文字を線で隠す

これ表示されてる部分を囲む図形を作ってクリッピングマスクをしています!

すると右下が隠れるんですよね。Photoshopではレイヤーマスクを使えばさらに簡単に。

ブログ記事で解説しています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

クリッピングマスクを使って写真や質感を伴った文字

色ではなく写真や質感を使った文字

これは基本操作ですね。質感を伴った文字などもクリッピングマスクで作れます!

使う頻度も多いと思うのでやり方が分からない人は要チェックです。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

クリッピングマスクを使って一部を装飾した文字

クリッピングマスク機能、文字の一部装飾

これは文字の一部分だけ重なる図形を作ってから文字にクリッピングマスクしています!

上に重ねた図形に模様を加えたりなどするとこのようなデザインになります。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

クリッピングマスクを使って文字で背景を透かす

文字で背景を透かす

図形を文字の形に合わせて透かすデザインの紹介です!

これもかなり簡単で文字の上に背景写真をクリッピングマスクしているだけですね。

分かれば簡単なので分からない人は記事をご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

クリッピングマスクの機能を使ってデザインの幅を広げよう!

クリッピングマスクだけでもかなり幅が広がるかと思います。

 

もっとクリッピングマスクのポイントを使ったデザインが見たい方!

この記事で解説したクリッピングマスクのデザインをもっと見たい方は、、、

デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!

もっとクリッピングマスクのポイントを使ったデザインが見たい方!

 

デザ研
クリックするとクリッピングマスクを使ったデザイン”だけ”が表示されます!

【クリッピングマスク】PhotoshopとIllustratorそれぞれのやり方を解説。まとめ

いかがでしたでしょうか?基本操作であるクリッピングマスク。その機能を使った基本の操作と文字に対してのデザインを解説してきました。

自分はWEBデザインでもこのクリッピングマスクをよく使っています!

最後の章では文字に対してのクリッピングマスクを紹介していきましたが、その他にも色々と使うことができます。

 

こちらの記事はWEBデザインまとめ記事にも含まれています!WEBで使える32種類のテクニックをまとめました!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインには色々なテクニックが散りばめられて[…]

・写真のサイズはクリッピングマスクで調節しよう
・クリッピングマスクの機能を使ってデザインの幅を広げよう

 

広告
>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG