クリエイティブ

Adobe XDをもっと使いこなすヒント！ 第56回 ベジェ曲線を思い通りにコントロール

akihiro kamijo

10-08-2020

X X Logo LinkedIn LinkedIn Logo Facebook Facebook Logo Copy Copy to Clipboard

連載

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

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、ベジェ曲線の描き方を紹介する8つのツイートを紹介します。

Tip 1. ペンツールでベジェ曲線を描く

To draw a curve while you’re adding a point in the pen tool, drag after adding the point to convert to a curve and adjust the control. pic.twitter.com/2xnbUC60qN

— Elaine Chao (@elainecchao)

ペンツールでベジェ曲線を描くには、クリックしてポイントを追加したらそのままポインターをドラッグします。ドラッグする方向によりカーブの曲がり具合を調整できます。

You can add a curve while closing a path by clicking and dragging the start point. pic.twitter.com/q7wkOI0cPQ

— Elaine Chao (@elainecchao)

パスを閉じる際に始点（終点）をカーブさせたいときは、視点をクリックしてからドラッグします。

Tip 2. 頂点をベジェ曲線に変える

Double click on any vertex to change from straight edges to Bezier curves. pic.twitter.com/YeREoSUpQg

— Elaine Chao (@elainecchao)

ペンツールでクリックしたポイントは尖った角になります。後からこれをカーブに変えたいときは、頂点をダブルクリックします。

Tip 3. 曲線にポイントを追加する

When in path editing mode, quickly add points to your path by simply hovering over it and clicking. pic.twitter.com/MsGu4nT4tE

— Elaine Chao (@elainecchao)

曲線に後からポイントを追加したい場合は、追加したい個所にポインターを移動してクリックします。追加したポイントはドラッグして任意の場所に移動することができます。

Tip 4. カーブの傾きと曲率をコントロール

Bezier curve controls are by default symmetric in distance from the vertex, and are locked into evenly adjusted on both sides. pic.twitter.com/rYkZNJkxVj

— Elaine Chao (@elainecchao)

ポイントをクリックして選択すると、カーブを調整するためのコントロールが表示されます。コントロールの端の白い円をクリックして選択し、コントロールを回転させると、曲線の傾きを調整できます。

Adjust the controls on your Bezier curve outward and inward to control the width of the curve. pic.twitter.com/FeEflTYSyj

— Elaine Chao (@elainecchao)

コントロールの端の白い円を横に引っ張ると、カーブの曲率を変えられます。コントロールを伸ばすと大きなカーブに、縮めると小さなカーブになります。

Tip 5. 非対称なカーブを描く

Hold down the Alt/Opt key while dragging one of the control points on a Bezier curve in the path tool to unlink them. pic.twitter.com/WLDN1iJRC6

— Elaine Chao (@elainecchao)

Alt/Optキーを押しながらコントロールの端の白い円をドラッグすると、カーブの片側だけ調整することができます。いったんコントロールの左右が非対称な状態になると、その後はキーを押さなくても左右を個別に調整することになります。

To quickly link your control points together again, double click to convert from Bezier to corner, then double click again to convert back to a curve with linked control points. pic.twitter.com/b5UYWxTeX5

— Elaine Chao (@elainecchao)

カーブを左右対称に戻したいときは、ポイントを2回ダブルクリックします。1回目のダブルクリックで、尖った角になり、2回目のダブルクリックでカーブになります。

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

次回をお楽しみに！

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