web制作

AdobeXDのマスク設定[ドラッグ・リピートグリッド・シェイプでマスク]

AdobeXDでのマスクの設定方法が知りたい
AdobeXDの描画の特徴が知りたい
という方むけの記事です。

AdobeXDって何?という方はこちらからどうぞ。

あわせて読みたい
AdobeXDって何ができるの?webデザイナーが勉強してわかったこと AdobeXDは何ができるのか?詳しく知りたい。 photoshopやillustratorとはどう違うの? という...

AdobeXDのプロトタイプについてはこちらからです。

あわせて読みたい
AdobeXDプロトタイプ設定[簡単な流れ]と共有方法 AdobeXDのプロトタイプってどんなの? プレビューの設定はどうやってやるの? プログラムがわからなくてもできる? ...

AdobeXDのマスク設定[ドラッグ・リピートグリッド・シェイプでマスク]

マスク設定その1:ドラッグドロップでの設定

XDは画像をドラッグアンドドロップでいれることができます。

1.マスクしたい形を用意します。

2.マスクしたい画像をFinderからドラックしていれます。

via GIPHY

3.画像が設定されました。

4.大きさや位置を変更する際は、ダブルクリックで画面内に入り調整します。

リピートグリッド使用時の複数画像のマスク設定

リピートグリッドを使っている場合、複数の画像を一気にマスク設定させることができます。

1.リピートグリッドを作成します。

2.設定したい画像名を連番にします。(01、02、03など)

3.必要な画像を選択し、リピートグリッド(図形の部分)にドラッグします。

via GIPHY

4.各画像をダブルクリック、画像の位置や大きさを設定し、
連番設定ができました。

 

図形と画像を「シェイプでマスク」設定する方法

事前にファイル内に読み込んだ画像をマスク設定することもできます。

1.メニューバー→ファイル→読み込みから画像を読み込みます。

2.画像の上に図形を描きます。(境界線はチェックをはずして)

3.画像と図形の両方を選択し、メニューバー→オブジェクトの「シェイプでマスク」を選択

4.マスクできました。

マスクの設定時のポイント

マスク設定の際、画像を読み込みことも多いかと思います。

XDでは、ファイル読み込みした際、リンクではなく読み込み扱い(埋め込み状態)になります。

そのため、画像ファイルのリンクフォルダを作って保存する必要はありません。

まとめ

ドラッグアンドドロップでマスク設定できるのが、直感的な操作で楽しいです。

テキストでマスクをかけたいときは、テキストを選択し、オブジェクト→パス→パスに変換で、テキストをパスに変換してから、マスク設定を行うといいと思います。

参考になれば幸いです。

XD勉強中なので、これからも学んだ情報をまとめていきたいと思います。