creatersnest

【Illustrator初心者向け】ベクターとは何か?


デザイン業界のデファクトスタンダートとも言えるPhotoshopとIllustrator。この2つのもっとも大きな違いは、取り扱っているデータの方法がラスターかベクターかの違いです。

日常生活ではめったに耳にしないこの2つの形式の説明と、Illustratorで使われているベクター形式の利点や欠点について説明したいと思います。

データの違い

画像を表す方法は大別すると2種類あります。
一つは、決められた部分ごとに色を決める方法。イメージとしては四角い色の粒を敷き詰めて、遠くから眺めているような物。これがラスター形式です。仕組みが単純なのでどんなものでもこの方法で画像データにできます。

ラスター形式

反面、画像の大きさ、色の種類でデータ量が膨大になります。

もう一つのベクター形式とは、線の始まる点とそこからの距離・向きによって描画する方法です。
イラストなどの単純な画像であればデータ量がとても少なく作れます。
いわゆる高校生の数学で習った方も多い「ベクトル」を利用したのがこの形式です。

ベクトル形式

 

それぞれの内部の処理

例えば1920×1080のテレビに斜めの線を描画するとします。

ラスター形式の場合、最低でも1920個分、「どこに黒い点があるか」の情報で描画します。
ベクター形式の場合は線の始まる点・長さ・色の情報だけで、後は計算で描画します。

自然物の写真のように色数が多く、直線などが少ないものの場合はラスター形式の方が処理が少ないので取り扱いが楽です。
イラストなど、綺麗な直線や曲線の集合体の場合はベクター形式の方が処理が少ないです。

Adobeの場合、それぞれに特化した形でソフトも分かれています。

写真などの編集はPhotoshop = ラスター形式
イラスト等の作成はIllustrator = ベクター形式


AIPSアイコン

 

ただし、このどちらのソフトでも両方のデータを取り扱うことは可能です。また、一部分だけをそれぞれのソフトで作成することもできるので、うまく連携して使用するのをおすすめします。

ベクター形式の利点

ベクター形式は線で描画します。その利点の一つが拡大縮小に強いことです。

例えば、ラスター形式の写真はどのような写真でも拡大すると一つ一つのドット(粒のような四角)が見えてきます。下の画像は72dpiの画像を2,000倍に拡大した時のもの。
しかし、ベクター形式はどれだけ拡大してもドットが見えてきません。

 

例として斜めの線をPhotoshopとIllustratorで描画して拡大してみましょう。
ちなみにIllustratorは先日のCC2015アップデートにより、64000%(640倍)の拡大をサポートしております。

 

Photoshopで斜線を2,000%に拡大したもの。

スクリーンショット 2015-07-07 10.20.43

Illustratorで64,000%に拡大したもの。

斜線イラストレーター

 

画像のとおり、Illustratorはどれだけ拡大しても画像が崩れないので、看板などの大型の印刷物やチラシ・パンフレットなどにもよく利用されます。

また、情報を全て記録するラスター形式とくらべてベクター形式の方が単純な図形などの情報量は圧倒的に少なくなります。これもベクター形式の利点と言えます。

 

ベクター形式の欠点

利点があるので当然、欠点もあります。
ベクター形式はその描画を計算で行ってます。情報を画像に常に描画しているのです。

ということは、とても複雑な画像を扱う場合に処理が非常に多くなり、返ってラスター形式よりも負荷が高くなります。

試しに適当な写真素材をベクター形式に変換したら169,000パスになりました。

ひまわり 変換前

 

この画像が・・・

 

ひまわり変換後

 

こうなります。
これだけパスが多くても、完全に再現されてないばかりか、処理が重く使いづらい状況です。
文字や図形はベクター形式で、写真はラスター形式で扱うのが一般的です。

 

まとめ

ラスター形式とくらべて、ベクター形式の多くはソフトウェア上で使用するものにはなりますが、大版印刷など必須と言っていい技術なので、用途に合わせてきちんと使い分けましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article待つのも楽しくなるローディングアニメーション30選