ラスター画像とベクター画像の違い【Photoshop 初心者用】

raster-and-vector-images-1

ラスター画像とベクター画像について

 

ラスター画像(ビットマップ画像)とベクター画像(ベクトル画像)

の違いがわからない…

Photoshopの事を調べてると当たり前のようにでてくるけど…

 

chips-1
chips

聞き慣れない用語が出てくるとわかりにくいですよね!

 

この記事では、ラスター画像(ビットマップ画像)ベクター画像(ベクトル画像)の違いについてと、画像のカラーモードについても書いていきます。

この記事を読めばラスター画像(ビットマップ画像)とベクター画像(ベクトル画像)の基本的な事を理解できますよ!

 

※Photoshop 2020について解説しています。

スポンサーリンク

ラスター画像とベクター画像の違い

raster-and-vector-images-2

 

Photoshopで使うデジタル画像は2種類あります。

ラスター画像(ビットマップ画像)ベクター画像(ベクトル画像)です

 

ラスター画像とは

 

ラスター画像とは、ピクセルと呼ばれる点が集まって作られている画像です。ビットマップ画像とも呼ばれます。

ピクセルは正方形の点で一つずつ色情報と位置情報を持っています。そのピクセルが集まって画像を構成していて、モザイクのように画像を作っていますよ。

ラスター画像は細かな色やグラデーションの表現が可能なので、写真はラスター画像で表現します。

グラデーション(連続階調)の再現には優れていますが、拡大・縮小を繰り返すと画像が劣化する(荒れていく)という欠点がありますよ。

編集する元の画像のサイズ(解像度)をできる限り大きな画像を使うなどの注意が必要です。

またブラシツールなどはラスター画像のレイヤーだけで使えます。

 

chips-1
chips

一度度縮小してしまうと、画像が劣化してしまいます

 

Photoshopで画像を編集する場合は、基本的にラスター画像を編集することになります。私がPhotoshopを初めた頃は、編集のたびに画像が劣化する原因がわかりませんでした。今思えば、ラスター画像のことがわからず無駄にに拡大・縮小を繰り返していたからですね…

 

chips-1
chips

でも初心者にはありがちだと思います。

つい夢中になってしまうので!

気をつけましょう!

 

ラスター画像の特徴をまとめると、

 

・ピクセルと呼ばれる点の集合で画像などを表現する方式

・画像の細部に複雑で豊かな色彩表現ができる

・点の集合体なので、拡大すると画像が劣化していく。(荒くなる)。

・写真は基本ビットマップ形式で表現される。

・ブラシツールなどはラスター画像のレイヤーだけで使える

 

ベクター画像とは

 

ベクター画像とは複数の点(アンカー)と位置とそれを繋いだ線(セグメント)、色、などの情報を数値化して再現されるパスを使った画像です。ベクトル画像とも呼ばれます。

数値データなので描いたグラフィック自体はデータ量が小さく(軽く)変形などが容易にできますよ。

ピクセルなどの要素を使わずに、数学的な計算から数値を書き直すので解像度という概念がなく、画像を拡大・縮小しても劣化しない(荒くならない)です。

写真は点の集まりで表現されるので、ベクター画像では表現することが難しいですね。

またブラシツールなどはラスター画像のレイヤーでは使えません。

 

私の経験では、最初は写真を扱うことが多いと思うのでベクター画像は使うことは少ないかもしれません。Photoshopに少し慣れてきてIllustratorも使うようになるとよく使うようになりました。

 

chips-1
chips

ちょっと難しいかもですが、違いを覚えておくと他のソフトを使う時に便利ですよ。

 

 

 

ベクター画像の特徴をまとめると

 

・点と線の情報を数値化しコンピューターが再現、点と点を結ぶ線として表現されている

・点と線の情報をコンピューターが再現するので、拡大・縮小しても画像が劣化しない

・複雑な色や形の表現(階調表現)には適さない。写真はベクター画像で表現するのが難しい

・図形やロゴ、イラストの表現に適している

・ブラシツールなどはベクター画像のレイヤーでは使えない

 

私の体験では、Photoshopはラスター画像のレイヤーとベクター画像のレイヤーが混ざっているのがよく理解できませんでした。

「なぜこのレイヤーではブラシツールが使えないんだろう…」って思ってました。

 

ここでつまづくと楽しくなくなるので、とりあえず「写真はラスター画像、図形はベクター画像」は覚えておくようにしましょう。

 

画像のカラーモード

raster-and-vector-images-3

 

