クリエイティブ

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

akihiro kamijo

10-15-2020

X X Logo LinkedIn LinkedIn Logo Facebook Facebook Logo Copy Copy to Clipboard

連載

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

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

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

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). pic.twitter.com/1jV2kdaTro

— Elaine Chao (@elainecchao)

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

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

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

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. pic.twitter.com/E0YlJMvWi3

— Elaine Chao (@elainecchao)

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

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. pic.twitter.com/mjdI6xWabV

— Elaine Chao (@elainecchao)

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

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

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

— Elaine Chao (@elainecchao)

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

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. pic.twitter.com/VfUBhRPZCw

— Elaine Chao (@elainecchao)

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

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

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. pic.twitter.com/JdCp8DrnoG

— Elaine Chao (@elainecchao)

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

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

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. pic.twitter.com/OlUuaZx6yz

— Elaine Chao (@elainecchao)

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

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! pic.twitter.com/hlbrcOthEc

— Elaine Chao (@elainecchao)

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

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. pic.twitter.com/u3jhVSFDJu

— Elaine Chao (@elainecchao)

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

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

次回をお楽しみに！

クリエイティブUI/UX & Web