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

Adobe XDをもっと使いこなすヒント！

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

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

#AdobeXD #ProTip Create a custom mask out of any shape by selecting both it and the content underneath, then launching Mask with Shape (Shift+Cmd+M on Mac, Shift+Ctrl+M on Win). @AdobeXD pic.twitter.com/1jV2kdaTro

— Elaine Chao (@elainecchao) September 8, 2020

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

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

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

#AdobeXD #ProTip Masks are non-destructive, so you can edit them after you’ve created them. Simply double click on the object to enter edit context, adjust the content, and then press Esc to exit the edit context. @AdobeXD pic.twitter.com/E0YlJMvWi3

— Elaine Chao (@elainecchao) September 9, 2020

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

#AdobeXD #ProTip You can add objects to the mask group after the fact by entering edit context (double click) and pasting into it. Once you’ve exited edit context (Esc), your group can be moved as a unit. @AdobeXD pic.twitter.com/mjdI6xWabV

— Elaine Chao (@elainecchao) September 10, 2020

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

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

#AdobeXD #ProTip The mask shape itself can be adjusted after the fact by double clicking into the edit context and then editing the mask. @AdobeXD pic.twitter.com/jA9OxEigAh

— Elaine Chao (@elainecchao) September 11, 2020

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

#AdobeXD #ProTip Any type of vector group can be a mask, including a Boolean group. Since Boolean groups are also non-destructive, you can make edits after the fact by selecting the mask shape and double clicking into it to edit the shapes within. @AdobeXD pic.twitter.com/VfUBhRPZCw

— Elaine Chao (@elainecchao) September 15, 2020

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

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

#AdobeXD #ProTip You can ungroup a mask group – simply select it and hit Shift+Cmd+G (Mac) or Shift+Ctrl+G (Win) to break your mask group into its component parts. @AdobeXD pic.twitter.com/JdCp8DrnoG

— Elaine Chao (@elainecchao) September 14, 2020

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

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

#AdobeXD #ProTip Drag an image into the shape to auto-mask the shape. The image is effectively a “fill” of the shape, and XD will intelligently fully fill the vector object with the image. @AdobeXD pic.twitter.com/OlUuaZx6yz

— Elaine Chao (@elainecchao) September 16, 2020

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

#AdobeXD #ProTip Similar to a mask group, you can adjust the image auto-mask by double clicking into it and adjusting the contents. However, it’s still a fill of the vector object! @AdobeXD pic.twitter.com/hlbrcOthEc

— Elaine Chao (@elainecchao) September 17, 2020

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

#AdobeXD #ProTip Unlike mask groups, you can’t ungroup an auto-mask. To clear the object’s fill, explicitly set the object’s color from the property inspector. @AdobeXD pic.twitter.com/u3jhVSFDJu

— Elaine Chao (@elainecchao) September 18, 2020

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

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

次回をお楽しみに！