カラーモードとは色の表現方法(色情報の方式)のことです。

様々なカラーモードがありますが、大きく分けるとパソコンや、スマートフォンなどのディスプレイで表示されるRGBカラーと、パンフレットやチラシなどの印刷物で使用されるCMYKカラーがあります。

Photoshopではカラーモードはメニューバーの「イメージ」から「モード」で確認できますよ。

 

カラーモードの確認方法

メニューバー「イメージ」→「モード」

 

bitとは

 

モードの下部にあるbitは色情報の数を表しています。

「RGBカラー/8bit」の場合、8bitは2の8乗ですので、8bit=2の8乗の256色がRGBの各色に割り与えられるので、256色×256色×256色の1,670色扱えるということです。

16bit=2の16乗、32bit=2の32乗なので扱える色も増えますが、ほとんどのモニターは8bitまでしか表現されないので、基本的には8bitを選択します。

 

私の体験では、最初は数字がいっぱいあってよくわからなかったので、

「とりあえず8bitだな…」って思ってました。とくに問題はなかったですよ。

 

chips-1
chips

基本的には8bitで大丈夫です

 

カラープロファイルとは

 

カラープロファイルとは設定した色域の設定やカラーモードなどを画像をデータに組み込んで、正しく表示できるようにするためのプロファイルデータです。

カラープロファイルを組み込むには、書き出しウインドウ(各形式での保存時のダイヤログ)の下部にある「カラープロファイルの埋め込み」にチェックを入れましょう。

私の体験では、基本的にカラープロファイルは常に埋め込んでおくようにしておけば良いです。

 

カラープロファイルの埋め込み

書き出しウインドウ→「カラープロファイルの埋め込み」にチェック

 

RGBカラーとは

 

RGBカラーとは光の三原色のことです。

R(Red、赤)G(Green、緑)B(Blue、青)の3つの色の組み合わせで色を表現します。

「RGBカラー」は色を混ぜるほどに色が明るくなり白色に近づいていくので、「加法混色」と呼ばれています。

主にパソコンなどweb上で使用する色は「RGBカラー」で色が表現されています。

CMYKカラーとは

 

CMYKカラーとは色料の三原色のことです。

C(Cyan、シアン)、M(Magenta、マゼンタ/マジェンタ)Y(Yellow 、イエロー)の3つの色の組み合わせで色を表現します。

「CMYKカラー」は色を混ぜるほどに色が暗くなり理論上は黒色に近づくので、「減法混色」と呼ばれています。実際は灰色になってイメージするような黒色にはならないので、「K(Black、ブラック)を加えた4色で使用されています。

主に印刷物で使用する色は「CMYKカラー」で色が表現されています。

RGBカラーとCMYKカラーの違い

 

RGBカラーCMYKカラーでは再現できる色の領域(色空間・カラースペース)が違います。

そのためにRGBカラーで作成したデータを印刷すると再現できない色が出てきてしまい、再現できない色は別の色(CMYKカラーでの近似値)に置き換えられます。

その結果全体的にくすんだ色味になってしまいます。

印刷物のデータは「CMYKカラー」で作成しましょう。

 

私の体験では、難しいのであれば詳しい理屈はまだ覚えなくていいと思います。とりあえず「webはRGBで印刷物はCMYK」だけ覚えておけば大丈夫です。後から覚えることにして、まずはPhotoshopの使い方に慣れていきましょう!

まとめ

raster-and-vector-images-4

 

この記事をまとめると

・ラスター画像(ビットマップ画像)とは、ピクセルが集まって作られている画像。写真に適している

・ベクター画像(ベクトル画像)とは点・線などを数値化し再現される画像。図形などの表現に適する

カラーモードとはデジタル画像の色の表現方法(色情報の方式)のこと

bitは色情報の数、基本的には8bitを選択

カラープロファイルとは色域の設定などを組み込んで、正しく表示するプロファイルデータ

RGBカラーとは光の三原色のこと。主にweb上で使用される

CMYKカラーとは色料の三原色のこと。主に印刷物で使用される

RGBカラーCMYKカラーでは再現できる色の領域(色空間・カラースペース)が違う

 

Photoshopのラスター画像とベクター画像についてでした。

私の体験では初めは聞き慣れない用語でわかりにくかったので、

とりあえず「写真はラスター画像と図形はベクター画像」、「webはRGBで印刷物はCMYK」とだけ気をつけるといいと思います。

やり続けてると理解できるようになりました。初心者の方は継続して学んでいきましょう!

タイトルとURLをコピーしました