takato（@n8takato）です！
XDでクリッピングマスクをかける方法を知りたい。
この記事は上記の課題に向けて作成しています。
XDはIllustrator同様にマスクをかけることが出来ます。
マスクをかける方法について説明していきます。
この記事を読むメリット
- XDでクリッピングマスクをかける方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDでクリッピングマスクをする方法
早速XDでクリッピングマスクをする方法を説明します。
手順は下記の通りです。
- アートボードに画像を配置する
- 切り抜く図形を作成する
- シェイプでマスクをかける
アートボードに画像を配置する
始めにアートボード上に画像を配置します。
アートボード上に画像をドラッグ&ドロップすると画像が配置されます。
切り抜く図形を作成する
続いて切り抜く形の図形を作成します。
クリッピングマスクは図形の形に画像が切り抜かれます。
XD上の左側のメニューから図形を作成してください。
今回は丸い形のした図形を作成しています。
シェイプでマスクをかける
最後に「画像」と「図形」の2つを選択した状態で「右クリック」→「シェイプでマスク」を選択します。
すると画像が図形の形に切り抜かれます。
クリッピングマスクは以上で完了です。
その他XDでマスクをする2つの方法
XDでは「シェイプでマスク」以外にマスクをかける方法が2つあります。
- ドラッグ&ドロップでマスクをかける
- シェイプと交差でマスクをかける
ドラッグ&ドロップ
ドラッグ&ドロップは、アートボード上にある図形に画像を配置することで自動で切り抜いてくれる方法です。
手順は下記の通りです。
- アートボード上に図形を作成する
- 図形上に画像を配置する
①アートボード上に図形を作成する
まずは切り抜きたい形の図形をアートボード上に作成します。
今回は黒色の長方形を作成しました。
②図形上に画像を配置する
続いて図形の上に画像を配置します。
「Finder」から画像を選択し図形の上にドラッグ&ドロップします。
画像をドラッグ&ドロップすると画像が図形サイズに自動で切り抜かれます。
ドラッグ&ドロップでマスクをかける方法は以上です。
シェイプと交差
シェイプと交差は画像と図形を重ねた状態で「交差」を選択する方法です。
通常のクリッピングマスクと異なる点は図形のサイズに合わせて画像のサイズが拡大縮小することです。
シェイプと交差の手順は下記の通りです。
- 画像と図形を用意する
- 画像と図形を選択した状態で交差を選択する
①画像と図形を用意する
まずはアートボード上に画像と図形を用意します。
今回も黒の長方形を用意しました。
②画像と図形を選択した状態で交差を選択する
続いて画像と図形を選択した上で右側にある「交差」をクリックします。
交差はメニューの右から2番目にあります。
交差をクリックすると図形サイズに合わせて画像が切り抜かれます。
シェイプと交差でマスクをかける方法は以上です。
マスクを解除する方法
マスクをかけた画像を元に戻す方法を紹介します。
手順は下記の通りです。
- マスクをかけた画像を右クリックする
- 「マスクをグループ化解除」を選択する
「マスクをグループ化解除」を選択する
マスクをかけた画像を右クリックして「マスクをグループ化解除」を選択します。
するとマスクをかける前の画像と図形が表示されます。
マスクを解除する方法は以上となります。
XDのマスクは簡単
最後にまとめです。
- XDでクリッピングマスクをするには「シェイプでマスク」を選択
- XDは他にも「ドラッグ&ドロップ」と「シェイプと交差」の2つがある
- マスクの解除は「マスクをグループ化解除」で出来る
XDのマスクはIllustrator同様簡単に行うことが出来ます。
web制作ではXDを頻繁に使用するので、マスクのかけ方は覚えておいてください。
