Adobe XDをもっと使いこなすヒント！ 第56回 ベジェ曲線を思い通りにコントロール
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、ベジェ曲線の描き方を紹介する8つのツイートを紹介します。
Tip 1. ペンツールでベジェ曲線を描く
#AdobeXD #ProTip 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. @AdobeXD pic.twitter.com/2xnbUC60qN
— Elaine Chao (@elainecchao) July 20, 2020
ペンツールでベジェ曲線を描くには、クリックしてポイントを追加したらそのままポインターをドラッグします。ドラッグする方向によりカーブの曲がり具合を調整できます。
#AdobeXD #ProTip You can add a curve while closing a path by clicking and dragging the start point. @AdobeXD pic.twitter.com/q7wkOI0cPQ
— Elaine Chao (@elainecchao) July 21, 2020
パスを閉じる際に始点（終点）をカーブさせたいときは、視点をクリックしてからドラッグします。
Tip 2. 頂点をベジェ曲線に変える
#AdobeXD #ProTip Double click on any vertex to change from straight edges to Bezier curves. @AdobeXD pic.twitter.com/YeREoSUpQg
— Elaine Chao (@elainecchao) July 6, 2020
ペンツールでクリックしたポイントは尖った角になります。後からこれをカーブに変えたいときは、頂点をダブルクリックします。
Tip 3. 曲線にポイントを追加する
#AdobeXD #ProTip When in path editing mode, quickly add points to your path by simply hovering over it and clicking. @AdobeXD pic.twitter.com/MsGu4nT4tE
— Elaine Chao (@elainecchao) July 15, 2020
曲線に後からポイントを追加したい場合は、追加したい個所にポインターを移動してクリックします。追加したポイントはドラッグして任意の場所に移動することができます。
Tip 4. カーブの傾きと曲率をコントロール
#AdobeXD #ProTip Bezier curve controls are by default symmetric in distance from the vertex, and are locked into evenly adjusted on both sides. @AdobeXD pic.twitter.com/rYkZNJkxVj
— Elaine Chao (@elainecchao) July 2, 2020
ポイントをクリックして選択すると、カーブを調整するためのコントロールが表示されます。コントロールの端の白い円をクリックして選択し、コントロールを回転させると、曲線の傾きを調整できます。
#AdobeXD #ProTip Adjust the controls on your Bezier curve outward and inward to control the width of the curve. @AdobeXD pic.twitter.com/FeEflTYSyj
— Elaine Chao (@elainecchao) July 3, 2020
コントロールの端の白い円を横に引っ張ると、カーブの曲率を変えられます。コントロールを伸ばすと大きなカーブに、縮めると小さなカーブになります。
Tip 5. 非対称なカーブを描く
#AdobeXD #ProTip Hold down the Alt/Opt key while dragging one of the control points on a Bezier curve in the path tool to unlink them. @AdobeXD pic.twitter.com/WLDN1iJRC6
— Elaine Chao (@elainecchao) July 13, 2020
Alt/Optキーを押しながらコントロールの端の白い円をドラッグすると、カーブの片側だけ調整することができます。いったんコントロールの左右が非対称な状態になると、その後はキーを押さなくても左右を個別に調整することになります。
#AdobeXD #ProTip 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. @AdobeXD pic.twitter.com/b5UYWxTeX5
— Elaine Chao (@elainecchao) July 14, 2020
カーブを左右対称に戻したいときは、ポイントを2回ダブルクリックします。1回目のダブルクリックで、尖った角になり、2回目のダブルクリックでカーブになります。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！