1/2

　　　 画像編集（１）

１　コンピュータ内の色の表現方法

コンピュータ上で画像の情報はどのように扱われているのであろうか？Windows ＸＰの環境で動作するパソコンを例に調べてみよう。｢マイコンピュータ｣⇒｢コントロールパネル｣⇒｢画面｣の順にアイコンを選択すると、以下のようなウィンドウが表示されるので、｢設定｣の項目を選択する。このウィンドウの下の部分に、｢画面の色｣と｢画面の解像度｣を設定するためのメニューが表示されている。

画面の解像度が1024Χ768ピクセルと表示されていることの意味は、｢画像の濃淡や色を与える最小単位の点（＝ピクセル(pixel)：画素とも呼ぶ）の個数が水平方向に1024個、垂直方向に768個存在する｣ということになる。

上記の｢画面のプロパティ｣ウィンドウにおいて、画面の色メニューから「中(16ビット)」を選択すると、画面上で表現できる色の個数は変化する。ディスプレイの表示能力は、ピクセル数が多いほど、そして表現できる色の個数が多いほど高い。

主なディスプレイでの画面の解像度には次のようなものがある。

名称	解像度
VGA	640 x 480
SVGA	800 x 600
XGA	1024 x 768
SXGA	1280 x 1024
UXGA	1600 x 1200

　　　　　　　　　　　　　　　　　　　**************************************

２　　　RGBカラーとCMYKカラー

ＲＧＢカラー：　

色を数値の組合わせで表す方式をカラーモデルと呼び、RGBカラーは、光の３原色に基づいたカラーモデルを採用している。光の３原色とは、赤(Red)、緑(Green),青（Blue）の３種類で、RGBはこれらの色の英語名の頭文字を取ったものである。それぞれの色の明るさを０から255までの数値で表現した場合、３つの色の組合わせで表現できる色は16,777,216(=256Χ256Χ256)種類ある。

３原色の組合わせで、下図のような色が作られる。赤と青でマゼンタ、赤と緑で黄色、青と緑でシアン、そして赤と緑と青で白が作られる。色を混ぜるごとに明るさが増して白に近づき、これを｢加法混色｣と呼ぶ。

カラーテレビ、コンピュータのCRTモニタ、劇場用のカラースポットライトでは、｢加法混色｣の原理によって色が作られている。

CMYKカラー：

CMYKカラーは、シアン(Cyan:青緑)、マゼンタ(Magenta:赤紫)、黄色(Yellow)を３原色とし、これらに黒(BlacK)を加えた４色から構成される。色を混ぜるごとに明るさが減少して黒に近づき、これを｢減法混色｣と呼ぶ。カラープリンタはこの原理で発色している。

CMYKカラーは、カラー印刷に使われる４色のインキの濃度で色を表しているので、印刷用画像に適したモードである。CMYを組合わせると原理上は黒になるが、現実には完全な黒は得にくいために、印刷する場合には黒インキ（K）を使う。CMYKカラーの色域（しきいき：利用できる色の範囲）はRGBよりも狭いので、ディスプレイ画面上では表現できても、印刷の出来ない色がある。　　　　　　　

　　　　　　　　　　　　　　　　　　　　　*********************************

３　色の数値表現

コンピュータの画面上で表現される色の種類はTrue Colorモードでは約１６７０万色が表現できる。具体的には、ＲＧＢそれぞれの輝度が０～２５５までの数値で表現され、０が最も暗く、２５５が最も明るい場合である。

ＲＧＢそれぞれの値が０～２５５の値を取るので、ＲＧＢを組み合わせた場合には

　　　　　　　　　　　２５６　×　２５６　×　２５６　＝　１６７７７２１６

通りの色を表現することが可能となる。

以下の図はＰｈｏｔｏｓｈｏｐで色を指定するためのカラーピッカ－である。図中で『輝度の数値表現』と書かれた部分に着目しよう。

　　　　　　　　　　Ｒ：１７９、　Ｇ：９５、　Ｂ：１９１

はＲＧＢの輝度の値を示している。この場合には、ＲとＢの割合が高くなっている。

