Adobe XDをもっと使いこなすヒント！第32回マスクを使った便利な表現

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

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

Tip 1. シェイプでオブジェクトをマスクする

#adobexd #protip Create custom masks using Mask with Shape. Drag any vector object over another object and pressing Shift+Cmd+M (Mac) or Shift+Ctrl+M (Win). @adobexd pic.twitter.com/cJoz7OkvrN

— Elaine Chao (@elainecchao) March 20, 2019

XDでは任意のシェイプをマスクとして使うことができます。上のビデオのように、ビットマップ画像の上にシェイプを移動して、シェイプと下の画像を選択した状態で、macOSの場合はオブジェクトメニューから、Windowsの場合はコンテキストメニューから、「シェイプでマスク」を選択します。ショートカットキーは、Shift+Cmd+M (Mac)、もしくは Shift+Ctrl+M (Win) です。

#adobexd #protip You can also mask vector shapes using Mask with Shape. The object on top serves as the mask in this case. @adobexd pic.twitter.com/pv3keW4nBx

— Elaine Chao (@elainecchao) March 21, 2019

ベクターのシェイプもマスクすることが可能です。操作方法はビットマップ画像のときと同じです。選択されたシェイプの中で、重なりの一番上にあるシェイプがマスクとして使用されます。実際の動作は上のビデオをご覧ください。

なお、マスクの解除はグループ解除と同じ操作です。ショートカットキーは、Shift+Cmd+G (Mac)、もしくは Shift+Ctrl+G (Win) です。

Tip 2. マスクしたオブジェクトを編集する

#adobexd #protip Masks are non-destructive and behave just like a group, so you can double click to enter the edit context, move around anything you want, and press Esc to exit edit context. @adobexd pic.twitter.com/Tn9HZbIjUY

— Elaine Chao (@elainecchao) March 25, 2019

マスクしたオブジェクトの扱いは、基本的にグループと同じです。マスクをダブルクリックすると、マスクされているオブジェクトを自由に扱えるようになります。他にもは、Cmd (Mac) か Ctrl (Win) キーを押しながらクリックしても編集モードに移行できます。

編集が終わったら、Escキーを押下すれば、編集モードから抜けられます。

#adobexd #protip Just like in groups, you can quickly enter your mask by Cmd+Click (Mac) or Ctrl+Click (Win) on the object within to direct select inside the group, then press Esc to exit edit context. @adobexd pic.twitter.com/QJ5BBUpvEl

— Elaine Chao (@elainecchao) March 26, 2019

ビットマップ画像をマスクした時も扱いは同様です。ショートカットキーかダブルクリックで編集モードに入り、表示される場所を変更することが可能です。

#adobexd #protip Auto-masked objects (images dragged into a shape) also can be adjusted after the fact by entering the edit context. @adobexd pic.twitter.com/EvilgzBZjx

— Elaine Chao (@elainecchao) March 27, 2019

XDでは、シェイプに画像をドラッグして背景として配置することができます。この場合も、実際にはマスクした画像と同様の扱いです。そのため、上のビデオのように編集モードに入り、表示位置など調整することができます。

Tip 3. プロトタイプでクリック可能な領域を大きくする

#adobexd #protip Want to create a larger hit point in prototype mode? Create a mask that is larger than your object, and that becomes your hit point in prototype mode. @adobexd pic.twitter.com/8k6rFbfTwe

— Elaine Chao (@elainecchao) March 22, 2019

プロトタイプでクリック可能な領域を指定するときは、指定対象のオブジェクトのサイズが、クリックできる領域になります。もっと大きなクリックエリアが欲しい！というときは、上のビデオのように、対象のオブジェクトよりも大きなシェイプをつくってマスクすれば、マスクの領域全体がクリック可能になります。

Tip 4. マスクしたオブジェクトをアニメーションさせる

#adobexd #protip You can use a mask with auto-animate to show scroll behavior in any direction (including diagonal). @adobexd pic.twitter.com/nxI89cbEQn

— Elaine Chao (@elainecchao) March 29, 2019

マスクしたオブジェクトをアニメーションさせることが可能です。例えば、上のビデオのように、2つのアートボード間でマスクしたオブジェクトの位置を変えると、マスクした画像がスクロールするアニメーションが生成されます。

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