ベジェ曲線のコツ

こんにちは! デザイナーのたかはしです。

今日はベジェ曲線について書こうかなと思います。

この題材にした理由は、 ペンツールを使って作業していた私を見たエンジニアの友人が
「うわ、それうまくできないんだよなあー」
と嘆いていて、
そういえば私もIllustratorを使い始めたころは全然使いこなせなかったなぁ🤔
いつから抵抗なく使えるようになったんだろう🤔
と思ったらからです。

デザインを始めたばかりのデザイナーや、
デザイナーじゃなくてもペンツール使いこなしたい!という方に向けて
描き方のコツなんかをまとめてみます。

ベジェ曲線とは

そもそもベジェ曲線とは何かというと、

コンピューター上で滑らかな曲線を描く手法

です。
アンカーポイント、セグメント、ハンドルの3つの要素から成り立っています。 f:id:mutsumi-takahashi:20180619174016p:plain

ペンツール

まず描く方法ですが、ペンツールを使って描きます。
今回は、Illustratorを使っていますが、
前回の記事で紹介したFigmaでももちろんペーンツールがありますので、
そちらもぜひ試してみてください。(使用感もほぼ同じ!)

f:id:mutsumi-takahashi:20180619174040p:plain ペンツールを長押しすると、

  • アンカーポイント追加ツール
  • アンカーポイント削除ツール
  • アンカーポイントツール

が表示されます。

コツ

ベジェ曲線は線を引いた後に調整できるので、最初からうまく引けなくても大丈夫です!
いったん自由に引いてみましょう! f:id:mutsumi-takahashi:20180619174054p:plain ずれてても大丈夫!

ポイントは、アンカーポイントを打つ場所です。
出っ張っている部分、凹んでいる部分に打ちましょう。
打ちすぎるとせっかくのキレイな曲線がなんだか歪んでいる…となるので
アンカーポイントは最小限にし、ハンドルをうまく調整してキレイな曲線を引きましょう。

一通り引き終わったら、ハンドルの伸ばしが足りなかったり、不要なアンカーポイントを消したりして調整していきます。
f:id:mutsumi-takahashi:20180619174124p:plain

練習

ベジェ曲線を練習用できるサイトもあるので、やってみると意外と楽しいのでぜひチャレンジしてみてください!

やっぱり一番の上達は、量をこなす ことだと思います! まずは、単純なアイコンなどのトレースからはじめてみてください!