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