【AdobeXD】クリッピングマスクをかける方法を説明します!

【AdobeXD】クリッピングマスクをかける方法を説明します!

takato(@n8takato)です!

XDでマスクをかける方法を知りたい。

この記事は上記の課題に向けて作成しています。

XDはIllustrator同様にマスクをかけることが出来ます。

マスクをかける方法について説明していきます。

この記事を読むメリット

  • XDでマスクをかける方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人
目次

XDでクリッピングマスクをする方法

XDでクリッピングマスクをする方法を説明します。
XDでクリッピングマスクをする方法

早速XDでクリッピングマスクをする方法を説明します。

手順は下記の通りです。

  1. アートボードに画像を配置する
  2. 切り抜く図形を作成する
  3. シェイプでマスクをかける

アートボードに画像を配置する

始めにアートボード上に画像を配置します。

アートボード上に画像をドラッグ&ドロップすると画像が配置されます。

XDのアートボード上に画像を配置するには、画像をドラッグ&ドロップする必要があります。
XD 画像の配置

切り抜く図形を作成する

続いて切り抜く形の図形を作成します。

クリッピングマスクは図形の形に画像が切り抜かれます。

XD上の左側のメニューから図形を作成してください。

今回は丸い形のした図形を作成しています。

XDでクリッピングマスクをする場合は切り抜きたい形の下図形を作成します。
XD 図形の作成

シェイプでマスクをかける

最後に「画像」と「図形」の2つを選択した状態で「右クリック」→「シェイプでマスク」を選択します。

XDで「シェイプでマスク」を選択します。
シェイプでマスクを選択

すると画像が図形の形に切り抜かれます。

図形の形に画像が切り抜かれます。
図形の形に画像が切り抜かれる

クリッピングマスクは以上で完了です。

その他XDでマスクをする2つの方法

その他XDでマスクをする2つの方法を説明します。
その他XDでマスクをする2つの方法

XDでは「シェイプでマスク」以外にマスクをかける方法が2つあります。

  • ドラッグ&ドロップでマスクをかける
  • シェイプと交差でマスクをかける

ドラッグ&ドロップ

ドラッグ&ドロップは、アートボード上にある図形に画像を配置することで自動で切り抜いてくれる方法です。

手順は下記の通りです。

  1. アートボード上に図形を作成する
  2. 図形上に画像を配置する

①アートボード上に図形を作成する

まずは切り抜きたい形の図形をアートボード上に作成します。

今回は黒色の長方形を作成しました。

アートボード上に切り抜きたい形の図形を作成します。
図形の作成

②図形上に画像を配置する

続いて図形の上に画像を配置します。

「Finder」から画像を選択し図形の上にドラッグ&ドロップします。

画像を図形の上にドラッグ&ドロップします。
画像を図形の上にドラッグ&ドロップする

画像をドラッグ&ドロップすると画像が図形サイズに自動で切り抜かれます。

ドラッグ&ドロップでマスクした画像です。
ドラッグ&ドロップでマスクした画像

ドラッグ&ドロップでマスクをかける方法は以上です。

シェイプと交差

シェイプと交差は画像と図形を重ねた状態で「交差」を選択する方法です。

通常のクリッピングマスクと異なる点は図形のサイズに合わせて画像のサイズが拡大縮小することです。

シェイプと交差の手順は下記の通りです。

  1. 画像と図形を用意する
  2. 画像と図形を選択した状態で交差を選択する

①画像と図形を用意する

まずはアートボード上に画像と図形を用意します。

今回も黒の長方形を用意しました。

シェイプと交差で使用する画像と図形を用意しました。
シェイプと交差

②画像と図形を選択した状態で交差を選択する

続いて画像と図形を選択した上で右側にある「交差」をクリックします。

交差はメニューの右から2番目にあります。

マスクをきる画像と図形を選択した上で「交差」をクリックします。
画像と図形を選択して交差をクリック

交差をクリックすると図形サイズに合わせて画像が切り抜かれます。

シェイプと交差でマスクした画像。
シェイプと交差

シェイプと交差でマスクをかける方法は以上です。

マスクを解除する方法

マスクを解除する方法を説明します。
マスクを解除する方法

マスクをかけた画像を元に戻す方法を紹介します。

手順は下記の通りです。

  1. マスクをかけた画像を右クリックする
  2. 「マスクをグループ化解除」を選択する

「マスクをグループ化解除」を選択する

マスクをかけた画像を右クリックして「マスクをグループ化解除」を選択します。

マスクをかけた画像を右クリックして「マスクをグループ化解除」を選択します。
マスクをグループ化解除

するとマスクをかける前の画像と図形が表示されます。

「マスクをグループ化解除」を選択してマスクをかける前の画像と図形を表示します。
マスク前の画像と図形

マスクを解除する方法は以上となります。

XDのマスクは簡単

XDのマスクは簡単に出来ます。
XDのマスクは簡単

最後にまとめです。

  • XDでクリッピングマスクをするには「シェイプでマスク」を選択
  • XDは他にも「ドラッグ&ドロップ」と「シェイプと交差」の2つがある
  • マスクの解除は「マスクをグループ化解除」で出来る

XDのマスクはIllustrator同様簡単に行うことが出来ます。

web制作ではXDを頻繁に使用するので、マスクのかけ方は覚えておいてください。

あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
コーディングを楽にするXDのおすすめなプラグインを紹介します! XDで作成したwebデザインをコーディングする際に楽な方法があるか知りたい。 この記事は上記の課題に向けて作成しております。 XDにはコーディング作業をサポートする機...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる