コンピュータグラフィックスの基礎（二次元編）
「コンピュータグラフィックス」とは、いわゆる「ＣＧ」のことです。
ゲームでは３Ｄ（3-Dimension、三次元、立体表現の可能なグラフィックス）が標準のようになってきましたが、個人で描くものはむしろ２Ｄ（2-Dimension、二次元、平面グラフィックス）が中心です。
２Ｄ−ＣＧの一番手軽な点は、それを描くためのツールが豊富にあることと、「お絵かき」感覚でＣＧが描けることにあります。
もちろん、上手く描こうと思ったら、それなりの道具やテクニックが必要です。
そこでここでは、とりあえず２Ｄ−ＣＧを描けるようになりましょう的なことを解説していきます。
ただし、ここを読んだからすぐ上手く描けるようになる、というものではありませんし、上手くなるには執念と根性が必要です。気合は特に要りません(笑)。
どうしても上手くなりたいと願い、努力した人だけが、上手くなれるのです。
また、絵は感性の世界ですから、技術があるからといって評価されるとは限りません。「上手い」と言われることはあるでしょうが、そこから先のプラスαは、個人の感性のみが問われます。
その部分は、他人から教えられてどうこうできるものではありませんので、ここでは触れません。各自で磨いてください。
１. ＣＧの基礎
ＣＧとは、点の集まりです。
パソコンのディスプレイに表示されているＣＧを拡大すると、「ドット」という四角い点の集まりであることが解ります。これは、どんなＣＧでも同じです。
これは、パソコンが画面の表示を、こういう小さな四角いエリアごとに分割して表示しているからです。
この表示は通常のテレビとは違い、パソコン（やゲーム機）独特のものです（最近はテレビもデジタル化が進み、同じ表示方式を取るようになっていますが、アナログ放送のものは違います）。
これが顕著に解るのは、パソコンが起動した直後の画面に並ぶ「アイコン」を見ればよく解ると思います。アイコンは小さなエリアに絵を表示するため、「ドット絵」という方法で絵を作っています。
このドット絵というのは、ファミコン以前から使われていたゲーム機向けのグラフィックス技術で、最初のテレビゲームである「テニス」が最も初期のグラフィックです（といっても、あれはボールとラケットだけの「四角」だけでしたが）。
インベーダーあたりからこれは有名になり、このドットで描かれたキャラクターを動かしてゲームを創る手法は、極めて一般的になりました。
現在よく見かけるところでは、ネット上の小さな「ＧＩＦアニメーションＣＧ」が、そのドット絵を継承しています。
現在、通常みられるネット上のＣＧ作家の多くは、こういった２Ｄグラフィック作家で、その作品は全て「ドットの集合体」です。
ただ、現在はそのドットを意識して描くことはあまり多くはありません。
（本当の意味での）ドット絵は、色数が少なく、画面の解像度が大きくない時代の技術ですので、現在のような高解像度、フルカラー、ハイスペックマシンが当たり前の時代では、特に必要ないともいえます。
しかし、今でもこのドット絵アニメーションはあちこちで見られ、ホームページの効果的な画面構成の一部としてあちこちで使用されています。
さて、それはさておき、ＣＧを描くにはグラフィックツール（お絵かきソフト）が必要です。これとマウスがあれば、とりあえずお絵かきは出来ますが、漫画的な本格的なＣＧを描くなら、ペン入力システムであるタブレット、原画をパソコンに取り込むためのスキャナ、紙に出力する必要があるならプリンタも必要となります。
２. グラフィックツール
グラフィックツールとは、ＣＧを描くために必要なデータを作成・保存するためのお絵かきソフト、ＣＧソフトのことです。
とりあえず、有名なソフトを挙げてみましょう。
・Photoshop（Windows/Mac）
プロのイラストレーターやデザイナー、印刷関係でもほとんど全てが使っている、プロからアマチュアまでよく知られたフォトレタッチツール。
ただし、メチャクチャ高い（実売10万円近く）ことでも有名。最近は、ハードウェアの付属ツールとして安価なバージョン（数千円）もある。
フォトレタッチツールとその名前が示すとおり、元々は写真修正のために開発された。そのため、メニューには写真用語があちこちにちりばめられている。
日本では、デザインや印刷の現場の他、ＣＧイラストレーションや漫画作成のツールとしても使われている。アメリカ人も、まさかこれが漫画を描くのに使われるとは思ってもいなかっただろう(笑)。
・Painter（Windows/Mac）
Photoshopと並んでよく知られた、絵画エミュレーションを目的としたペイントツール。
こちらは純粋に絵描きのためのツールなので、色を塗る機能においては、Photoshopよりも上である。
ただ、決して安くはなく（約５万円）、しかもインターフェースがかなり難解で、マニュアルを見ただけでは使い方が解らないぐらい使いにくい。使い方を知っている誰かに教えてもらわないと解らないほど、使いづらいことこの上ない。
Photoshopとこれを併用してカラーイラストを描くＣＧ作家は少なくない。
こちらにも、ハード付属の安価版がある。
・GIMP（Unix/Windows）
UNIX上で使われてきた、フリーのグラフィックツール。Windows版もある。
フリーな割に高機能で、ＣＧだけならPhotoshopの替わりに使えるほどの機能がある。
完全に無料なので、ネットで拾ってくれば好きに使うことが出来る。
ただし、ユーザー数が少ないので、使い方は自分で極めるしかない。
・PaintShopPro（Windows）
安価（１万円を切る）で多機能を使えるツール。元々画像コンバータだったので、対応する画像形式も多い。
が、使いにくい……インターフェースの変な癖が強く、慣れるまで時間がかかりそう。
PhotoshopやPainterを使っている場合には特に必要ない。
その他、フリーソフトでも色々フルカラーを扱えるツールはありますので、Vectorとかのフリーソフト登録サイトや雑誌付録などで色々探してみるといいでしょう。
３. ＣＧ画像の形式（画像フォーマット）
ＣＧの画像形式（フォーマット）には、非常に多数の種類があります。
これは、各ツールにおいて必ず独自形式が存在するのと、それ以外にハードで標準の形式や、ネット標準形式があったりと、目的や使われる場所によって、最適な形式があり、それぞれがその場では最も多く使われるからです。
例えば、印刷の世界では、EPS、TIFF、PSDなどがよく使われますが、ネットの世界ではjpeg、gif、pngが主流です。WindowsではBMP、MacではPICTなど、ハード標準形式もあります。
どのフォーマットにも特徴があり、メリット・デメリットがあります。
有名なところを一部取り上げて説明しましょう。
・jpeg
「ジェイペグ」と読む。本来は「JFIF」がフォーマット名で、jpegとはこの形式を策定したグループの名称である。これの動画版が「mpeg（エムペグ）」で、DVDソフトの映像データ、DVDレコーダなどデジタルレコーダで標準的に使われている。
フルカラー（1677万色）の静止画像を表示可能。
写真など、自然画像を表示/圧縮するのに適した形式で、圧縮率が高いのが特徴。ただし、元画像からデータを間引いて高い圧縮率を実現しているため、オリジナル画像より画質が悪くなってしまう。圧縮率を高くすると、色の変わり目や平面的な色の部分にノイズが発生するので、オリジナルの画質を完全保持したい場合には選択してはいけない。
画質を落とす分、サイズも劇的に小さくなるので、主にネット画像で使われる。その他、デジカメの形式としても使われる。
2000年には「Jpeg2000」という形式が策定されたが、下位互換性が完全ではないため、あまり普及はしていない。
動画版には、mpegの他にモーションjpegという形式もある。
・gif
「ジフ」もしくは「ギフ」と呼ぶ。ネットではアニメーション画像として知られる形式。
元はアメリカのパソコン通信大手「Compuserve」で開発された形式で、最大256色の動画/静止画をサポートする。
圧縮形式は完全可逆圧縮で、データを完全に保持する。そのため、サイズを小さくするべく、最大色数が256色となった。
最大の特徴は、アニメーション形式と透明機能が使えること。アニメーションする画像を内包し、動画を再現でき、また一色を選んで透明表示させることができるため、アニメーションアイコンなどによく使われる。
2004年までは、このフォーマットの圧縮に使われたLZW圧縮という技術が特許侵害であるとされ、フリーツールが一斉にこのサポートをしなくなったが、特許が切れたので再びフリーで使われるようになった。
・png
「ピング」（もしくは「ピーエヌジー」）と呼ばれる。
48ビットまでのカラーを扱え、可逆圧縮方式を利用しているため、色は完全に保存される。ネット上の全ての画像を保存可能な形式。
Gifが特許侵害で使いにくくなった頃、後継フォーマットとして注目されたが、アニメーション機能がないことがその普及を阻み、結局はネット上ではjpegのデータを保持したい場合の予備フォーマット、もしくはBMP画像をネットで表示する場合などに変換して使われている。
・BMP
「ビー・エム・ピー」もしくは「ビットマップ」と呼ばれる。
IBM-PC時代からのWindows標準画像形式で、メモリに入っているＲＧＢデータを取り出してそのまま並べただけのベタ形式。そのため、色は完全に保存されるが、圧縮されてないためファイルサイズが膨大になる。
Windowsが標準で扱えることと、プログラムツールでBMPの読み込み・書き出し機能が簡単に実装できることから、使われる機会は多い。ただ、デカいのですぐ圧縮されるｗ
・psd
ピー・エス・ディーという、Photoshopデータ形式。可逆圧縮形式なので、そこそこ小さくなる。
印刷の世界では業界標準フォーマットの一つである。
内部にレイヤー、パス、アルファチャンネルなどの様々なデータを保持できる。これを読み込めるツールはかなり多いので、かなり便利とも言える。
・EPS
Enhanced PostScriptという、プリンタ用言語形式。印刷データそのものであるため、現在ではほぼ全てのプリンタで印刷できる形式である。
印刷用に最適化されているので、印刷業界では業界標準の一つ。
・TIFF
「ティフ」「ティーアイエフエフ」などと呼ばれる、印刷向けのフォーマット。「Tagged Image File Format」の略。AldusとMSの共同開発フォーマット。
内部に解像度、色数、符号化方法など様々な情報を自由に格納でき、マシンやOS、ソフトに依存しないため、印刷業界でも使われた。
ただし、あまりに自由度が高かったため、マイナーフォーマットが多数出回り、Tiffという名前でありながら読めないという事態もあった。
今では多く使われるフォーマット自体が限られてきたので、全く読めないということは少なくなったが、古いTiffだと解らない。
４. 道具
CGを描くにあたり、必要であろう道具はいくつかあるが、何もなくてもマウスさえあれば描けないことはありません。ただ、機能が十分生かせないだけです。
そこで、タブレットという、ペンデバイスをマウス代わりに使用して、手描き感覚で描くようにすると、かなり高度なものが楽に描けるようになります。
筆圧対応という機能も昨今のソフトでは搭載され、タブレットへの標準対応は当たり前になってきているようです。
タブレットといえば、今はもうほとんどワコムの独壇場ですが、安いタブレットでは色々種類があるようです。
安価なものでは使用感はあまり変わらないと思いますが、出来るだけ高性能なものの方がいいでしょう。
５. ディスプレイ
さて、CGを描くにあたり、ディスプレイの存在は非常に重要です。
見るだけなら何でもいいのですが、描くとなると話は別です。
発色精度から言えば、今のところブラウン管ディスプレイに勝るディスプレイはありません。
近年、液晶ディスプレイが普通に使われるようになりましたが、液晶ディスプレイの最大発色数は26万色程度、見た目は十分でも、フルカラーCGを描く際の色の判別は、ブラウン管でははっきりわかってしまいますし、他のディスプレイで見た時の色の差が、液晶では判別できません。
モノクロだけなら液晶でいいのですが、フルカラーを多く扱うのでしたら、ブラウン管モニタは欠かせません。
液晶だけでフルカラーを描いた場合でも、、確認だけはブラウン管モニタですべきでしょう。
16色とか256色とか4096色とか、最大色数の少ないCGの場合なら、液晶でも十分ですが、今時そんな色数で描けるのかどうかｗ
６. スキャン
CGというのは、何も描くだけではありません。
紙原画を取り込んだり、写真加工のために写真を取り込んだりする場合もあります。
そういうことをしたいのなら、スキャナが必要です。
スキャナはEpsonとCanonの二社がほとんどですが、A4サイズまでなら、一万円程度の安価なものですら、無駄に高性能といえますｗ
プリンタの性能が格段に進化するのに合わせて、スキャナの性能も格段に上がったため、安いスキャナでも、３年前の高級機なみの性能を備えるようになりました。
ただし、取り込むには多少テクニックが必要です。
鉛筆画をスキャンすると、普通はゴミを沢山拾います。ただ取り込むと、全体に薄い灰色がかかった画像しか取り込めないことが多いのですが、これはスキャンレベルの調整を行わなければなりません。
できるだけ薄い色を拾わず、濃い色だけを拾うようにスキャンレベルを調整すれば、線の部分だけを綺麗に拾うことが出来ます。
ただ、調整方法はスキャナや取り込むツールによって違うので、それぞれのツールのやり方を調べておく必要があります。
通常はヒストグラム調整など、ややこしい部分をいじくらねばなりませんが……とりあえずここでは触れません。基礎じゃありませんので。
７. 線を描く
線をずずーいとマウスかタブレットで画面の上に好きなように引いといたらええんです。以上。
……では話になりませんのでｗ、多少解説を。
線を描くにあたり、その線の描き方は各自の努力目標ですが、「線の選択」は考えなくてはなりません。
線を描くに当たり、実はその「ペンツール」がいろいろあります。
ペンのような書き味を出す「ペンツール」、エッジをくっきりと出す「鉛筆ツール」、エアブラシと同じ感じになる「ブラシツール」が、大体どのペイントツールにもついている線画ツールです。
その太さや濃度を調節して、色々な線を描くことができます。
ブラシでぼかしを手描きで表現したい場合、ブラシの太さを太くして、濃度を数％程度に下げて、何度も何度も重ね塗りすれば、思うとおりのグラデーションが楽に実現できます。
昔のドット絵時代には、「鉛筆ツール」しかありませんでした。太くすると、巨大な四角いドットが描かれるような具合で、滑らかに見える線を描くために、自分でアンチエイリアシング（線のギザギザを薄い色で滑らかにする方法）を線の周囲にぽちぽちぽちぽちと施さなければなりませんでした。まーヂゴクですねｗ
それを自動的にやってくれるのが、ペンツールやブラシツールなわけです。
なので、今では滑らかな線を描くのにわざわざドットでぽちぽち補完する必要はありません。
ただ、滑らかな線がいいとは限りません。
ある程度のエリアを一気に塗りつぶしたい、と思ったときには、どうしますか？
範囲指定をして、「塗りつぶしツール」で一気に塗りつぶしますか？
それもいいでしょうが、２ＤＣＧでは、「鉛筆ツール」で端を描いて閉じておいて、中を一気に塗りつぶすのです。特にベタ色の多い２ＤＣＧは、範囲指定だと少しでも失敗するとやり直しが必要になりますし、範囲が大きいとなかなか正確に指定できません。そこで、「塗り」で範囲を指定して塗りつぶす方法をとるのです。
この方法では、ペンツールやブラシツールをつかうと、線と塗りつぶしエリアとの間にアンチエイリアスで出来た（中間色の）隙間ができるので、そこを修正する手間がかかります。エッジを完全にドットで区切る鉛筆ツールでなくては出来ない小技です。
まあ、こういった描き方は、いろいろ試行錯誤しながら自分で覚えていくもんですけどね。
大体はちょっと使っていけば判るようになります。
８. 色を塗る
好きな色を選んで、好きなブラシでばっしばし色をつけてください。以上。
……では解説になりませんので、再びちょと説明を。
色の感覚は個人個人で違いますので、そこらは各自で選んでいただくとして。
色の決め方には、大きく二つあります。
ＲＧＢとＣＭＹＫです。
RGBは、コンピュータのディスプレイ上での色の出し方で、コンピュータ内部でもこの形式です。
Rは赤(Red)、Gは緑(Green)、Bは青(Blue)を示します。この三色の混合比率で、フルカラー：約1677万色を表現します。これは別名「光の三原色」といい、太陽光も同じように表現されます。
一方CMYKとは、紙の印刷で使われる色の表現です。Cはシアン（青）、Mはマゼンタ（赤）、Yはイエロー（黄色）、Kは黒を示します。これを重ねて、色を表現します。
この二つの大きな違いは、発光色（RGB）と吸光色（CMYK）という違いです。
ディスプレイ上では、ディスプレイの発生する電子線で画面が「発光して」色を表現します。そのため、コンピュータで使われるRGBの色表現は「発光色」と呼ばれます。太陽が出す光と同じことで、色自体が光そのものです。
対してCMYKは、紙に一度反射した光での発色です。つまり、紙の上で一度一部成分が吸収された光という意味で、吸光色と呼ばれます。
この大きな違いは、色を重ねるとはっきりわかります。
RGBは、全ての色を最高濃度にすると「白」になりますが、CMYKでは全ての色を重ねると「黒」になってしまいます。
当然のことながら、RGB←→CMYKの色変換をすると、そこに色ズレが生じます。その調整は、変換後に行わなければなりません。
基本的には、コンピュータグラフィックスでは「RGB」を使います。
ディスプレイの上で見るだけでなら、紙の上でどう色が出るか考える必要はなく、CMYKは考える必要はありません。
ただし、最終的に印刷することを考えて塗るなら、CMYKで最初から塗った方がいいかもしれません。
まあ、普通はRGBで色を考えて選んでおけばいいでしょう。
普通は「カラーピッカー」という色パレットがあって、そこから色を選んで抜き出せますので、数値で色を考える必要はないでしょう。
９. 拡大・縮小
適当な大きさに大きくしたり小さくしてください。以上。
……てなわけにはいきません。これの場合は。
拡大・縮小は、ちょっとコツがあります。
ツールの拡大・縮小を選ぶと、大体「縮小方法」を選べるようになっています。
その方法には、Photoshopの場合、バイキュービック・バイリニア・ニアレストネイバーの三つがあります。これらは、それぞれ特徴があります。
ほとんどの場合、一番精密に拡大・縮小を行う「バイキュービック」を選んでおけばいいのですが、アニメ絵のように、色と色の境界がはっきりした絵の場合、「バイリニア」で縮小した方が、境界付近のエッジが綺麗に変換されます。
ニアレストネイバーは、ドットを単に拡大縮小するだけの簡易縮小なので、サムネイルを作成したりサンプルを作成するのには適していますが、あまり精密な縮小はできません。
……といった特色がありますので、用途に応じて使い分けてください。
10. フォーマットの選択
ネットで表示するだけなら、JPEGでオケーです。
……てだけじゃよく解りませんので、ちっと解説。
JPEGと一口に言っても、ただそれで保存すればいいというものではありません。
JPEGの一番の特徴は、保存時に必ず「画質」を尋ねられることです。
この画質（画像圧縮率）が、JPEG画像の出来を左右するものです。
普通は、85〜95の範囲で選んでおけば、ほとんど問題はありませんが、数字が大きいほど高画質で、ファイルサイズが大きくなるということです。
画質重視なら画質を大きく、ファイルサイズを小さくしたいなら画質を下げておくといいでしょう。
当然のことながら、画質を下げれば画像が粗くなるので、上記の画質範囲内であれば、画質をあまり落とさずにサイズ調節ができます。
画質が落ちるのは、JPEGが色を画像から間引いて圧縮しているためで、一度落とした画質は元には戻せません。
重要な画像はPNGとかBMPでオリジナルを保存し、発表するものだけJPEGに変換して別途用意する、もしくはオリジナルがJPEGならより画質やサイズを落とした別のJPEGにして発表、というようにするのがいいでしょう。
では、何でもJPEGでいいのか？といえば、そうではありません。
使われている色数が少ない（256色以下）なら、GIFやPNGがいいでしょう。
JPEGは、写真画像のためのフォーマットなので、アニメのような色数の少ない画像向きではないのです。
GIFやPNGでは色が間引かれませんので、オリジナルをそのまま保存できます。
ただし、これらはJPEGほどの圧縮ができませんので、その分ファイルサイズは大きくなります（JPEGの３〜５倍）。