浜村拓夫(・∀・)作品集

頭の中にあるイメージを表現できるデザイン力が欲しいです(><)

ベクターデータ、ラスターデータ、ベジェ曲線

Illustratorの用語

IllustratorPhotoshopで扱う画像データは、2種類に分類されます。

 

ベクターデータ → 「線」(数式)で表現されている画像

・ラスターデータ → 「点」(四角形)の集まりで表現されている画像

 

画像を拡大したときに、

ベクター:なめらか

ラスター:ギザギザ

という違いがあります。

 

f:id:hamamuratakuo:20150606183836j:plain

(via マルチメディアスコーラ Chapter 2 - 東京情報大学

 

ベジェ曲線 

ベクターデータは、ベジェ曲線(Bézier Curve)という線で、画像が構成されています。

ベジェ曲線は、数式で表現されている線なので、拡大しても滑らかなままなのです。

 

Illustratorのペンツールで描く曲線(ベジェ曲線)のデータの正体は、数式の塊です。

 

(参考)

ベジェ曲線 - Wikipedia

f:id:hamamuratakuo:20150606200812p:plain

 

ベジェ曲線がわかった! - ザリガニが見ていた...。

 f:id:hamamuratakuo:20150606200830p:plain

 

円錐曲線 - 数学 - パースフリークス 

ベジェ曲線による円錐曲線の描画

多くのベクターグラフィックスソフトはベジェ曲線と呼ばれるN個の制御点を使用した曲線の描画方法を採用しています。
3次ベジェ曲線の場合、制御点は4個必要であり、高々3次までの曲線を引くことができます。
厳密な精度を持つ円錐曲線を描こうとした場合、通常のベジェ曲線で正確に表現可能なものは放物線に限られ、円、楕円、双曲線は近似的な表現しかできません。
(有理ベジェ曲線やNURBS曲線であれば、正確に表現できます)

f:id:hamamuratakuo:20150606201859p:plain

ベジェ曲線は、数学的には4点を結んだ線の「漸近線」なんですね。 

仕組みはともかく、イラストレーターのペンツールでうまく形を整えられるようなりたいです。

 

Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術

Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術

 

 

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

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

 

  

Illustrator ベジェ曲線 トレーニングブック CS/CS2/CS3対応

Illustrator ベジェ曲線 トレーニングブック CS/CS2/CS3対応