さて、『Ｂ３５ＦＢＦ』は何を意味するのだろうか？これは、上記のＲＧＢの輝度を１６進数で表したものである。まず、記号を２個ずつ区切って『Ｂ３』、『５Ｆ』、『ＢＦ』とする。ここで、１０進数と２進数、１６進数との関係の復習をしておく。

１０進数	２進数	１６進数
０	００００	０
１	０００１	１
２	００１０	２
３	００１１	３
４	０１００	４
５	０１０１	５
６	０１１０	６
７	０１１１	７
８	１０００	８
９	１００１	９
１０	１０１０	Ａ
１１	１０１１	Ｂ
１２	１１００	Ｃ
１３	１１０１	Ｄ
１４	１１１０	Ｅ
１５	１１１１	Ｆ

１６進数の１桁の数は０からＦまでの記号を用いて表現される。１６進数で２桁の数を１０進数に置きかえるための計算は、それぞれの桁の数を１０進数に置き換えて、

　　　　　　　　　　　　　　　　２桁目の数　×　１６　　＋　１桁目の数

である。『Ｂ３』、『５Ｆ』、『ＢＦ』のそれぞれを、この式にあてはめて計算してみよう。

　　　　　　　　　　Ｂ３　：　　　１１×１６＋３　＝　１７９

　　　　　　　　　　５Ｆ　：　　　５×１６＋１５　＝　９５

　　　　　　　　　　ＢＦ　：　　１１×１６＋１５　＝　１９１

この結果は、最初に１０進数で表した

　　　　　　　　　　　　Ｒ：１７９、　Ｇ：９５、　Ｂ：１９１

と一致していることがわかる。

*******************************************************

４．　Photoshopを用いた画像加工

Photoshopはデジタル画像を編集するためのグラフィックソフトで、その機能と操作性の良さから事実上の業界標準のソフトとも呼ばれている。画像の切りぬきや合成、テクスチャの作成をはじめとして、その用途は幅広い。この操作解説では、使用例を示しながら、いろいろな機能に習熟していくことを目的とする。以下ではPhotosop6.0を使って作業を行っていく。

４－１

　Photoshopの起動

Photoshop6.0のアイコンをクリックするか、あるいは、スタートメニューから「すべてのプログラム」→「Adobe　Photoshop　Elements」を選択して起動する。

起動画面が表示されたら、「編集」を選択する。

「ファイル」→「開く」を選択し、編集する画像が入っているフォルダを指定する。

画像のデータは、それを作成するソフトや、画像の利用目的によって、いろいろなファイル形式で保存される。以下の例は、Photoshopで練習用の画像データを開く場合である。｢ファイル名｣の下の｢ファイルの種類｣にＪＰＥＧ(*.JPG、*.JPEG、*.JPE)と表示されており、このＪＰＥＧがファイル形式（の１つ）を示している。ここで選択されているファイルは、正確には拡張子（かくちょうし）ｊｐｇを付けて

　　　　　　　　　　　　　　PIV027.JPG

という名前で保存されている。拡張子から、そのファイルを作成したアプリケーションや、データの表現形式などがわかるようになっている。（拡張子は大文字、小文字のいずれかで表示される）

同じフォルダ内のファイルに対して、ファイルの種類をＢＭＰと指定すると、ファイル名が表示されなくなる。これは、フォルダ内に存在するものとは、ファイルの形式が異なるからである（もちろん、拡張子も異なる）。

ファイル：　コンピュータの内部で情報処理を行なうときのデータの集まり。

画像を扱うソフトで一般的に使われるファイル形式は次の通りである。

①　ＰＳＤ形式：

Photoshop専用のファイル形式。

②　ＥＰＳ（Ｅｎｃａｐｓｕｌａｔｅｄ　ＰｏｓｔＳｃｒｉｐｔ）：

PostScript言語を使ったグラフィックスファイルのファイル形式。PostScript言語による記述部分と、プレビュー画像用のＴＩＦＦやＰＩＣＴデータとの組合せでできている。ＰｏｓｔＳｃｒｉｐｔ対応のＤＴＰソフトなどで画像データを使用するときの標準的なフォーマット。

