イラストやデザインの制作で使われることの多い「ベジェ曲線」。
ベジェ曲線で絵を描きたいけれど、操作が難しい……。
今回は、ベジェ曲線の引き方を練習できる、Webサイト「The Bézier Game」をご紹介します。
この記事の目次
ベジェ曲線の基礎知識
ベジェ曲線とは何か？
ベジェ曲線は、数式によって描画される曲線です。
ペイントソフトに搭載されている描画ツールを使って、ベジェ曲線を引くことができます。
制御点の位置を動かすことで、ベジェ曲線の形状を自由に変えられます。
ベジェ曲線は、歪みの無いきれいな線を引きやすく、デザインやイラストにも用いられています。
ベジェ曲線が引けるペイントソフトは？
- CLIP STUDIO PAINT
- Illustrator
- Inkscape
- Affinity Designer
CLIP STUDIO PAINTでは、［図形］ツール内から［直線描画］→［ベジェ曲線］を選択します。
Illustratorでは、［ペンツール］を用いてベジェ曲線を描画します。
ベジェ曲線の操作は、ペイントソフトで共通している部分も多いです。
ベジェ曲線の練習サイトもあるので、操作でつまずいている方は利用してみてください。
ベジェ曲線の練習にオススメの「The Bézier Game」
ベジェ曲線の操作を覚えられるWebサイト
「The Bézier Game」は、ベジェ曲線の操作をゲーム感覚で学習できるWebサイトです。
画面に表示されている下書きをペンツールでなぞって、図形を完成させましょう。
直線で図形を描く
チュートリアルではお手本の動きが見れる
最初の3つはチュートリアルの問題です。
チュートリアルでは、ペンツールのお手本の動きが表示されます。
下書きに沿って図形を描こう
チュートリアルが終わると、自分で操作できるようになります。
下書きの図形に沿って、線を引きましょう。
ベジェ曲線で直線を引きたい場合は、線を繋ぎたいポイントでクリック操作をします。
このポイントは「ノード」や「アンカーポイント」と呼ばれており、線の始点・終点にあたります。
また、Shiftを押しながらペンツールを動かすと、直線がスナップして角度を整えられます。
曲線で図形を描く
曲線を引きたい場合は、クリックした後にそのままドラッグ操作をして、方向線を伸ばします。
この方向線は「ハンドル」と呼ばれ、ハンドルの向き・長さによって曲線の角度や形が決まります。
正円の場合は、4つのノードとハンドルで表現できます。
ベジェ曲線で絵を描く場合、できるだけノードが少なくなるようにすると、きれいな線に見えます。
「The Bézier Game」では、使用できる残りノード数も画面に表示されます。
曲線で図形を描く（左右非対称のハンドルを作る）
ハンドルの方向が逸れている
ハンドルは基本的に左右対称で作られますが、図形とは異なった方に向いてしまうことがあります。
解説例の場合は、ハンドルの後方を、図形の方向に合わせる操作が必要です。
ハンドルの後方を合わせる
ドラッグでハンドルを作った後、左クリックボタンを離さずにAltキーを押します。
Altキーを押している間は、ハンドルの後方だけを独立して動かせます。
ハンドルの後方を図形の方に向けると、ハート型を正しく描けるようになります。
実践の問題に挑戦しよう
チュートリアルが終了すると、お手本が表示されない実践問題に入ります。
下書きの線に沿って、ペンツールで図形を描いていきましょう。
問題によっては、ノードを置く箇所を工夫することにより、少ないノード数で図形を描くことも可能です。
まとめ
ベジェ曲線の練習ができるWebサイト、「The Bézier Game」の紹介でした。
ベジェ曲線がうまく引けないときは、「The Bézier Game」で練習をしてみるのもオススメです。
出題される形をなぞりながら、ベジェ曲線の引き方を覚えてみてください。
