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

by akihiro kamijo

Posted on 11-29-2018

連載

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

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

次回をお楽しみに!

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

Products: