ベジエ曲線を学習(3)

Illustrator FreeHand

前の記事: [Illustrator][FreeHand] ベジエ曲線を学習(2)


[話者Ａ] 次は理論的に bezier curve を理解してみよう。


英語だが http://learn.scannerlicker.net/2014/04/16/bezier-curves-and-type-design-a-tutorial/ で2次ベジエ曲線 Quadratic Bézier curveと3次ベジエ曲線 Cubic Bézier curveの概論をアニメで把握できる。
日本語では http://blog.sigbus.info/2011/10/bezier.html の説明がほぼ同じ内容。


[話者Ｃ] Illustratorは3次ベジエだよね。2次ベジエは何で使ってるんだっけ？


[話者Ａ] フォントでいうとPostScriptフォントやOpenTypeは3次ベジエ、TrueTypeが2次ベジエ曲線を使用している。

ソフトでいうと、CLIP STUDIO PAINTは2次ベジエと3次ベジエを両方使えるソフトがある。しかし入出力はビットマップ形式しかないので、このソフトはベクターデータ編集には使えないけどね。


[話者Ｃ]ふうん。2次ベジエの制御点は単にアンカーポイントと同じように置くだけか。


[話者Ａ]あとOpenType／TrueTypeフォント編集するFontForgeというソフトは、曲線編集は3次ベジエでやるようだ。

2次ベジエ→3次ベジエは正確に変換できるけど、3次ベジエ→2次ベジエは完全に同じには変換できないと書いてある。
http://fontforge.github.io/bezier.html
http://fontforge.github.io/faq.html#quadratic-cubic


で、さっきの http://learn.scannerlicker.net/2014/04/16/bezier-curves-and-type-design-a-tutorial/ のページは3次ベジエの具体的な描き方指南もしている。英語だけど、画像見てるだけでわかるよな。


いわく

  • anchor pointは水平垂直の最大値・最小値(extrema)の位置、あるいはカーブが反転する位置(infection point)に置こう。
  • handleの角度は 0° と 90° に限定するようにしよう。操作しやすいから。
  • handleでsegmentの方向を逆にするような使い方はやめよう。


以下もこれと同様の内容だ。
http://theagsc.com/community/tutorials/so-whats-the-big-deal-with-horizontal-vertical-bezier-handles-anyway


[話者Ｃ] 0° と 90° だけというのは難しくない？


[話者Ａ] でも、OpenTypeフォントをアウトライン化して調べたら、基本的にはどのフォントもその方針で作られているとわかってきた。


曲線の部分はだいたい0°と90°にanchor pointが配置してある。斜めのhandleもあるけど、多くはない。


[話者Ｃ] なるほど。
http://kojika17.com/2011/04/bejier-curve-for-illustrator.html
を見ると、円を描くにはanchor point 3つでいけるし、anchor pointは少ないほうがいい、とも言われている。
だけど、handle角度を0°と90°にしようとすると、円は 4つのanchor pointで描くのがいいんだね。


[話者Ａ] ところでフォントのアウトライン化だが、OpenTypeフォントとTrueTypeフォントで結果が異なる。


OpenTypeフォントは3次ベジエで、円を描くのは 4つのanchor pointでいい。実際IllustratorでOpenTypeの円は上の画像のように4 anchor pointsになっているよね。


TrueTypeフォントはさっきも言ったけど2次ベジエなのだが、それだと円を描くのに 8つのanchor pointを使うんだ。Illustratorで、ArialとかのTrueTypeフォントをアウトライン化すると確かに 8 anchor pointsになる。


しかしFreeHandだとTrueTypeフォントだけじゃなくてOpenTypeフォントをアウトライン化してもanchor pointsが8つとかになるんだよなー。


[話者Ｃ] フォントも作ってるAdobeはさすがなんだね。FreeHandはOpenTypeが普及する前のソフトって感じだし‥‥。


[話者Ａ] bezier curveの練習にはOpenType/PostScriptフォントをトレースするのがいいよ、と一般的には勧められるけど、その練習ではIllustratorを使わざるをえないね。






　

[新装改訂版]Illustratorで学ぶ 「ベジェ曲線」習熟ドリル

[新装改訂版]Illustratorで学ぶ 「ベジェ曲線」習熟ドリル