絵を描いてお仕事するとき、「AIデータで」「EPS」「jpg」「ラスタまたはベクターデータで」と指定されることがあると思います。
でもその肝心の「ラスター」「ベクター」、画像の形式ががわかりにくくてこまる…！というときもありますよね。
そんなあなたのために、「覚えておきたい！ 画像形式＆ラスターとベクターデータの違い」についてをお伝えします！
覚えておきたい！ 画像形式とラスターとベクターデータについて
ラスターデータの特徴
複雑なイメージを表現できる
ラスターデータは、とても複雑なイメージ表現ができる画像形式です。
身近な例でいいますと、デジタルカメラで取った写真画像や、クリスタ、Photoshopなどのペイントソフトでつくられたイラストなどです。
ラスターデータの良いところは、このような複雑な色合いを圧縮し、とても軽いファイルにしてWEB上で通信できるという点にあります。
拡大・再保存すると画像が荒くなる
ラスターデータでは拡大すると画像が荒くなります。
極限まで拡大すると、最後は１マスの四角になり、さまざまなレゴブロックが画像を作り出していることが見えますね。
さらにデータ形式によっては、画像がさらに圧縮され、とても見づらいものになります。
とくに、イラストや写真によく使われるJPEGデータは、再保存するたびに色合いが簡略化され、どぎつい印象になります。
ラスター形式の画像形式たち
ラスターデータはJPEGだけではありません。
その他にもたくさんのデータ形式があり、その形式ごとに特徴が違います。
| 画像形式 | 特徴 |
|---|---|
| bmp | データが重い。圧縮をしてないため、色合いをずっと維持できる。 |
| jpeg | 複雑な色合いを軽く保持できる。透明色がない。保存するたびに色合いが劣化する。 |
| gif | 今はあまり使われない、256色で表現。カンタンアニメーションも可。 |
| png | gifの上位互換。アニメーション、背景透過、多彩な色合いを表現できる。画像が大きくなるたびデータ量が増える。 |
| psd | フォトショップでのデータ形式です。bmpやjpg,pngなどの１枚絵のデータと違い、レイヤーや透明色なども使用できます。 |
| eps | ラスターデータのpsdやベクターデータのaiを処理できる画像形式です。CMYKという印刷時の色合いデータを保存でき、出版などに重宝するデータ形式です。 |
jpeg,pngなどの圧縮データはインターネットサイトやブログ、電子書籍の表紙に使います。
epsは印刷に使うデータです。
psdは、jpeg/png/epsすべての画像を作るための、編集データにつかわれます。
ベクターデータの特徴
次はベクターデータについてです。
カンタンなイメージをキレイに保存できる
ベクターデータの優れている点は、どんなに拡大してもキレイな画像イメージを保持できることです。
数学のように、点・線・面で画像を描写し、データ保存をしているため、拡大縮小してもデータに異変がありません。そのため、印刷サイズでの書類作成や、大きな看板の作成などにも重宝されます。
しかしながら、ラスターデータのように複雑なイメージ描写を苦手とし、できたとしてもデータがうまく処理できないことが多いです。
ベクター形式の画像形式たち
ベクター形式にもいくつか種類があります。
しかし、ラスターデータと違って、そんなに種類はありません。
| 画像形式 | 特徴 |
|---|---|
| eps | ラスターデータのpsdやベクターデータのaiを処理できる画像形式です。CMYKという印刷時の色合いデータを保存でき、出版などに重宝するデータ形式です。 |
| ai | aiデータは、Illustratorで取り扱うベクターデータです。点・線・面と色合いで画像を描写し、最近ではフォトショップのようにグラデーションやドロップシャドウなどの効果も使えるようになりました。 |
| svg | WEBように使うベクターデータ。aiファイルやepsファイルが表示できない、インターネットサイト・ブログなどに使えるデータです。 |
ベクターデータは基本的に、印刷物を使うために利用するデータ形式です。
そのため、Illustratorなどのドローイングソフトがなければ編集、プレビューすることはできません。
例外として、SVGファイルはWEB上にプレビューすることができます。
まとめ
ラスター画像
- ラスターデータは、小さな画像の粒でつくられている
- ラスターデータを拡大すると、荒く美しくなくなる
- ラスターデータは、bmp,png,jpeg,gifなどがある
- ラスターデータは、Photoshopやクリスタなどの画像処理ソフトがある
ベクター画像
- ベクターデータは、点や線、面などのデータでつくられている
- ベクターデータを拡大しても、画像の荒れはなくキレイなまま
- ベクターデータは、ai,eps,svgなどがある
WEB用のベクターデータ！ SVGファイルの作り方
HTMLなどのWEB上でもベクターデータを取あつかうことができます。
今回は、そんなWEB用ベクタ【SVG】ファイルをIllustratorで作成してみましょう。
ファイル→WEBおよびデバイス用に保存
保存形式をSVGへ
保存
これでオッケーです！
ここまでお読みくださり、ありがとうございます！
ポッケモッケイラスト研究所では、Adobeソフトやクリスタの使い方など、デザイン制作に役立つ小ネタを提供しております。
これからもみなさんの御役に立てる情報を提供していきますので、よろしければフォローなどしていただければ嬉しくおもいます！
