キャラ絵を描きたいのだが、ペンタブレットでは描きたくないんだ。マウスで描きたい。すると、2つの方法がある。
- マウスでドラッグして線を引く。線補正機能のついたペイントソフトなら なめらかな線にはなる。
- ベジエ曲線 bezier curve で線を引く。
1のマウスで線を引くのはやってみたが、思い通りの線が引けないし修正が面倒なのと、そのソフト・OSに依存した技術になるので、あまり習熟したくならない。
2の bezier curveしかない。
そこで bezier curve学習する。
ベジエ曲線てどのAdobe Illustrator入門書でも最初に取りあげられてるじゃん。今までも使ってたし。あらためて入門する必要あるの?
頭の中で思い描いた線を 鉛筆で引くみたいに、bezier curveで直接引けるようになりたいからな。詳細に知っておきたい。あと、「bezier curve学習は結局慣れだよ」みたいな言説もよく耳にするので、時間かけて、早く作業できるようになりたい。
今までに購入したIllustrator入門本もあらためて読みたいところだけど、まずは Adobeのサイトで学ぼう。入門本では説明してないハンドル操作なども説明していて良質だと思うから。
へえ。ベジエ曲線にそんな難しい操作あったっけ?
まず用語から確認していこう。以下をみながら理解していく。
http://helpx.adobe.com/illustrator/using/drawing-basics.html (英語)
http://helpx.adobe.com/jp/illustrator/using/drawing-basics.html (日本語)
この線のことを path と呼ぶ。
ひとつのpathは、複数の segment で構成される。
ひとつのsegmentは、始点と終点に anchor point がある。
segmentっていうのはアンカーポイント「2つ」をつなぐ線で、部分線なのか。
そして1本のグネグネのpathは、複数の直線・曲線segmentがあわさってできているということだね。
anchor pointとdirection line, direction pointという用語を使うのだな。
anchor pointには2種類あって
- smooth point
- 「曲線segmentと曲線segment」をつなぐ。なめらかに(カクッとではなく)つなぐ。
- corner point
- 「直線segmentと直線segment」「曲線segmentと直線segment」をつなぐ。カクカクした感じにつなぐ。
ということか。
いや、corner pointは必ずしもカクカクしないぞ。つなげたときの角度が0°とかならカクカク見えないだろ。それに「曲線segmentと曲線segment」をつないで corner pointにもできる(上記画像のωみたいなやつ)。つまり
- smooth point
- 「曲線segmentと曲線segment」をつなぐ。なめらかに(カクッとではなく)つなぐ。
- corner point
- 「直線segmentと直線segment」「曲線segmentと直線segment」「曲線segmentと曲線segment」をつなぐ。カクカクしてれば corner pointだがカクカクしてない場合もある。
もっとまとめると、
- smooth point
- 「曲線segmentと曲線segment」をつなぐ。なめらかに(カクッとではなく)つなぐ。
- corner point
- smooth point以外。
ふむふむ
これは色をつけるときに出てくる用語だな。
- オブジェクトの輪郭線を「stroke 線」と呼ぶ。
- オブジェクトの面を「fill 塗り」と呼ぶ。
日本語版は「ストローク」「フィル」じゃなくて「線」「塗り」と呼ぶんだね。
まあ「ストローク」というカタカナよりは「線」のほうがわかりやすいけど。
segmentまたはanchor pointを選択すると、direction handleが表示される。
- direction handle 方向ハンドル
- =direction line 方向線 + direction point 方向点
ということだな。
そして、
- smooth point
- 2本のdirection lineは角度が同じ。つまり1本の一直線に見える。片方を変更すると、2本とも連動して変わる。
- corner point
- 2本のdirection lineの角度が違う。ひとつ変更しても、ほかのdirection lineは連動しない。
smooth pointとcorner pointの真の違いはここだったのか。
ハンドル操作するときに、2本まるごと操作できるのがsmooth point。1本ごとに操作するのがcorner pointだね。
directoin lineは曲線の半径に対して垂直‥‥これは心にとめておくだろ。
direction lineの長さで曲線の盛り上がり方が違う‥‥なるほど。
さて、ここまで学んできたのはIllustratorの用語だ。
FreeHandではどうなっているか、見てみよう。
ハンドルという言葉は特に定義せずに出てきてるな。
で、FreeHandのanchor pointは3種類あるという。
- curve point
- corner point
- connector point
connector pointが新しく現れた‥‥? smooth pointはどこにいった?
ねえ、IllustratorとFreeHandのベジエ曲線て違うものなの?
同じものだよ。wikipedia:ベジェ曲線に定義されている「3次ベジェ曲線」は数学的な定義だから、ソフトによらず同じだ。
- Illustratorの smooth pointは、FreeHandでは curve pointと呼ぶ。
- Illustratorでは
「直線segmentと直線segment」「曲線segmentと曲線segment」をつなぐのを corner pointと呼んでいて、
「曲線segmentと直線segment」をつなぐのも corner pointと呼んでいた。
FreeHandでは「曲線segmentと直線segment」のはcorner pointではなく connector pointと呼んでいる。
ポイントの性質 | Illustrator | FreeHand |
---|---|---|
ハンドル2本が連動する | smooth point | curve point |
ハンドル1本ごとに操作する(直線と直線、曲線と曲線をつなぐ) | corner point | corner point |
ハンドル1本ごとに操作する(曲線と直線をつなぐ) | 同上 | connector point |
ということだな。
FreeHandのPenツールで試してみたけど、この connector pointって必要か‥‥?
corner pointをconnector pointにしても、操作もpathも変わらない。anchor point形状が三角表示になるのが違いだ。これ意味あるのかな?
Illustratorのほうが整理されてる感じだね。
Illustratorのcorner pointとsmooth pointはハンドル操作の点で違うし。
追記:
FreeHandのconnector pointが以下で説明されています。
- FreeHand Tips -6:コネクタポイントの活用
http://aspect.blog.so-net.ne.jp/2015-07-17
「斜め」の直線から曲線へスムーズにつながるということですね。「水平・垂直」の直線からしか試していなかったので、気付かなかった‥‥。
ちなみにIllustratorで同じことをするには、以下のスクリプトを使えばいいようです。
- ハンドルの角度をセグメントに揃える.jsx
http://graphicartsunit.tumblr.com/post/147091110304/adjust-direction-to-segment
続き: [Illustrator][FreeHand] ベジエ曲線を学習(2)