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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

次回をお楽しみに!

POSTED ON 2020.10.8