マスクのかけ方は3パターン
「Adobe XD」で画像にマスクをかけるやり方は3種類あります。
では、さっそく見ていきましょう。
1. 画像をドラッグ&ドロップしてマスクをかける
マスクとして使用するシェイプを描画して、そこに画像をドラッグ&ドロップします。
手軽なので一番これをやりがちですね。
マスクできました。
ちなみに、使用している画像は弊社が作ったオリジナルの素材集「Tomo庫」の画像です。
よろしければ右にある「写真素材をお探しですか？」のオレンジのバナーをクリックしてみてください。
（Adobe Stockへ飛びます）
2. 画像の上にシェイプをのせてマスクをかける
１. マスクをかけたい画像の上にシェイプを置いて、画像とシェイプを選択します。
２. 右クリックして「シェイプでマスク （Shift＋Crl＋M） 」を選択します。
※もしくは「オブジェクト／シェイプでマスク」を選択
シェイプでマスクされました。
3. 画像の上にシェイプをのせて「交差」
画像の上にシェイプを置くところまでは同じです。
シェイプと画像を選択した状態で「交差（Crl＋Art＋I）」をクリックします。
マスクされました。
それぞれのマスクの違い
さて、それではマスクされた画像を比べてみましょう。
１. 画像をドラッグ&ドロップ
2. 画像の上にシェイプをのせてマスク
3. 画像の上にシェイプをのせて交差
画像が小さくてちょっと分かりにくいかもしれませんが、
マスクされた画像の大きさが違うのがお分かりいただけるでしょうか。
真ん中の「画像の上にシェイプをのせてマスク」以外は画像が小さいですね。
「画像をドラッグ&ドロップ」と「交差」はシェイプのサイズに画像が自動的に縮小されます。
マスクを解除する
今度はマスクを解除してみましょう。
1. 画像をドラッグ&ドロップしてマスクをかけた後、マスクを解除
…解除できません。
この方法でマスクをかけるとマスクの解除ができないんです。
今後のXDのアップデートに期待しましょう。
2. 画像の上にシェイプをのせてマスクをかけた後、マスクを解除
こちらはマスクの解除ができます。
右クリックで「マスクをグループ化解除 （Shift＋Crl＋G） 」を選択します。
※もしくは「オブジェクト／ マスクをグループ化解除 」を選択
マスクが解除できました。
シェイプと画像に分かれます。
3. 画像の上にシェイプをのせて「交差」をした後、マスクを解除
「交差」を再度クリックするか、右クリックして「グループ化解除」どちらでもマスクを解除できます。
※もしくは「オブジェクト／ グループ化解除 」を選択
マスクを解除できました。
こちらは、マスクをした状態の画像とマスクをする前の画像に分かれますね。
まとめ
「ドラッグ&ドロップ 」でマスクをすると後でマスクを解除できないのは、最近まで気が付きませんでした。
後々、ひょっとしたらマスクを解除したいかも…という場合は「ドラッグ&ドロップ」でマスクをするのは
避けた方がいいかもしれません。
…とはいえ、 「ドラッグ&ドロップ」 でマスクをするのが一番楽なんですよね…。
早めにXDのアップデートがかかることを期待します。
