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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2018.11.29

Products Featured

  • Adobe XD

Tags

タグはありません