③　ＴＩＦＦ（Ｔａｇ　Ｉｍａｇｅ　Ｆｉｌｅ　Ｆｏｒｍａｔ：ティフと読む）

ＤＴＰ（デスクトップパブリッシング：Ｄｅｓｋｔｏｐ　Ｐｕｂｌｉｓｈｉｎｇ）やそれに関連する分野のソフトウェアで広く使われている方式。異なるシステム間でビットマップ画像のやりとりをするときによく使われる。モノクロとグレースケール、８ビットと２４ビットのカラーに対応。

④　ＧＩＦ（Ｇｒａｐｈｉｃｓ　Ｉｎｔｅｒｃｈａｎｇｅ　Ｆｏｒｍａｔ: ：ジフと読む）

コンピュータネットワークのＣｏｍｐｕｓｅｒｖｅで広く使われ、広まった画像フォーマット。さまざまな機種で表示できるように解像度や色数などのデータを持ち、主にインターネットの表示画像に使われる。アニメーションや透明色を使えるメリットがある反面、使用できる色数が２５６という制限がある。

⑤　ＢＭＰ/ＤＩＢ（Ｍｉｃｒｏｓｏｆｔ　Ｗｉｎｄｏｗｓ　Ｄｅｖｉｃｅ　Ｉｎｄｅｐｅｎｄｅｎｔ　Ｂｉｔｍａｐ）

Ｍｉｃｒｏｓｏｆｔ社のＷｉｎｄｏｗｓで使われているビットマップデータ。画素ごとに割り当てるデータ量は１，４，８，２４ビットの４種類。

⑥　ＪＰＥＧ（Ｊｏｉｎｔ　Ｐｈｏｔｏｇｒａｐｈｉｃ　Ｅｘｐｅｒｔｓ　Ｇｒｏｕｐ：ジェイペグと読む）

高い圧縮率のビットマップデータ方式。ＪＰＥＧはこれを制定した組織の名称。この圧縮方法は、人間の視覚の特性を考慮しており、【圧縮によって生じる画像の劣化が目立ちにくい】という特性を持つので、写真のような画像の記録に適している。

⑦　ＤＸＦ（Ｄｒａｗｉｎｇ　Ｉｎｔｅｒｃｈａｎｇｅ　Ｆｏｒｍａｔ）

２次元および３次元の線や、面、それらの色や属性も記述対象とし、ＣＡＤ（Ｃｏｍｐｕｔｅｒ　Ａｉｄｅｄ　Ｄｅｓｉｇｎ）やＣＧのデータとして広く使われている。

　　　　　　　*********************************************************

ＰＳＤ形式のデータをＪＰＥＧ形式で保存

Photoshopで加工した画像をＪＰＥＧ形式で保存してみよう。Ｐｈｏｔｏｓｈｏｐ専用のファイル形式であるＰＳＤ形式の画像を作るために、画像(PMG026)を読みこみ、「ファイル」→｢別名で保存｣を選択する。

下図のように、拡張子を画像読み込み時のＪＰＧから、ＰＳＤに変更する。

変更の結果、以下のように、ファイル名の拡張子が｢.psd ｣に変化したことを確認して｢保存｣を選択する。

次のようなメッセージが表示されたら「OK」を選択する。

ファイルがＰＳＤ形式で保存されたことを確認するために、この画像ファイルのアイコンを｢右クリック｣して、｢プロパティ｣を選択しよう。

図のように、Photoshopの画像であることの表示と、そのファイルサイズなどが表示される。

次に、この画像をPhotoshopで簡単な加工を行った後に保存する。まず、「ウィンドウ」メニューから「レイヤー」を選択するとレイヤーパレットが表示される。（レイヤーパレットが最初から表示されている場合もある。また、このパレットをクリック＆ドラッグすると分離して使うこともできる。）

このレイヤーパレットで「新規レイヤーを作成」を選択する。

この結果、次のように「レイヤー１」と書かれた新しいレイヤーが作られる。（レイヤーについての詳しい説明はここでは行わない。）

レイヤーパレットの目のアイコンをクリックすると、その表示が消え、背景レイヤーが「非表示」になる。

