ベジェ曲線_アイキャッチ

イラストレーターでキレイな曲線を描くためのテクニックまとめ


イラストレーターで、図形ツールやその変形・切り抜きを使って簡単に作れる図形はたくさんあり、本などで多く紹介されています。

しかし、オリジナルのイラストを描いたり、画像の切り抜きや細かい選択範囲を作成するとなると、どうしてもペンツールでの作業が必要になってきます。
イラストレーターで作業する中でもっとも重要なツールである、ペンツールでの作業ですが、曲線となるとうまく使いこなせていない人も多いのでは?

今回、初心者さん向けに「ペンツールでキレイな曲線を描くためのテクニック」をまとめましたので、ご紹介します。

ペンツールの基本知識

ペンツールは、アンカーポイント(点)とアンカーポイント(点)を結ぶセグメント (線)と、アンカーポイントを選択すると出てくる、ハンドル(方向点)を動かした曲線で構成された図形を描くときに使うツールです。
イラストレーターではこの曲線のことを、「ベジェ曲線」と呼びます。

ペンツール基本知識

① アンカーポイント

ワイヤーを固定するピンのような役割をしており、繋げることで図形を描きます。

② セグメント

アンカーポイントとアンカーポインを結んだ線のことです。

③ ハンドル

ハンドルの角度と長さによって、曲線セグメントの形状とサイズを決めたり、移動して、曲線の形状を変化させキレイな曲線を作ることができる線のことです。

 

ハンドルの基本操作を覚えよう!

折り返している場所の描き方

ペンツール折り返し

折り返して線を描く場合は、アンカーポイントを置いた後、片方のハンドルをalt+ドラッグして動かします。

曲線から直線になる場所の描き方

ペンツール曲線から直線

アンカーポイントを打った後に、アンカーポイントをクリックすると、片方のハンドルが消え、直線が描けるようになります。

 

まずは、簡単な図形をトレースしてみよう!

 

曲線は、ハンドルを使って滑らかに描こう!

ベジェ曲線アンカーポイント

アンカーはできるだけ少なく打つのがポイントです!
特にハートは、アンカーポイントを少なくすることができ、図形が複雑にタガタになることを防げます。
ハンドルを駆使して曲線を描くと、滑らかできれいなハートが描けます。

次に、複雑な図形をトレースしてみよう!

ベジェ曲線_トレースサンプル

始点のアンカーポイントは「角」に打とう!

ベジェ曲線始点角

最初アンカーポイントを、どこから打ち始めればいのか困りますね。
そういうときは、「角」や「折り返し」 に注目してください。
始点をどこに打つか人によってそれぞれ異なりますが、まずは探しやすい場所から始めましょう。

 

アンカーポイントを正しい場所に打とう!

ベジェ曲線正しい場所

始点が決まったところで、それ以外の「角」「折り返し」部分にも全て打ちます。
それと、「曲線の手前」にアンカーポイントを打ち、そこからハンドルを伸ばして曲線を描いていきます。

 

最初は気にせずアンカーポイントを打って図形を囲もう!

ベジェ曲線囲む

アンカーポイントは少なくが基本ですが、バランスよく仕上げるのはなかなか難しい。
最初は正しい場所を探りながら、気楽にアンカーポイントを打って、図形を一度囲んでしまいましょう。
その後、全体のバランスを見ながらハンドルを少しづつ調整していきます。
不要なアンカーポイントがあれば削除します。

ポイントとしては、曲線部分に折れ曲がったハンドルを打たずに、
ハンドルをまっすぐ伸ばして滑らかに描くとキレイな曲線が描けますよ。

 

歪みを防ぐには、ハンドルを交わらないようにしよう!

ベジェ曲線歪みを防ぐ

きれいな曲線を描かずに歪んでしまうことは、誰でも経験があると思います。
まず、ハンドルの特性として引っ張ぱると、引っ張った分だけ図形がハンドルに付いてきます。
こうなってしまった場合は、ハンドルとハンドルが延長戦上で、交わらないように注意し、ハンドルの長さや向きを調整します。
これでも、歪んでしまう場合は、再度アンカーポイントの位置もずらして、ハンドルを調整してください。

 

便利なショートカットキーを覚えよう!

ペンツールを選択した状態でオブジェクトやアンカーポントの近くにカーソルを置くと、アンカーポイントの追加や削除のツールの「+」や「-」マークが出てきます。
そのほか、ペンツールを選択した状態で「Alt(Macの場合はOption)」を押すと、アンカーポイント切り替えツールになります。
以下の主な4つのショートカットを覚えておくと作業効率が高まります。

ペンツールショートカット

ベジェ曲線をゲーム感覚で練習しよう!

The Bezier Game top

画像出典:The Bézier Game

ペンツールは習得が難しく、特に初心者には、ハンドルの動きを理解するまでに時間がかかると思います。
そんなベジェ曲線を使いこなすべく、1から使い方を学べるようゲーム感覚でコツを掴めるサービス「The Bezier Gam」などで練習するのもおすすめです。

 

さいごに

キレイな曲線を描くためのテクニックをご紹介してきましたがいかがでしたか?
アンカーポイントの正しい場所や、正しいハンドルの操作方法など、
ちょっとしたコツを知ったうえで練習すれば、今までより一段と作業しやすくなると思います。
キレイな曲線が描けるようになるには、日々の経験を積むことが重要です。
ぜひ、いろいろ挑戦して、経験するうちに自分に合ったテクニックを探してください。 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【CSS】positionプロパティで要素を思い通りの場所に配置する方法とは?