Adobe XDをもっと使いこなすヒント! 第57回 マスクグループの使い方を学ぶ

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、マスクグループの使い方に関連する9つのツイートを紹介します。

Tip 1. マスクグループの作成

オブジェクトをマスクの形に切り抜く機能がマスクグループです。作成するには、上の動画のように、オブジェクトの上にシェイプを配置し、シェイプとその下のオブジェクトの両方を選択した状態で、コンテキストメニューからシェイプでマスクを選択します。ショートカットキーは、Shift+Cmd+M(Mac)または Shift+Ctrl+M(Win)です。

この操作により、マスクグループと呼ばれる特別なグループが作成され、シェイプの形にオブジェクトが切り抜かれます。

Tip 2. マスクグループを編集する

マスクグループは、作成した後から編集することができます、たとえばオブジェクトの表示位置を調整したければ、上の動画のように、マスクグループをダブルクリックして編集モードに入ることで、オブジェクトの位置やサイズを変更できるようになります。Escキーを押すと編集モードから抜けられます。

マスクグループ作成後に別のオブジェクトを追加することもできます。上の動画のように、ダブルクリックして編集モードにしてから、新しいオブジェクトを配置してEscキーを押すと、新しいオブジェクトがグループの一員になります。

Tip 3. マスクの形状を変更する

マスクグループの編集モードでは、マスクに使用しているシェイプの形状を変更することもできます。編集モードに入ったら、通常のシェイプを操作する要領でマスクの形状を変更します。

ブーリアングループをマスクに使用している場合は、マスクグループをダブルクリックして編集モードにしてから、さらにマスクをダブルクリックして、ブーリアングループの編集モードに入ります。シェイプを編集したらEscキーを押してブーリアングループの編集モードを抜け、もう一度Escキーを押してマスクグループの編集モードを抜けます。

Tip 4. マスクグループの解除

マスクグループを解除すれば、シェイプとオブジェクトを再び別々に扱えるようになります。解除方法は、単純にマスクグループを選択して、コンテキストメニューからマスクをグループ解除を選択します。ショートカットキーは、通常のグループ解除と同じで、Shift+Cmd+G(Mac)または Shift+Ctrl+G(Win)です。

Tip 5. シェイプの自動マスクを利用する

シェイプに画像をドラッグすると、自動的に画像がそのシェイプでマスクされます。この時、XDは画像をシェイプの実質的な塗りとして扱います。上の動画のように、シェイプの形状を変えると、自動的に背景画像の位置調整が行われます。

マスクグループと同様に、シェイプをダブルクリックして、自動マスクされた背景画像の表示位置を調整することができます。操作は同じですが、これはシェイプの塗りの調整であることに注意しましょう。

シェイプによる自動マスクの場合は、マスクグループとは異なり、シェイプと画像を後から別レイヤーに分けることはできません。シェイプの塗りを変更するには、プロパティインスペクタから塗りの色を指定するか、別の画像をドラッグする必要があります。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2020.10.15