ラスタ画像とベクタ画像
コンピュータ上の画像といえば、一般的には写真や印刷物のように小さな点(ピクセル)が集まったものか、あるいは細かな画素で形成されたのです。これをラスタ画像といいます。
たとえば、以下のような画像を作成してみました。

サンプル画像
この画像はラスタ画像形式のひとつであるPNG形式で書き出されています。ちょっと見た目には全体的になめらかなイラストに見えます。しかし細部、たとえば女性の左目の部分を拡大してみると、下図のようにこの画像を構成している画素が少しずつ目立つようになり、拡大率を上げるにつれてさらにギザギザ感が露骨になっていきます。

左目部分の拡大画像(元画像がPNG形式)
これに対してベクタ画像は、曲線や数値データの集まりとなっていて、実際の画像は読み込まれた際にコンピュータにより描画されます。
実はここで取り上げた女性のイラストのオリジナルは、Adobe Illustratorで作成されたベクタ画像であり、ウェブページ上に挿入して表示できるようにするために、PNGのようなラスタ形式に変換されて書き出したものです。
それではベクタ形式の画像を拡大表示したらどうなるのでしょうか。オリジナルをPDFファイルとして保存した画像で、上図と同じ部分を拡大してみましょう。すると、以下のように、どれだけ拡大しても、“なめらかさ”は失われません(注.実際にはこのウェブページ上に表示させるため、ここではこの画像もPNG形式に変換されています)。

左目部分の拡大画像(元画像がベクター画像)
(2020年9月追記)
これら2つの画像形式の違いをさらにわかりやすくするために、それぞれの画像のある一部分をAdobe Acrobat Reader上で拡大してみせている動画を用意しました。サンプルとして使っているのは「ベクタ画像上で宝探し」にアップしている「Q14. 逃げろ!」のベクタ画像(オリジナルPDFファイル)とラスタ画像(PNG形式に書き出した画像を単純にExcelに貼り付けただけのドキュメントをPDFに保存したもの)です。一見これらの画像の画質(解像度)はほぼ同等に見えます。
まずベクタ画像の場合、ウサギのはるか上空から襲いかかろうとしている天敵らしき部分を拡大してみると、恐ろしい猛禽類の姿が羽のひとつ一つまで鮮明に描かれていることがわかります。
ベクタ画像の拡大
一方ラスタ画像の場合、同じ部分を拡大してみると、極めてぼやけた画像として現れます。
ラスタ画像の拡大
このようにベクタ形式で作成された画像は、いくら拡大・縮小しても画質が一切劣化しません。
極端にいえば、同一のベクタ形式の画像ファイルは、街角に宣伝用として掲げるような看板サイズにも、ネイルアート用のシールのサイズにも同じ画質のままで表示出力することが可能です。すなわち、ベクタ画像とは、デザインや出版の分野で極めて汎用性の高い画像なのです。
実際にベクタ画像を体験してみたい方は、このページで使用したサンプルをダウンロードしてください。画像を拡大するにつれて、「迫力」のようなものが伝わってくると思います。
参考までに、この画像の作成過程をここにご紹介します。
いわゆる「写真風イラスト」との違い
Adobe Illustratorに詳しい方であればご存じかもしれませんが、Illustratorで高精細の写真画像をトレースし、グラデーションメッシュを細かく設定して、写真上の同じ位置の色をひろってそのメッシュポイントにコピーすることにより、写真と見まがうようなベクタ形式のイラスト作成することができます。
しかしこのようなイラストはある意味元の写真の単なる複製品であり、もはやアートワークということはできないと思うのですが、いかがでしょうか。
ためしに私もこの「写真風イラスト」に挑戦してみました。題材は沢尻エリカさんの写真と、東北新幹線「はやぶさ」に運用されているE5系新幹線車両の2点です。オリジナルのネットからダウンロードした画像が粗いので、不鮮明な個所は手書で対応しています。

沢尻エリカさん

E5系新幹線
Illustrator体験者の方ならおわかりと思いますが、グラデーションメッシュの設定が思うようにいかず、大変苦労しました。もうこんな作業はこりごりです(笑い)。
その他のサンプル
(1) 横顔の女性
サイズはわずか380Kバイトです!

横顔の女性
(2) 浴衣姿の女性
浴衣に柄を付けました。

浴衣姿の女性
(3) 小百合さん
現在もご活躍中の大女優さんの若かりし頃のスケッチです。似ていなければ、どうかお許しを。

若かりし頃の小百合さん
(4) 待ちぼうけネコ
『パロディ百人一首』にしばしば登場するネコです。パロディの主人公が待ちぼうけているうちに、あまりの退屈から眠ってしまっています。

待ちぼうけネコ
私、あかしりょうがこのウェブサイト上で掲載しているすべてのイラスト(一部に写真を含むものと他のサイトへのリンクを除く)は、オリジナルがAdobe Illustratorで作成されているベクタ画像ですので、ここで取り上げたサンプル以外の画像も条件次第ではベクタ形式のPDFファイルでご提供が可能です。
0件のコメント