Illustratorで扱う「ベクター」画像とは

クラスメソッド株式会社
山崎基央
福田寅成
2009/8/18

Illustratorはベクタードローツール

　Illustratorでは「ベクター」とよばれる画像を主に使用して画面を構成していきます。これに対して、Photoshopでは「ラスター」と呼ばれる画像を主に扱います。

　座標を指定して点や直線、曲線などを描画したものがベクター画像です。ベクター画像は座標（点）とパス（点から点までの間で曲線の度合いを持つ線）で構成され、点の座標、線の色や太さ、線が囲んだ領域の塗りなどで構成された画像形式を指します。ファイルの中身には座標や塗の色などの数値情報しか書かれません。

　ベクター画像の特徴には、以下のようなものがあります。

　画像をピクセルに分解して走査線に転送し、このパターンをモニターに表示させる方法を「ラスタースキャン」と呼びます。

　また、このラスター方式のモニターが広くコンピュータで使われるようになり、ビットマップ画像が広く普及しました。この形式は、格子状に点を配置したものです。ビットマップ画像は、ラスター方式の画像と同義とされることが一般的です。ファイルには格子状の点とそれぞれが色の情報を持っています。

　ラスター画像の特徴には、以下のようなものがあります。

写真などの色数の多いものを得意とする
多くのファイル形式が存在し、用途によって使い分けられている。例えばWebであれば、JPEGやGIF、PNGなど。印刷用途であれば、EPSやTIFF。コンピュータグラフィックスではBMPなど
ファイルサイズは画像の大きさによって変化する
拡大、縮小、回転などで画像が劣化する

　以下のベクターとラスターの比較画像でそれぞれの特徴を確認できます。

図1　ベクターとラスターの比較：画像の拡大

図2　ベクターとラスターの比較：写真の表現（左：オリジナル画像、中央：JPEGで圧縮、右：Illustratorでライブトレースしたパスデータ）（画像をクリックすると拡大します）

　図2の写真は、「写真素材足成」というサイトにあるサンプルイメージをダウンロードして使用しています。

D89 デザインTips インデックスへ

デザインハック　TOPへ

HTML5 + UX フォーラム新着記事

誰でもCSS3アニメーションが捗るCSSトランジション （2013/11/22）
　予備知識なしでCSS3アニメーションが作れるDreamweaverの「CSSトランジション」機能の概要や基本機能、使いどころなどを解説
世界で一番のiPhone好きになった日本 （2013/11/21）
　Apple系媒体などを中心に英語圏でも反響を呼んでいた「世界で一番のiPhone／Apple好きになった日本」という記事の背景は
なぜか盛り上がるオープンデータ、その本質 （2013/11/20）
　公開することで税収が上がるわけじゃない、なのに盛り上がっちゃう。ところで、オープンデータの本質って何だろう？
マウスオーバーで動き出す「からくりボタン」 （2013/11/19）
　今回は、マウスオーバーすると次々とアニメーションが展開し、ある種のストーリー性を表現するようなボタンを作ってみます