次に、ツールボックスから「横書き文字ツール」を選択し、新しく作ったレイヤー上で次のように入力する。文字サイズなどの指定はタスクバー上で行うことができる。

作図ウィンドウとレイヤーの表示は次のようになる。

背景レイヤーを「表示」に切り換える。背景レイヤーの画像の上に文字が表示されたことがわかる。

このように、Ｐｈｏｔｏｓｈｏｐでは画像の加工をレイヤーごとに行なえるので、元画像に影響を与えずにいろいろな効果を適用することができるが、ＪＰＥＧなどに変換する際には、レイヤーに分かれていない｢１枚の画像｣にしなくてはならない。このような場合、レイヤーパレット右上隅の▲記号をクリックして、｢画像を結合｣を選択する。

この結果、下図に示すように、これまで２つのレイヤーに分けて扱われていた情報が１枚の画像に統合される。

この統合された画像をＪＰＥＧ形式で保存する。｢ファイル｣⇒｢別名で保存｣を選択し、ファイル形式にＪＰＥＧを指定する。新しいファイル名を「cats」とする。

この結果、｢ＪＰＥＧオプション｣ウィンドウが表示されるので、以下のような設定で保存してみよう。｢画質｣指定の数字（ここでは５としている）は、その値が小さいほど画像が粗くなることを意味する。

｢形式オプション｣は、Ｗｅｂページ上での表示方法を示し、｢ベースライン｣は画像の上端から徐々に全体が表示され、｢プログレッシブ｣は画像全体が徐々に鮮明に表示される。

　　　　　　　　　　　　　　　*******************************************

４－２　　画像の解像度設定：

以下の画像（画像ファイル名：Piv027）を用いて解像度設定を行なう。

解像度とは、画像の１単位の長さに表示されるピクセル数を意味する。通常は１インチ（長さの単位：１インチ=2.54cm）を１単位の長さとして用いることが多く、１インチの中に150ピクセルが存在すれば、

　　　　　　　　　１５０　[ pixels / inch ]

と記す。これ以外に、解像度を表す単位として、dpi[ dots per inch ]が使われることが多いが、dots（ドット：画像を構成する点）はpixels（ピクセル）と同じ意味を持つ。

「イメージ」→「サイズ変更」→「画像解像度」を選択する。

｢画像解像度｣ウィンドウは以下のようになっている。｢ピクセル寸法｣は画面上での解像度、｢ドキュメントのサイズ｣は印刷時の解像度を表す。

ここで使用する画像の、画面上での解像度を表す｢ピクセル寸法｣は幅が383ピクセル、高さが269ピクセルであるので、全体では画像中に383Χ269=103,027ピクセルが存在する。画像サイズを変更するには、変更後のサイズを直接指定するか、あるいは、現在の画像サイズに対する割合（％）を指定する。

ここでは、幅を「50％」に指定してみよう。設定枠の右側にが表示されていると、幅と高さのいずれか一方のピクセル寸法を変更すると、両者の比を保ったままで他方も連動して変更される。「画像の再サンプル」にチェックを入れ、幅を５０％にする。

画像の変化は下図の通りである。縦と横のピクセル数がそれぞれ半分になった画像が得られる。

上記の例の場合には、幅と高さのピクセル数が連動して変化したが、｢縦横比を固定｣のチェックをはずすと、の表示がなくなり、それぞれを独立させて変更することができる。

　　　　　　　　　　*****************************************************

４－３　　画像の補間：

次のような簡単な実験を行なってみよう。まず、ピクセル寸法を20％に変更して画像を縮小する。そして、今度は縮小画像のピクセル数を500％にして、画像をもとのサイズにもどす。この結果、図に示すように｢ぼやけた｣画像が得られる。

拡大時に画像がぼやけた理由を考えてみよう。例として、以下のように３個の異なった色（RGB値）を持つピクセルからなる画像があり、この画像のピクセル値を３ピクセルから、５ピクセルに変更したと仮定しよう。このような｢拡大された｣画像を作る１つの方法は、変更後の画像の両端と中央のピクセルに関しては、もとの画像のピクセルの色を使うことであるが、残る２個のピクセルの色をどのように決めるかという問題が残る。