Adobe XDをもっと使いこなすヒント! 第54回 パスのポジションと角の形状

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、パスの角の形状やポジションの指定に関連する5つのツイートを紹介します。

Tip 1. パスの先端の形状の指定

XDでは、パスの先端の形状を3種類から選べます。デフォルトの先端は、クリックして指定したポイントが境界になりますが、境界の先に丸い先端が追加される形状、四角い先端が追加される形状も選択できます。変更するには、プロパティインスペクタ内の、パスの先端の属性を指定するアイコンを使います。

Tip 2. パスの角の形状の指定

パスの角の形状も、先端の形状と同様に3種類から選択できます。通常は角の尖ったマイター結合になりますが、角が丸くなるラウンド結合と、角の先端がカットされるベベル結合も指定できます。指定するには、プロパティインスペクタ内の、パスの角の属性を指定するアイコンを使います。

Tip 3. パスのポジションの指定

閉じられているパスに対しては、基準点と線の位置の関係を指定できます。デフォルトでは指定したポイントを中心に線が引かれますが、ポイントの外側、または内側に線の位置を移動することが可能です。基準点自体が移動するわけではなく、従ってポジションの指定によるパスの形状の変化はありません。

なお、SVG画像として書き出す場合は、どの指定になっていても、「基準点を中心とした線」として書き出されますのでご注意ください。

オブジェクトを選択すると、オブジェクトの周囲に青い境界線が引かれます。境界線の位置は、パスの位置ではなく、パスの基準となっているポイントに従って計算されます。そのため、線の一部や、シャドウなどの効果が境界線の外側に出るケースが存在します。

おまけ. オブジェクトからパスへの変換

シェイプをパスとして編集したい場合は、Cmd+8 (Mac) または Ctrl+8 (Win) キーを押下します。すると、上の動画のように自由に形状を変えられるようになります。


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

次回をお楽しみに!

POSTED ON 2020.09.10

Products Featured

  • Adobe XD

Tags

タグはありません