How to CG お絵描きしましょう!!

私がいかにしてCG(モドキ)を描いているか・・・まともな絵描きさんからみれば、馬鹿みたい! 冗談ヤロー!! ってなことをやってるわけですが・・・まあ ご愛嬌ってことでボチボチと公開していきたいという企画・・・堅苦しく考えないでね・・・

D-Pixedお絵描き実践講座

D-Pixed は土井 淳氏が開発された256色のペイントエディタです。つまり色が256種類まで使えるお絵かき用のソフトです。フリーウエアとしてインターネットで無料で配布されています。1677万色のフルカラーが当たり前の今のパソコンでいまさら256色と思われる方も多いかと思いますが、非力なマシンでも軽くてよく動き使いやすいマスクやレイヤなどの機能もあってちょっとしたカットを描く程度なら手軽で使いやすいと思います。マスクやレイヤなどの機能を使えば高級グラフィックソフトを使った気分も味わえます(笑)。 無料で配布して下さっている作者さんのご好意に甘えて使わせて頂くのも悪くはないかと思いますが。

※ドット打ち専用エディタを除けば、大きな画の描ける256色ペイントソフトは事実上D-Pixedだけのようです。D-Pixedもドット画に使われていることが多いようですね。私はver 2.09の頃から使っているので3年ぐらいにはなりますか。古い絵はクラッシュさせて消えちゃったり、投稿したサイトが閉じちゃったりでほとんどの残っていませんが。

お断り
当講座は、「とりあえずホームページをつくってみたけど文字だけじゃ寂しいよ」「素材集の材料で飾ってみたけど出来合い品ばかりじゃなんだか味気ないなあ」「ほんじゃ自分でイラストの一つも描いて飾ってみるか」・・・・・ってな方を対象としております。
とりあえず手元にパソコンあるし、流行ってるみたいだから落書きの一つもやってみようかってな人を念頭に置いております。
”本格的にデジタル作画を学ぼうという方” 
”既に絵描きさんとしてバリバリ活動されている方” 
”2DCGなんてパソコン塗り絵はワシは認めんぞ!!って主義の方”
等の方々には有害無益と存じます。
玄人の方はご遠慮下さい(笑)
モニタに石を投げたくなるまえに閲覧を止められた方が精神衛生上よろしいかと・・・・あっ 石を投げないで・・・(汗)

※なんせ我流もいいとこなもんでして、けっこう無駄のことやおかしな操作もやっているんじゃないと思います。ご意見やアドバイスは大歓迎です。
※1999年に D-PixedのHow to本が出版されたそうですが、現在は入手困難な状態のようです(私も持ってないです)。

