ソフトウエアと制作目線で見る校正① グラフィックソフトの要・ベクター画像とベジェ曲線
このシリーズは印刷・出版の制作側から見て、データの特性や起こり得るミス、その原因を紐解いていきます。
第1回目はグラフィックソフトの要、ベクター画像と、それを構成するベジェ曲線についてです。まずは、制作現場がどんなアプリケーションを使っているか、簡単に説明しておきましょう。
印刷・出版の制作環境、アプリケーション
印刷・出版の制作で使っているグラフィックソフトと言えば、だいたいAdobe製です。Adobe一強と言えるほど、Adobe Illustrator(通称イラレ)、Adobe Photoshop(通称フォトショ)は圧倒的なシェアを持っています。
イラレは「印刷やweb、ビデオ、モバイルなど、業界標準のベクターグラフィックツール」であり、フォトショもまた写真・画像に携わるプロの業界標準アプリです。
また、雑誌や新聞など、組版※においてもAdobeはシェアトップに立っています。
組版ソフトを持っていたアルダス社を合併してAdobe InDesign(通称インデ)を開発し、それまで組版ソフトのトップだったQuarkeXPressをあっという間に凌駕してしまいました。
※組版……原稿の指定通りに、文字や図などをページにレイアウトする作業のことで、どちらかと言えばページ数が多いものに使っている。現場で組版ソフトと言えば本・雑誌・新聞・カタログなどのページものをレイアウトするアプリケーションを指す。
インデは今やデジタルコンテンツも作れ、また、CSV※からリストの自動組版ができるまでに進化しています。
分厚いカタログの商品の値組や、電話帳のような膨大なリストが、CSVを流し込むことで自動で作れるようになりました。ただし、某印刷会社では、このCSVからの組版を専門に行っている部署があるくらいなので、少々扱いが難しいのでしょう。デザイナーやオペレーターが一人でなんでもかんでもできるわけではないのです。
※CSV……Comma-Separated Values データベースなどで、各項目のデータをカンマで区切ったテキスト形式のファイルのこと。主にアプリケーション間のファイルのやり取りに使われる。
以上、印刷・出版の制作環境を見てきました。ではここから本題の「ベクター画像」、「ベジェ曲線」について見ていきましょう。
ベクター画像って、どんなもの?
デジタル画像は、大まかに分けると「ビットマップ画像」と「ベクター※画像」に分類することができます。
※vectorを「ベクトル」と読む場合も多い。物理数学ではドイツ語読みの「ベクトル」、コンピュータグラフィックスでは英語読みの「ベクター」と読む傾向が強い。
フォトショ等で描くビットマップ画像は、小さな四角の点であるピクセル(画素)に、ひとつずつ色や輝度を与え、面で構成する画像です。写真に向いています。
拡大縮小する時はピクセル自体を拡大縮小しています。単位面積あたりのピクセル数が少ない低解像度のものを拡大すると、ギザギザの粗い画像になってしまうのは、そういう理由です。
対して、イラレを始めとするドロー系グラフィックソフトで描くベクター画像は、線で構成する画像です。図形に向いています。
左:ビットマップ画像 右:ベクター画像
「ベクター画像」は、「ベジェ曲線」と呼ばれる線(パス)で描きます。複雑に入り組んだ図形も、すべてパスの組み合わせで、点と点をつなぐ曲線の曲率を数式によって定義しています。
この数式を与えられたパスは、拡大縮小や移動をするたびに、その軌道を裏で再計算しているんですね。そうして動いた先で、再びきれいに描画します。だから、ビットマップ画像とは違って、どんなに拡大してもギザギザにはならないのです。
このベジェ曲線で作った画像が「ベクター画像」で、様々なロゴやマーク、図形、イラストなどが作られています。
このベジェ曲線をサポートする画像フォーマット※としてSVG(Scalable Vector Graphics)形式があり、最近はWEBでも扱えるようになりました。
長らくこのフォーマットに対応しなかったIEが、SVG未対応のIE7のサポートを2016年で終了したので、そろそろ、このSVG形式も多用されていくことでしょう。だって、どんなに拡大してもギザギザにならないのですから、ひとつのデータでいろんなところに使いまわしができます。広報や宣伝部は、解像度が足りませんと言われることがなくなりますよ。
※画像フォーマットの種類は、ビットマップ系にJPG GIF PNG TIFFなど、ベクター系にEPS SVG などがある。
ベジェ曲線のアンカーポイントがカタチを決める
さて、このベジェ曲線でよくあるミスが、複雑なポイントのひとつをうっかり触ってしまい、変形してしまうという事故です。
上の図では、ポイントが1個なくなったために、まったく違う形になっていますね。
そしてベクター画像は、たくさんのアンカーポイントから作られています。
上の図のアンカーポイントの両端にヒゲみたいなものが出ています。このヒゲの長さと方向で、向きを変えたり深さを変えたりして、図形の形を変えています。
たとえば、下はDANKグループの一社、東京ヒップのロゴがどのような構成になっているかを示したもの。たくさんのアンカーポイントで構成されているのがわかりますね。
(ちなみに東京ヒップはこんな会社です→http://tokyo-hip.com/ )
オブジェクトが崩れるのは印刷とWEBの違い?
最近はWEB用に先に制作されたデータを利用して、あとから印刷データを作成することも増えました。印刷が先かWEBが先かで、作られたデータがそもそも違うので注意が必要です。
「WEBと印刷?データは同じでしょ?」
なんて思ってはいませんよね? 概念が違うので基本設定が変わります。
WEBでの色表現はRGB(光3原色)を使い、
印刷ではCMYK(インキの3原色+黒)を使う。
(RGBとCMYKについては、別の回で書きますのでここでは割愛します。)
WEBではピクセル単位を使い、
印刷ではメートル(orインチ)単位を使う。
先ほども出てきたピクセル、WEB上で大きさを測る単位です。このピクセルがくせ者で、WEBチームから来たイラレデータは「ピクセルグリッドに整合」機能がオンになっていることがあります。
この機能がオンになっていると、ピクセルに自動でスナップします。100.5pxなんていう小数点以下はピクセルの世界にはないんですね。小数点を含んだ画像はブラウザで表示した時に自動で1に直されています。0.1だの0.3だのは、薄い色に置き換えて1にしていますね。0.7とかだと若干薄いぐらいの色に置き換えて、やはり1にしています。だから画像のキワがぼやけてしまうのです。
そこでこの機能をオンにすると、ピクセルに自動でスナップするのでWEBではシャープな画像が得られます。
が、しかし、印刷では困ったことに、そのまま印刷用に拡大縮小や移動などすると、ポイントがずれたり埋もれたりして、オブジェクトのカタチが崩れてしまいます。WEBにはありがたい機能でも、印刷にはありがた迷惑な機能だったのです。
事故の原因はこのようなほんの些細なことから始まります。
ミスのない人間なんていませんから。だからこそ、データの特性を知っておけば、校正や修正も素早くできるというものです。
次回は「画像配置とトリミング」についてです。
どうぞお楽しみに。