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

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

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

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

#AdobeXD #ProTip End caps are supported for open paths – select between three different types of caps to further customize your path. @AdobeXD pic.twitter.com/nlPar03UzN

— Elaine Chao (@elainecchao) July 24, 2020

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

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

#AdobeXD #ProTip Choose the style of your path’s corners by selecting the join style in the property inspector. @AdobeXD pic.twitter.com/3SBoK8eqwd

— Elaine Chao (@elainecchao) July 27, 2020

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

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

#AdobeXD #ProTip For closed paths, you can choose the border’s relationship to the stroke. While the stroke doesn’t change, you can adjust whether or not your border sits centered, inside, or outside (note that SVG only supports centered). @AdobeXD pic.twitter.com/e3W1cMftOy

— Elaine Chao (@elainecchao) July 28, 2020

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

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

#AdobeXD #ProTip The selection bounding box for paths sits in relationship to the stroke, not the border; this means that your bounding box may show the border or other applied effects (like shadows) outside of it. @AdobeXD pic.twitter.com/KBbqNXS06M

— Elaine Chao (@elainecchao) July 29, 2020

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

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

#AdobeXD #ProTip Convert any object to Path by pressing Cmd+8 (Mac) or Ctrl+8 (Win), then edit as with any other path. @AdobeXD pic.twitter.com/XpgU9Qv2Ac

— Elaine Chao (@elainecchao) July 30, 2020

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

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