下画を描く
はじめからモニタを観ながら直接パソコンにマウスやタブレットで描くのは、よほど画力があるか手先の器用な人でないと難しいでしょうね。 
慣れということもありますし・・・(^^;
まずは紙に下画を描いてスキャナで取り込んで・・・が最も一般的な方法だと思われます。カチっと下画を清書してから取り込む人、大雑把に描いた下画を取り込みモニタ上で清書する方とスキャナの使い方にも流儀はいろいろとあるようです。
私は主線にペン入れまでしてスキャナで取り込むことが多いです。
ペン入れにはミリペンを使ってます。0.5ミリと0.05ミリを使いわけてかなりこまかいところまでペンを入れます。

スキャナで取り込む
下画はグレーモード(白黒256階調が普通)でスキャンします。白黒モードで読み込むと線がかすれたり切れたりしちゃいます。
取り込むサイズは、まあ、パソコンとスキャナの性能の兼ね合いで・・・大きめに取り込んで縮小したほうが多少なりとも線が滑らかになる(アラが目立たなくります)けど・・・web公開用なら100dpi前後ぐらいでいいんじゃないかな。
下画はD-Pixedに直接には読み込まず、スキャナ付属のソフトでBMPで保存します。
※スキャナは300dpi程度のものなら7000〜8000円ぐらいで売ってます。プリンタにオプションで付けるタイプでも十分ですね。

主線の処理
BMPで保存した画像は、写真加工用などのソフトに読み込んでコントラストを調整して線をくっきりさせてください。私はフリーソフトのDibas32の編集(E)→色調整(L)→明るさ/コントラスト を使っています。設定値は線の太さなどで変わりますからいろいろ試して決めて下さい。読み込んださいのゴミはコントラストの調整でかなり消えますが、まだ残っているゴミはBMPで保存してますからWindowsのペイントの消しゴムで消しちゃって下さい。
この段階でいったんBMPで保存し、主線Aと呼ぶことにします。
さらに、この画像を単純近似でD-Pixed に読み込み2値化機能 アレンジ(A)→2値化or色分解(B) で白黒2値化して下さい。パレット番号0が黒 1が白になります(図1)。この段階を主線Bぶことにします。
2値化機能はD-Pixed ver.2.17 より付いた機能です。ver.2.17 をお持ちでなければすぐにDLするか、他のソフトで2値に減色したあとにD-Pixed に読み込んで下さい。

図1
主線A 主線B


パーツをレイヤに分ける
着色に入る前に透明色と背景色をパレット番号255に移し、今回はとりあえず使わない色 R.0 G.0 B.255の青にしておきます(図2)。※赤でも緑でも別にかまわないんですけどね・・・純粋な緑を使うことが一般的な様ですが・・・理由は???
主線の黒(パレット番号0の黒)をレイヤ(L)→指定色を新規にレイヤに(N)で主線をコピーしたレイヤをつくります。
ツールバー(図4)のボタンをクリッツクしてレイヤ管理ダイアログを開くとフレーム:01となっています。わかりやすいようにレイヤ名を”主線”としておきましょう。もとの主線のあるレイヤはフレーム:00となっています。
いったんフレーム:00にもどり主線をマスク(M)→指定色を新規マスク化(S)でマスクしマスクをONにします。これで主線がマスクされました。
主線が保護されましたので、空いているパレット番号にパレットの色の変更(図3)で各々色をつくり 肌 髪 水着・・・と各パーツごとに塗りつぶしていきます。この段階を画Aと呼ぶことにします。
各々の塗りつぶしたパーツの色をレイヤ(L)→指定色を新規にレイヤに(N)で次々と新しいレイヤにしていきます(図5.6.)。
各パーツのレイヤができあがると、再びフレーム:00にもどりマスクのクリアでフレーム:00の主線のマスクを解除したのち、フレーム:00を削除します。背景は青になります。

図4 説明文にあるメニューやボタンをで囲んでいます。


画A

図2


図3


図5


図6

きれいに色を塗る
ベタ塗りの画に影やハイライトを入れたりするわけです。
各パーツのレイヤごとに、マスク(M)→指定色以外を新規マスク化(E)でマスクをONにします。これで下塗りした部分以外にマスクがかかり保護されて色が塗れなくなります。過ってはみ出したりしても大丈夫というわけです。
あとは、空いているパレット番号にパレットの色の変更で色をつくり細部を塗っていくわけです。
下塗りした色が気に入らなければパレット操作で色を変えることもできます。
マスクのかけ方を調整しながら塗っていくとよいと思います。
フルカラーのように細かい色の変化がつけにくいので、色の境をはっきりさせる”アニメ塗り”が一番適していると思いますが、中間色機能(2色間の網目で濃淡を変えていく・・パレットの下のスライダーの部分)を使うとかなり滑らかな表現も可能です。
ルーペ機能を使いながらドットを細かく打っていけばかなり微妙な色の変化も表現できます・・・ただし、ものすごく根気がいります(^^;

※今回は真っ白(R.255 G.255 B.255)は使わなかったので、背景の青が見づらい方は透明色と背景色を白にしておいてもかまいません(画B')。



画B



画B'

ギャザの処理


画C
左の画CもD-Pixedで描いたモノです。画Bと感じが違いますね?線がギザギザしていません。
256色のお絵描きの大きな欠点は線がギザギザになってしまうことです。ドット修正である程度はカバーできますが限度がありますし、おそろしく手間もかかります。
で・・今回はチョイト反則ワザを・・・主線の処理でも触れましたが、一般にペン入れした(きれいに清書した)下画はグレーモードでスキャンし、コントラストを調整して線をくっきりさせる方法がとられます。主線の処理の主線Aがその段階です。いろいろな濃さの黒が混じってギザギザを目立たなくさせて線を滑らかに見せているわけです。Photoshopなんかでよく使われるエアブラシも理屈はいっしょです。フルカラーの場合はこの線をもとに着色していくわけです。
しかし、D-Pixedでは、使える色の制限や着色処理の簡易さを図るため、白黒2値化させた主線を使うことが多いようですし(他にもやり方はあるんですけどね)、アンチエイリアスのかかる描線機能もありません。灰色なしの真っ黒だけの線・・・もろにギザギザです。主線の処理の主線Bがこの段階です。今回は例に使った画像が小さいので今一つ目立ちませんがもっと大きな絵ですと差は歴然です。下の拡大画像を参考にして下さい。
主線AにD-Pixedでふつうに着色したものが画Bです。それじゃあ画CインチキしてPhotoshopで描いたんだろうって(笑)

種明かしはかんたんです。画Aの主線を主線Aと入れかえたのが画Cなんです。D-Pixedで描いた画Aの主線を消した(主線レイヤを削除します)パーツに主線Aを合成した訳です。合成にはDibas32を使い乗算合成しています(主線Aを台紙にパーツをセルにして・・パーツの背景は白にしておきます・・ドラッグ、ドロップします)なお、合成の際にむらになったところはドット修正しています。256色にドット修正は避けては通れないものですね。
スキャナで取り込んだ主線をそのまま使うこの方法では、パソコン上では線の修正がほとんどできないのでホントのパソコン塗り絵ですね(笑)


主線A拡大 主線B拡大
D-Pixedで描いた線の拡大 フルカラーソフトのエアブラシツール
で描いた線の拡大
画Bから主線Bを消したパーツ

ややこしいことするのは嫌だって人のためには”ジャギ消しソフト”なんてお手軽なものもあります。例えば Vanished Jaggy フリーソフトです。画Dのようになりますが、線がのっぺりしていますし細部がつぶれています。まあ、設定の仕方にもよるんですが、いろいろ試してみるしかないですね。
他に簡単な方法といえば、写真加工ソフトの画像サイズ変更機能や特殊効果フィルターには補間機能(変形後のピクセルの領域やピクセルの色を自動的に修正してくれる・・でよかったかな?)があるのが普通です(D-Pixedにはありません)。このようなソフトで縮小したりぼかしを入れたりすればアンチエイリアスがかかります。しかし、ソフトによっては縮小率を上げると色がにじんだりむらになったりすることもあるのでご用心。縮小する方法で一番の問題は元の画を大きく描かなければならないということです(笑) 大きな画像ファイルはマシンに負担がかかり、特に積んでいるメモリに大きく左右されます。お手持ちのパソコンの性能とご相談ということですね。ぼかしを入れればギザギザは目だたなくなりますが全体がぼんやりした画になってしまいます・・当たり前か(笑)・・くっきりとした画を描きたい場合はぼかしは使えま
せんね(^^;。
蛇足ながら・・・合成したり、縮小したり、ぼかしたりすれば256色を超えちゃいます。BMPで処理して下さい。

※コンピュータの画像は点(ピクセル pixel とかドット dot とか呼びます)の集まりで出来ています。Windowsのペイントでちょつと線を引いて拡大してみれば四角いブロックがつながったようになっているのがわかります。これがギザギザの正体です(ギザギザをジャギと呼んだりします)。点・・というより桝目って言ったほうがわかりやすいかな・・の集合体でつくられるからパソコンで線を引けばふちはギザギザになるのです。昔のワープロは字のふちがギザギザになっていました。あれと同じことなのです(で、よかったっけ(^^;)。このドットを手作業で一つずつ並べ替えたり新たに埋め込んだりして画の見栄えをよくすることを”ドット修正”と呼ぶわけです。そして、ふちのギザギザを滑らかにすることを”ジャギ消し”とか”アンチエイリアス”とか呼びます。
※線の濃さや太さが変わったため画Bと画Cではキャラの表情が微妙に変わっています。また、乗算合成したため画Cは色が少し暗くなっています(^^: 合成すると画が変わるということには留意が必要ですね。

画D


背景
新規にレイヤをつくり背景を描いていきます。レイヤの上下の順番や透明色に注意して下さい。今回は手抜きして適当な写真と合成しちゃいました(^^; 
合成にはDibas32を使ってコピー合成しています(近似色の領域で透明色と背景色の青を領域設定して反転させ、セルをドラッグして、台紙画像のウィンドウに ドロップします。)

※いろいろ試してみましたがD-Pixedのみでの他の画像との合成は無理のようです(汗)・・・方法を知っている方がおられましたら教えて下さい。
※背景に使った写真は他のソフトであらかじめ16色に減色しておき、gifに変換するまえから256色になるように調整しています。


※主線の合成の際にむらが目立つようでしたら、主線Bを削除せずにパレット操作で薄めの色(灰色)にして合成してみて下さい。

※D-Pixedはver.2.17よりgif機能が完全に廃棄されました。画像はすべてD-Pixed以外のソフトでgifに変換しています。


※今回、説明不足な部分や他の方法なども追々ご紹介していきたいと考えています。


       手抜きな画でゴメンサイ(^^;
 画E

戻る