ベジェ曲線ツールを使いこなす

IllustStudioの[ベジェ曲線]ツールで実際に線を引くときのコツを、実例を交えながら紹介します。

[1]正円を描く

ベジェ曲線で正円を描いてみましょう。

ベジェ曲線で正円を描くときは、アンカーポイントを90度ごとに4か所作成します。
今回は、円の一番上を始点とします。円を描く目安として、円の直径を1/4分割したグリッドを表示させておきます。
※グリッドは、[表示]メニュー→[グリッドの表示]を選択してチェックを入れると表示されます。

(1)始点からドラッグして、1/4分割したグリッドから少しはみ出す程度の位置に、最初のコントロールポイントを設定します。

(2)2つ目のアンカーポイントは、最初のアンカーポイントから90度回転した位置に設定します。
ここでも、ドラッグしてコントロールポイントを設定します。

(3)アンカーポイントを設定したら、そのまま下方にドラッグして1/4を少しはみ出す程度の位置にコントロールポイントを設定します。このとき、カーブが正しい円を描いているかを確認しながらコントロールポイントを設定しましょう。

(4)下図のように、①～⑤の順番に同様の要領でアンカーポイントを設定します。

線を閉じるため、最初に設定したアンカーポイント上に最後のアンカーポイントを設定します。ポイントが設定されると正円の閉じた線画が描画されます。

[2]陸上トラックの形を描く

陸上トラックのように曲線と直線が組み合わさった図形を描いてみましょう。

(1)まず、上部直線部分から描き始めます。最初のアンカーポイントは直線部分を始点にするためクリックで設定します。

(2)直線部分が終わる位置に次のアンカーポイントを設定します。その次はカーブになっているので、ドラッグでコントロールポイントを設定します。

(3)このカーブは、正円描くときと同じ要領で描画できます。直径の1/4から少しはみ出すくらいの位置にコントロールポイントを設定しました。

(4)続けて、正円を描くときと同じ要領で進めます。トラックのちょうど半分まで描けたら、最後のポイントを2回クリックします。

(5)トラックが半分描けました。形状が難しい場合は、このようにベジェ曲線を数回に分けて描画してもよいでしょう。

(6)残り半分(反対側)も、同じ要領で作成します。

(7)陸上トラックの形状のベジェ曲線が作成できました。

[3]S字曲線を描く

S字の曲線を描いてみましょう。

まずは対称の形状のS字曲線を作成します。
このカーブは正円を4分割して反対に組み合わせた形状なので、これも正円を描いたときと同じようにベジェ曲線のカーブを作成できます。

(1)S字曲線の左上を始点にします。正円を描いたときとは逆向き(下向き) に、アンカーポイントとコントロールポイントを設定していきます。

(2)円を描く方法を応用してS字カーブが描けました。

(3)次に、対称な形ではないS字の曲線を描きます。

(4)今度は正円を描くように等分割でポイントを設定することはできません。
カーブをよく分析して、バランスの取りやすい場所を探してみましょう。うまくいくまで繰り返し操作してみてください。
ここで、コントロールポイントの操作に慣れておきましょう。

(5)対称でないS字曲線が作成できました。

[4]イラストに応用する

実際に人物のイラストを描く例をもとに、ベジェ曲線で線を描くコツを紹介します。

このようなイラストの髪の毛の部分をベジェ曲線で描いてみましょう。

1.ポイント間を大きくとる

ベジェ曲線はアンカーポイント同士の間を大きく取ると、なめらかな曲線が描きやすくなります。
反対に、アンカーポイントの数が多くなると曲線がなめらかになりにくくなります。
線の形状を捉えて、なるべく少ない数のアンカーポイントを設定するようにしましょう。
下図のような前髪の線の場合、アンカーポイントは始点と終点の2か所で足ります。

2.区切りのよいところで分割して作成する

複雑に変化する線を続けて描いていくのは難しいので、区切りの良いところで分割しながら描いていくと操作が簡単です。
無理に一筆描きで描こうとしないで、きちんと線の形を捉えられるようになるのが先決です。

分割して描いた線は、あとから[パス編集]ツールで1本の線につなげられます。

(1)つなげたい部分のアンカーポイントを1か所に重ねておきます。

(2)重なるふたつのアンカーポイントをドラッグで囲むように選択し、右クリックでメニューを表示させます。
メニューから[ポイントを結合する]を選択します。

(3)ふたつのベジェ曲線の端のアンカーポイントが、ひとつに結合されました。

POINT

髪の毛先などの鋭角な部分をベジェ曲線で作成したら、アンカーポイントを「角」の状態に設定しておきましょう。

■アンカーポイントを「角」の状態にしていない場合
[パス編集]ツールで毛先を移動するとき、毛先が思わぬ方向に変形してしまうことがあります。

■アンカーポイントを「角」の状態にしている場合
[パス編集]ツールで移動するとき、毛先の形状を保ったまま移動できます。

3.カーブのズレはあとから[パス編集]ツールで調整する

下図のような複雑な曲線も、[1]の正円や[2]のS字曲線の描き方を思い出して、ポイントを設定していきます。

コントロールポイントやアンカーポイントの位置がズレてしまい、思ったようなカーブにならなくても、[やり直し]はしないで最後まで線を作成します。
ベジェ曲線の操作に慣れないうちは、最初に大まかにポイントを設定して曲線を描いてから、あとで[パス編集]ツールを使って調整した方が簡単に作業できます。

※ベジェ曲線を編集する方法については、機能解説！トラの巻「ベジェ曲線ツールを徹底解剖」を参照してください。

髪の毛の線を、すべてベジェ曲線で作成しました。

4.ベジェ曲線の表示・非表示

作成したベジェ曲線は、ベジェ曲線を作成したレイヤーを選択している間は常にポイントが表示されている状態ですが、

他のレイヤーを選択し、ベジェ曲線を作成したレイヤーがアクティブでなくなると、ポイントは表示されなくなります。ベジェ曲線は定規の一種なので、表示方法や使い方は定規と同じです。

5.ベジェ曲線を活用する

また、ベジェ曲線を定規として活用すれば、表現はさらに広がります。
描画系ツールでベジェ曲線定規にスナップさせて描けば、タッチの違う線画を作成できますし、[定規の線に沿って描画]機能で描かれた線の太さ・色・入り抜きは、[定規プロパティ]ダイアログで簡単に変更できます。

※定規にスナップさせて描く方法や[定規プロパティ]ダイアログについて詳しくは、機能解説！トラの巻「定規の使い方・応用編」を参考にしてください。

イラストには、なめらかな曲線を必要とする場面が多くありますので、ぜひベジェ曲線を使いこなして表現力アップに役立ててください。