Adobe XDをもっと使いこなすヒント！第18回ブーリアングループでシェイプを合成

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

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

Tip 1. ブーリアングループ機能を使ってオブジェクトを合成する

#adobexd #protip XD’s pathfinder tools are called Boolean groups, and they’re available right in the property inspector. The ensuing group inherits the styles from the bottom-most object in the Z-order. @adobexd pic.twitter.com/B8FH68nK99

— Elaine Chao (@elainecchao) October 10, 2018

XDにはブーリアングループと呼ばれる機能があります（Illustratorのパスファインダーに相当）。ブーリアングループは、オブジェクト同士を結合したりクリップすることができ、シェイプを組み合わせた複雑な形状をつくるのに便利です。

上のビデオでは、円の上に小さな円を重ねた状態でブーリアングループにして円の中心を切り抜き、ドーナツ状のオブジェクトを作成しています。ブーリアングループを作成した場合、最背面のオブジェクトのスタイルが適用されます。

ブーリアングループでは4種類の出力が選べます。プロパティインスペクタ内に、以下の順で左からボタンが並んでいます。

結合
背面と前面のオブジェクトの領域が結合された形状になる
型抜き
背面のオブジェクトから前面のオブジェクトと重なった領域の塗りが無い形状になる
交差
背面のオブジェクトが前面のオブジェクトと重なった領域だけになる
中マド
背面と前面のオブジェクトが重なった領域の塗りが無い状態で、オブジェクト同士が結合される

Tip 2. ブーリアングループを編集する

#adobexd #protip Boolean groups in XD are non-destructive, which means that you can go back and edit them after the fact. In this case, hold down Opt/Alt while resizing to resize from the center. @adobexd pic.twitter.com/mtm48f6JjH

— Elaine Chao (@elainecchao) October 11, 2018

XDのブーリアングループは非破壊です。すなわちグループ作成後にブーリアングループ内オブジェクトを編集することが可能です。上のビデオでは、ブーリアングループをダブルクリックしてから、内側の円を選択して拡大しています。なお、上のビデオのようにシェイプの中心から拡大するには、Opt (mac) または Alt (win) キーを押しながらドラッグします。

下のビデオは、ブーリアングループ編集の別の例です。こちらは、内側のシェイプをパスに変換してから変形しています。

#adobexd #protip Convert your Boolean group to a path for more fine-grained editing. @adobexd pic.twitter.com/JUOxAn7HSw

— Elaine Chao (@elainecchao) May 16, 2017

Tip 3. ブーリアングループの階層化

#adobexd #protip You can stack Boolean groups on top of one another, creating groups within groups to make more interesting shapes. @adobexd pic.twitter.com/YwBcd3rY0s

— Elaine Chao (@elainecchao) October 12, 2018

ブーリアングループは階層化が可能です。つまり、ブーリアングループを素材のひとつとして、その親にあたるブーリアングループを作成することができます。（ブーリアングループ内の子オブジェクトを、後から編集してブーリアングループにすることもできます）

上のビデオでは、ドーナツの形状のブーリアングループに長方形を重ねた状態にしてからブーリアングループをつくり、ドーナツの一部分が欠けた状態を作成しています。

Tip 4. 複数オブジェクトからブーリアングループを作成する

#adobexd #protip You can have multiple objects in a single level of your Boolean group. Add objects after the fact by double clicking to enter edit context, then drawing something else. @adobexd pic.twitter.com/02sLxtpSUO

— Elaine Chao (@elainecchao) October 15, 2018

これまでの例は2つのオブジェクトを組み合わせてブーリアングループを作成していますが、3つ以上のオブジェクトからブーリアングループを作成することももちろんできます。
上のビデオでは、長方形をコピーして2つに増やして、位置と角度を変更しています。計3つのオブジェクトから作られたブーリアングループが出来上がりました。

ここまでの説明でわかるように、ブーリアングループはグループの一種です。レイヤーパネルを見るとグループと同じ扱いをされていることが確認できます。

#adobexd #protip Don’t forget: Boolean groups are a special type of group, so edit contexts are also applicable! @adobexd pic.twitter.com/cYLTM72ERz

— Elaine Chao (@elainecchao) August 15, 2017

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