Illustrator&Photoshop基礎講座(CS6) 教材サンプルを見る

Chapter 1
画像データの
基礎知識
PREPARATION
Chapter1 で使用するフォルダー
◆本講座で使用するデータは、映像教材ページからダウンロードして下さい。
ダウンロードしたデータは、展開し、デスクトップに用意して下さい。
画像データの基礎知識
Chapter 1
ベクターデータとビットマップデータ
1-1
はじめに、コンピュータで扱う画像データについて学びます。目的に合わせて画像データの形式を的確に選択で
きるようにしましょう。
画像データには「ベクターデータ」と「ビットマップデータ」の 2 つのデータ形式があります。
映像教材「ベクターデータとビットマップデータ」をご覧下さい
■ベクターデータ
ベクターデータとは、作成する図形の形状を、「点」の位置とそれらをつなぐ「線」の曲がり具合の数値情
報で表したデータ形式です。
図形の形状だけでなく、線の太さや線で囲まれた面の色などの属性情報もあわせて持つことで、表現豊かな
グラフィックスを作成することができます。
主にベクターデータを作成するアプリケーションを、「ドロー系アプリケーション」と言います。
■ビットマップデータ
ビットマップデータとは、「ピクセル」という、コンピュータ画面で表示できる最小単位の色の集まりで表
されるデータ形式です。
ピクセル毎に、
「RGB」という表現方法による色の情報が与えられるため、自然階調（なだらかな色の変化）
のグラフィックス表現が得意です。
主にビットマップデータを作成するアプリケーションを、「ペイント系アプリケーション」と言います。
ベクターデータとビットマップデータの比較
画像の拡大・縮小
ベクターデータ
ビットマップデータ
数値情報で表されているため、拡大・
拡大・縮小・変形をすると、グラフィッ
縮小や変形をしても、劣化しない。
クス全体のピクセル数が変わってしま
い、画質の劣化が起きてしまう。
複製
向いている表現方法
ベクターデータで描かれた画像は複製
切り抜きや複製をする部分のピクセル
が容易で、色違いの画像も簡単に作成
を慎重に選択しなくてはならないため、
することができる。
手間がかかる。
ロゴ、シンボル、地図、イラスト、ア
写真のデータや、水彩調・油絵調な
イコンなど、形状と色が明確に区別で
どのフリーハンドで作画されたグラ
きるようなグラフィックス表現に向い
フィックスの表現に向いている。
ている。
主なソフトウェア
Adobe Illustrator
Adobe Photoshop
3
Section ●
Chapter
1
●●●●●●●●●●
画像データの基礎知識
ベクターデータとビットマップデータ　拡大時の比較
ベクターデータ
ビットマップデータ
標準時
拡大時 (600%)
※顔の部分を一部拡大
1-2
様々な画像フォーマット
画像データを保存する際は、「ファイルフォーマット」を指定します。
画像ファイルに対して使用されるファイルフォーマットには様々な種類があります。中でも、Web 制作時に使
用される代表的な画像フォーマットには、以下のようなものがあります。
映像教材「様々な画像フォーマット」をご覧下さい
■ AI 形式
Adobe Illustrator 形式で、拡張子は「.ai」となります。主に Illustrator で作成したグラフィックスを保存する、
標準の形式です。
Illustrator を使って作画や編集をするための様々な情報が含まれているため、そのまま Web ページに表示す
ることはできません。
■ PSD 形式
Adobe Photoshop 形式で、拡張子は「.psd」となります。主に Photoshop で作成したグラフィックスを保
存する、標準の形式です。Photoshop を使って作画や編集をするための様々な情報が含まれているため、そ
のまま Web ページに表示することはできません。
4
画像データの基礎知識
画像データの基礎知識
●●●●●●●●
Section
Chapter●
1
■ PNG 形式
ビットマップ形式の画像フォーマットで、拡張子は「.png」となります。Web ページに最適な形式の一つです。
主に 24 ビット ( 約 1,677 万色 ) の RGB 情報による表現豊かな形式で用いられることが多く、また、後述の
GIF 形式や JPEG 形式と比較し、アルファチャンネル ( 不透明度 ) の情報を含めた「透過 PNG」として用いら
れることが特長的です。
透過 PNG を使用すると、画像の情報に「不透明度」を加えることができるため、
「画像の下が透けて見える」
ような Web デザインを行なうことができます。
これまでは、一部の古いブラウザでは透過 PNG の対応が遅れていることが懸念となり、積極的な利用がさ
れていませんでしたが、現在では積極的に使用されるようになってきました。
＜ Column: 画像を表現する色の数＞
コンピュータで画像の色数を表現するときには、
「ビット」という単位を使用します。「ビット」とは、
コンピュータが扱う最小の単位で、
「0」または「1」で表現されます。例えば、
「1 ビット」の場合は「0」
「1」のどちらかとなり、ピクセルに設定できる色としては「2 色」となります。「2 ビット」では、
「00」
「01」
「10」「11」の 4 パターンが考えられるため、「4 色」となります。
代表的なビット数には、「8 ビット」( ＝ 256 色 )、「24 ビット」( ＝約 1,677 万色 ) があります。
＜ Column：RGB とは＞
コンピュータやテレビなどのモニタに色を表示する
RED
場合には、黒いモニタ画面に光を当てることによっ
て色を表現します。暗いステージにライトで色のつ
magenta
いた光を当てて、その光の組み合わせで色を作る
イメージです。右図のように、R(Red)・G(Green)・
B(Blue) の 3 つの光 ( 光の３原色 ) の組み合わせによっ
て色が作られます。例えば R と G の 2 つの光が重なっ
Yellow
White
BLUE
Cyan
GREEN
た部分は、黄色になります。3 つの光がすべて重なっ
た状態が、白になります。
映像教材「RGB とは」をご覧下さい
■ JPEG 形式
ビットマップ形式の画像フォーマットで、拡張子は「.jpg」または「.jpeg」となります。Web ページに最適
な形式の一つです。PNG と同様、主に 24 ビットの色を扱うことができます。
Web 用に適したビットマップ形式は、データサイズを押さえるために「圧縮」という処理が行われていま
す。特に JPEG の圧縮形式は、写真などの自然な諧調表現のデータに使われることが多く、デジタルカメラも、
写真を JPEG 形式で保存するものが主流となっています。
この圧縮には「圧縮率」というものがあります。圧縮率をあげるとデータ量は少なく ( 軽く ) なりますが、
5

Download Report