こんにちは管理人のかわうそ29です。
実際の業務で使用しているテクニックです。
定期的にイラストレーターのスライスシリーズをやっていこうと思います。今回はまずラスターデータとベクターデータについて教えていきたいと思います。
かなりそもそもな部分になりますので、書き出しに何が関係あんねんと思われるかもしれないですが、こんな理由で書き出し画像が汚くなってしまうんだなと理解できる内容になってると思います。
実践的な内容では無いんですが、必要知識！と読んでみてください。
なぜ書き出しがうまくいかないのか
結論から言うと、ベクターデータをラスターデータの画像に書き出しする際、ベクターデータをラスターデータに変換する作業ができていないからです。この処理を怠ると、オブジェクトがギザギザの使えない素材が生まれます。
キーワードのベクターデータとラスターデータ、最後にラスタライズを説明します。
ラスターデータ
ラスターデータはは1ピクセルあたりに色をつけ、色のついた画素=ピクセルの集合体で画像を表示させる形式のものです。例えば昔のファミコンのようなドット絵とか、モザイクとか分かりやすいですかね。
もちろんこの画像にもラスタライズをしています。
これは僕のお気に入りのボールペン。拡大するとこんな風にドット。
例えば、テレビもパソコンも写真も教科書等印刷物も1点1点の小さな色の集まりです。集合体として見たときに画像になっていたり、文字になっていたりします。
それと同じ仕組みで画像データを扱う形式の1つがラスターデータです。ラスターで描写するソフトのことをペイント系と言ったりします。
代表的なものでPhotoshopがラスターデータを扱うペイント系ソフトです。メリットは、細かな色のグラデーションや緻密な色の違いを表現できるので、鮮やかです。
つまり、webサイトの画像素材の書き出しにはjpgやpngのようなラスターデータを扱える拡張子が適しているのです。
反対にデメリットとしては、拡大縮小による画像劣化や、ファイルサイズが大きいことです。加工にも弱く、再加工などは基本できません。
ベクター
ベクターデータと聞くとなじみないものだと思うのですが、ベクターデータはラスターデータのように1点1点色をつけて描写はしません。じゃあどのように描写するのかと言うと、パソコン上に座標を決めてその座標間を自動で計算して塗りつぶしたり線を書いたりしてくれるんです。イメージ湧かないですよね。例えばじゃあこんな感じです。
完全にドットを無視して直線に描かれてますよね。これがラスターだとこんな感じに。
なんとなく違いが分かりましたか。
ベクターだと、どこからどこまでをどういう処理で塗りつぶすかが大事なのです。
だから拡大縮小で画像が粗くなったりすることはありませんし、やり直しが何度でも可能です。
反面、描写範囲がぴったり決まりすぎているので、細かなグラデーションなどは表現できません。しかし単色や文字の描写も強いです。
名刺などによく使われるデータ形式です。
拡大縮小にも滅法強いということで、スマホなどレスポンシブ対応する際に使用することも多いです。
ベクターデータで描写するソフトはドロー系ソフトで、代表的なものはillustratorですね。あ、拡張子でいうと、pdfなんかもベクターだったはずです。基本はsvgという拡張子ですね。
簡単にラスターとベクターの違いを説明しました。なんとなくイメージが付きましたか。では最後にラスタライズについて説明します。
ラスタライズ（アンチエイリアス）
先ほど説明したようにイラストレーターっていうのはベクターデータで描写するソフトです。
なので、皆さんが書き出そうとしている画像素材のオブジェクトはベクターデータですね。
このベクターデータをそのまま使おう思うと、svgという拡張子で保存すればokです。
ただ、写真素材上にベクターオブジェクトを描写して書き出す場合などは、写真素材の鮮明さを維持しないといけないので、jpgやpngなどラスターデータを取り扱う拡張子で書き出ししてるはずです。
あれ？ベクターで作成した素材をラスターで書き出しようとしている。拡張子もラスターになってると。じゃあラスターで表示できるはずじゃないか！って思いますが、実際は画像が汚くなってしまいます。
だからベクターデータをラスター化する、つまりラスタライズが必要になるわけです。(アンチエイリアスともいう)
こんな感じです。ギザギザで素材として使えませんね。じゃあラスタライズして書き出してみましょう。
どうでしょうか。ギザギザがなくなって綺麗に表示されましたね！
最初のボールペンの画像もラスタライズをしています。ラスタライズしていなければこうです！
ラスタライズって大事ですね！
次回は秘蔵の現場テクニックを公開します。
スライス・ラスタライズ・書き出しの実際にどうするかの手順と、時間がかかるこの書き出し作業が一瞬で終わる魔法の設定とやり方を教えます！