goo blog サービス終了のお知らせ 

週刊! 朝水日記

-weekly! asami's diary-

048.Photoshopで描く:萌えキャライラスト③a

2009年06月26日 | クリエーターズラボ

-Creater's Lab #03c-


 皆さんおはこんばんちわ!
 asayanことasami hiroakiでっす!(・ω・)ノ
 間もなく6月も終わりですが、6月と言えばジューンブライドの季節。そして梅雨の季節でもあります。
 毎年思うんですが、雨の日が多い6月に、ジューンブライドで縁起が良いからと言って結婚式を挙げるのはどうなんでしょう?
 梅雨の晴れ間であれば、快晴で気分も良いでしょうが、雨に降られた日には堪ったモノではありません。
 新郎新婦はともかく、お祝いに駆けつけたゲストさんたちには悪い意味で思い出深い結婚式になってしまいます。
 まあ、もともとジューンブライドはアメリカやヨーロッパなど、梅雨がない国の習慣が輸入されて定着したモノなので、やはり日本向きではないのやも知れず。
 とは言え、今年は6月に入ってからというもの、毎年うっとおしいだけの長雨がほとんどなく、梅雨なのに雨が降らない日が続きました。 少なくとも、僕の在住地域はかなり雨の日が少なかったです。
 元々、僕の在住地域は水道水の水源に地下水を利用している関係で、正直カラ梅雨でも夏に水不足になるようなコトはないんですが、それでも水源にダムを利用している地域に住んでいる方にとっては、たとえうっとおしくてもカラ梅雨は困る! という方が多いでしょう。
 なので、今年のこのカラ梅雨状態はヤヴァいんでないかい? と思っていたら、ここ1週間ほどの間に、“集中豪雨”と言っても過言ではないほどのまとまった雨が降り、やっと梅雨らしくなってきた感があります。
 ……ってゆーか、降り方は既に梅雨を通り越して夏の嵐状態。 いくら今まで降らずにイロイロ貯め込んでたとはいえ、そこまでまとめて降らなくても……。 少しは自重してほしいモノです。
 そう言えば、去年は8月でしたが、在住地域が十数年に一度というとんでもない集中豪雨に見舞われてましたね。(しかも落雷付き。おかげでウチのビデオデッキ2台とファックス1台が昇天)
 今年の気候も、なんだかおかしいです。
 これも温暖化の影響なのかしらん?



 それはさて置き、今週はAdobe社のフォトレタッチ&ビットマップドローイングソフト、Photoshopを使って描く萌えキャライラストのテクニック解説の最終回。
 今回は、シェーディングからハイライトの描き込み、及び最後の仕上げまで一気にいきます!
 今週も、最後までお付き合い下さいませませ。


・シェーディング

 では、今回は影付けから始めていきましょう。
Blog0345  まず、不要なレイヤーをオフにして、<新規レイヤー>を作ります。 髪のシェーディングから始めていくので、レイヤー順は髪のベースカラーレイヤーの直上にしておきます。
 そして、レイヤーの描画モードを<乗算>にします。
 前回記した通り、これは直下のレイヤーの色に乗算して、重ね塗りしたようにする描画モードですが、これはシェーディングに最も適した描画モードです。
 基本色と同じ色をこの描画モードのレイヤーに塗るだけで、イチイチ色を探さなくてもカンタンにシェードが描けます。
Blog0346  今回使うツールは、いつものエンピツツールではなく<ブラシツール>です。
 Photoshopには、様々な種類のブラシがプリセットで用意されていますが、オリジナルのブラシを作る事も可能です。
 しかし、シェーディングにはオリジナルのブラシは必要ないので、ココではプリセットされているブラシの中から、<ソフト円ブラシ>を選びます。
 プリセットで太さ(注:マスター直径)が異なる同じ種類のブラシが複数用意されていますが、太さはスライダー(注:もしくは直接数値入力)で自由に変更出来ます。
 今回は、<100pix>にしました。
 これと同様に、<消しゴムツール>の方もセッティングしておきましょう。
 基本的には、ブラシと同じ種類のブラシを選択し、太さを1.5倍程度太めにしておきます。
 消しゴムツールは、ブラシと同じ種類でも周囲のグラデーションがややシャープになる仕様なので、太めにしておくと消しゴムをかけてもブラシとほぼ同様のキレイなグラデーションで消す事が出来ます。
 もちろん、ブラシの方の太さを変えたら、消しゴムの方もそれに合わせて太さを変更するようにしましょう。
Blog0347  さて、それではシェーディングの手順です。
 まず、シェーディングの対象になる部分(注:この場合は髪)のレイヤーをクリックし、<自動選択ツール>で左図のように対象になる部分を選択します。
 この時、選択するのは線画ではなく基本色を選択するようにしましょう。 理由は、基本色を塗った時と同じです。前回の記事を参照して下さい。
Blog0348  次に、<スポイトツール>で基本色を吸い上げます。
 色を吸い上げたら、先ほど作ったシェードのレイヤーに移動して、ブラシでシェードを描き込んでいきます。
 左図のように、予定の範囲からはみ出してもいいので一通り塗り、消しゴムツールで少しずつ削るようにして消しながら、形を整えていきます。
Blog0349  ある程度形が整ったら、基本色のレイヤーをオフにする等して、形がおかしくないか、あるいは塗りムラが無いかなどを確認します。
 ブラシツールで塗ると、エンピツツールとは異なり、周囲がぼやけて左図のようにグラデーションになります。
 しかし、このグラデーション同士が重なっている部分は、特に乗算レイヤーの場合、均一に塗れたように見える事があり、これは基本色レイヤーがオンになっていると全く見分けられません。
 そこで、このように基本色レイヤーをオフにして、塗りムラや形を確認すると良いワケです。
 これを繰り返し、影になっている部分を全て塗ると、こうなります。(↓)
Blog0350  髪の影が塗れました。
 今回は、光源位置が“右上、顔のほぼ正面の位置”にあるという設定で塗っています。
 光源が“右斜め上”にあるのだから、影は当然、その反対の位置。 “左斜め下”に出来ます。
 ただし、絵そのモノは二次元ですが、マテリアルは立体物なので、光源と影の位置関係を三次元的に考える必要があります。
 以前描いた『3DCGっぽいイラスト』でも、床に落ちているオレンジボックスそのモノの影と、オレンジボックス自体に出来ている影の両方を描きました。 何故なら、立体物は全て、“光が当たっている面と影になっている面”があるからです。
 光源に面している面は、光が直接当たっているので明るくなります。 今回の作例で言えば右側。 オレンジボックスで言えば左側ですね。
 しかし、その反対側の面は、光源に面していないため、光が直接当たらないので暗く影になります。 今回の作例では左側。 オレンジボックスでは右側がそうでした。
 しかし、では光源に面している側を除く、光源に面していない側を全て影にすればいいのかと言うと、決してそうではありません。
 何故なら、描いているマテリアルが二次元ではなく三次元だからです。
 オレンジボックスでは、ボックスの光が当たっていない面、すなわちボックスの右側に影を置きましたが、背景になっている床には、その一部にしか影を置いていません。 壁に至っては、影は一切置いていません。
 何故なら、これらに影が出来る要素が存在していないからです。
 床には、確かにオレンジボックスが作る影を置きましたが、それ以外の場所は、画面の右側であっても影を一切置いていません。
 壁にしても、壁とオレンジボックスとの間に距離があり、ボックスが作る影が壁まで届かないため、壁には一切影を置いていません。
 あの絵の中にあるマテリアルには、それ以外の影を作る要素が無いからです。
 オレンジボックスの場合は、ボックスと壁と床というシンプルなマテリアルで構成された絵だったので、ボックス以外に影を作る要素が無いため、あのようなシンプルなシェードのみでも、極めて理に適ったシェーディングが施せました。
 しかし、今回の作例では、“人物”という極めて複雑な形状をした“立体物”なので、平行四辺形を組み合わせてレイヤーの不透明度を下げれば一丁上がり! とはいきません。
 重要なのは、“光源が何処にあるか?”を常に意識する事です。
 そして、“マテリアルの何処に影が出来るのか?”を常に考える事です。
 光源の位置、マテリアルの形状、影の位置と出来方。
 これらを“光”という一つの法則で結び、理に適ったシェードを描く事が重要です。 これが出来なければ、たとえどんなに上手い線画でも、絵はカンタンに失敗作になってしまいます。
 とは言え、これは実は技術だけではどうしようもありません。
 どんなに高価な機材を使い、どんなに巧みな技術を持っていても、理に適ったシェーディングは出来ないのです。
 では、それ以外に何が必要なのか?
 知識? 経験? 資料?
 どれも正解と言えば正解ですが、微妙にニュアンスが違います。
 より正確に表現するならば、最も必要なのは“観察力”です。
 例えば、家でゴハンを食べている時、学校で授業を受けている時、街で買い物をしている時、部屋でTVを観ている時、オフィスで仕事をしている時、移動中の車や電車の車内、話している友人や恋人の髪や服、あるいは鏡に映った自分の顔などなど、日常生活のありとあらゆる場面で見る光景は、全て三次元のマテリアルで構成された極めて理に適った光源位置とシェードの表現を学ぶ資料になり得ます。
 こうした日常生活の中で、視界に映るモノ全てを観察し、光源は何処か? マテリアルの形状はどうなのか? それによって何処にどういう風に影が出来るのか?を観察する“観察力”を、常日頃から養うように心がける事が大切です。
 加えて言うなら、原画を描く時にも、三次元を意識した空間作りを日常生活の中で観察から学べる事もあります。
 そう、日常生活とは、“最も理に適った資料”なのです。
 資料本を何冊も読んだり、フィギュアやポーズドールを参考にするのもいいですが、日常生活のありとあらゆる場面が資料になるのなら、これを利用しない手はありません。
 しかも、観察するだけならタダです。
 こうして観察した結果を脳内に蓄積、すなわち記憶していく事で、人物のような複雑極まりない形状をしたマテリアルでも、理に適ったシェードが描けるようになるのです。
 ちなみに、僕は“コンビニ店員”という特権をフルに活用し、お客様の髪や服のシェードやハイライトの具合をよく観察しています。 しかも、髪型や服の種類は千差万別なので、資料には事欠きません。
 こういう時は、「コンビニ勤めで良かった!」と思えますね。(笑)
Blog0351  さて、同じ手順で他のパーツにもシェーディングを施していきましょう。
 肌色などの白に近い色、もしくは白そのモノの場合、左図のように黒や青などの反対色(注:補色の関係の色)を置いてやると見易くなります。
 左図では、顔に落ちる髪の影を描くために、黒を置いて作業しました。
 ……って、なんか気持ち悪いですね。コレ。
 ちなみに、影を作っているマテリアル(注:この場合は髪)と影の間にスキ間を作ってやると、マテリアル同士の距離感を表現出来ます。
 毛先の辺りが髪から離れているのが分かりますか?
Blog0352  肌色や白の場合、乗算しても元々の色が薄いのであまり濃い影になりません。
 基本体に、僕は比較的淡い目の影の方がスキなので左図ではやってませんが、こういう時は<イメージ→色調補正→明るさ・コントラスト>で明るさを下げてやると良いです。
 また、イラストレーターのKEIやqznaのようなハードコントラストのシェードが欲しい場合は、いっその事ブラック(注:RGBオールゼロ)でシェードを描くのも手です。 黒以上に暗い色は、この世には存在しませんからね!
Blog0354  同じ要領で下半身にも影を置きます。
 この絵のポーズは、いわゆる“ぺったんこ座り”よりは正座に近いポーズなので、本来ならふくらはぎ辺りの影はもっと大きくても良いかもしれません。
 しかし、今回は沼田画独特のややぽっちゃりしたカンジを出そうと思って、あえてこんなカンジにしましたが……ちょっと違うか?(笑)
 また、腰の辺りには腕(注:セーラー服の袖)の影を表現してみました。
Blog0355  スカートの影は、乗算ではなく通常のままです。
 ベースになっているスカートの青は、半透明化して下地の白を透けさせているので、乗算だと上手く影にならないためです。
 また、青系の色は乗算させると色が濃くなるだけで影に見えない事が多いので、今回は単色の青(R/0・G/0・B/255)でシェードを描き、通常レイヤーのまま不透明度を40%に下げるという方法で処理しました。
 ……しかし、この影は理に適っているかどうか、正直自信ないです。(←オイオイ)
 腕に隠れている股の部分や背中の影になっているお尻の部分は、腕やスカートの円の頂点を境に全て影にしました。
 また、プリーツの裏側になっている部分も、忘れず影にしておきます。
 さらに、下半身から続く形で、腕の影も忘れず書いておきます。
 ちなみに、今回はいわゆる“二段影”を使わない方向で描こうと思っていたので、お尻の辺りのスカートの裏面にも、二段影は描き込んでいません。(注:本来なら、ココにはさらに濃い影が出来るハズ)
Blog0356  セーラー服の白い部分には、乗算レイヤーが使えません。
 白や黒の無彩色には、どんな色を乗算しても無彩色にしかならないからです。(注:黒は黒にしかならず、白は完全に透過される)
 なので、白にシェードを置く時(注:黒の場合は、シェードそのモノを置く必要がない。黒よりも暗い色は存在しないから)は、通常レイヤーのまま、シェードの色を置かなければなりません。
 一般的に、白の場合は薄いグレーでシェードを置く事が多いですが、僕は薄いブルー(R/230・G/230・B/255)でシェードを置くようにしています。 グレーだと、どんなに薄くしても影が暗くなり過ぎてしまうというのが主な理由ですが、それと同時に、イラストレーターのPOP(注:『もえたん』のヒト)の色使いが好きだからです。
 POPの場合、RGBではなくCMYKで描く事が多いようなので、ブルーではなくシアンですが、やはり青系の色でシェードを塗っています。 そのため、POPの絵はどんなイラストでも全体的に青味がかった色調で統一されています。
 この色彩がすごくスキで、似たような事をRGBでも出来ないモノかと色々試している内に、僕はこの方法にたどり着きました。
 基本的に、僕は基本色が白の場合は、いつもこの色でシェードを置いています。
 ちなみに、髪の落とす影を肩の辺りに置いてみました。 毛先に近い位置なので、距離は短めになっています。
 また、見難いですが、スカーフや襟が作る影もちゃんと塗ってあります。
 ちなみに、胸元の影はふっくらと膨らんだカンジになるようにこだわりましょう!(笑)
Blog0357  セーラー服の襟は、スカートと同じ方法でシェードを置きました。
 シェードのレイヤーが白ラインよりも下になるため、左図のように一時的に白ラインを非表示にして描くと描き易いです。
 ポイントは、右肩に落ちた髪の影。
 先ほどの白い部分とは異なり、髪から遠くに置いて距離感を表現します。
 ただし、先の白い部分の影に続くように、整合性を合わせて描かなければいけません。 また、この時襟と白パーツとの段差を考慮し、影にもやや段差を付けてやると、マテリアルの素材の厚みを表現出来ます。
Blog0358  襟や胸元の白ラインは、白パーツと同じく薄いブルーでシェードを置きます。
 襟に落ちている髪の影は、白ラインにもかかっているので、同様にシェードを置いて周囲との整合性を合わせます。
 ただし、この白ラインは襟に織り込み、あるいはプリントされており、襟との段差はほとんどないハズなので、段差を付けるような事はしません。 また、白ラインが襟に影を落とすような事もないので、フチ取るような影も描き込みません。
Blog0359  スカーフのシェードは、乗算レイヤーを使って描きましたが、薄過ぎたので描いた後に色調補正を施し、やや暗めにしてあります。
 基本的には、線画のシワの線に沿ってシェードを置けばおkですが、下の方は胸の膨らみを表現するためにほとんどをシェードで塗りつぶしました。 結果的に、セーラー服のシェードとの整合性が合ったと思います。
Blog0360  続いては顔です。
 先ほど描いた髪が作る顔のシェードは、目や眉、鼻や口を無視したモノでした。
 しかし、前髪が顔にかかっている以上、目や眉にも影は落ちているハズですし、鼻や二重まぶたにも、少なからず影が出来ているハズです。
 ここでは、それらを一つ一つ描いていきます。
 眉や二重まぶた、鼻や口(舌)の影は、乗算でそのままフツーに描けばおkです。 ただし、作例では二段影にするためと、ミスった時の保険のため、別レイヤーに置いています。
 また、眉に落ちている影は、眉そのモノの影と髪の作る影を別レイヤーに分けて置いています。 これも二段影になっているワケですね。(注:ほとんど見えませんけどね!)
 先ほど記したように、今回は『アニメセル画調のイラスト』を意識して描いているので、二段影を“あえて”避けていますが、顔だけは例外的に二段影にしました。 特に、今回の作例の原画では、顔がほぼ真正面を向いているため、影が出来難く、平面的になってしまいがちなので、二段影でやや強調気味に影を置く事で立体感を出すためです。
 目の中の影は、マツゲ、髪のそれぞれが作る影を、瞳と白目にそれぞれ別レイヤー(注:すなわち4レイヤー)に分けて置いています。 おかげでファイル容量が膨れ上がる膨れ上がる。(笑)
 白目の方は、セーラー服と同じく薄いブルーですが、瞳の方は黒で描いて不透明度を下げてあります。
 当たり前の事ですが、例によって肌の影との整合性に注意して描きましょう。
Blog0361  さて、ココまで描けたら、一度全体のバランスを見てみましょう。(左図参照)
 ……うん、悪くないんじゃないっスか?(注:“ある事”を忘れています。が、この時はマジで気付きませんでした)
 では、今度はちょっと気分を変えて、ナタのシェードを描いていきましょう。
Blog0362  ナタのシェーディングは、フツーに描いてもいいですが、それでは絵としてあまり面白くないので、ちょっと小技を使って実際にはあり得ない影にデフォルメしてみましょう。
 左図をご覧下さい。 中々に気色悪いナタになりました。(笑)
 今回は、このようにしてみました。
 これは、Photoshopの機能である<レイヤー→レイヤースタイル>という機能を使って描いています。
 これは、レイヤーに描かれた色に様々な特殊効果やパターンを適用させる事が出来る機能で、今回は<グラデーションオーバーレイ>と<パターンオーバーレイ>を使っています。
 ……が、詳しいレシピは“企業秘密”とさせて頂きます。
 真似されたくないというのもありますが、言葉で説明するのがとても難しいからです。
 既にPhotoshopをお持ちの方は、左図のレイヤーリストを参照して、実際にレイヤースタイルを使って色々試しながらやってみて下さい。 これ以外にも、様々な効果を使って色々試してみるのも面白いですよ?
Blog0363  ちなみに、柄にも何か特殊効果を適用させようかと思いましたが、あまり面白い効果が得られなかったので、そのままフツーに乗算でシェードを置きました。
 柄の丸みを意識しながら、慎重にシェードを置いていきましょう。
 また、ナタはこれで“完成”とする事にしました。 今回は、ハイライトも置きません。 だってコレで十分でしょ?
Blog0365  では、続いては例の“赤い液体”にシェード置いていきます。
 とは言え、液体のシェーディングはフツーにやるとかなり大変(注:形状が極めて複雑なため)なので、今回はカンタンに、先ほどのナタと同じく、<レイヤースタイル>を使ってシェーディングしてみましょう。
 まず、下準備として<フィルタ→ぼかし>でエッジのシャギーをぼかします。 左図では分かり難いですが、液体のシャギーがやや柔らかくなっています。
 必要ならば、<ぼかし(強)>を使ってもいいですが、<ぼかし(ガウス)>だと何をどうがんばっても“ぼかし過ぎ”になってしまうので、注意が必要です。
Blog0366  次に、<レイヤー→レイヤースタイル→シャドウ(内側)>のコマンドを実行します。 すると、左図のようなダイアログが開くので、ココで左図のように各項目の数値を変更します。
 この時、<包括光源を使用>のチェックボックスを必ず入れて下さい。
 これは、他のレイヤーでも同じ効果を使う時、光源位置を一致させて、全体の整合性を自動的に合わせてくれる機能です。
 作例では、体やナタにかかっている部分と床に広がっている部分の液体を別レイヤーに分けているので、両方のレイヤーで光源位置を一致させる必要があるからです。
 また、数値を変更すると、右側の<プレビュー>の項目と共に、絵そのモノもリアルタイムに変化するので、それを見ながら数値を合わせていきます。
 そして、数値を合わせて適用すると、このようになります。(↓)
Blog0367  一発で液体全体にシェードが置けました。
 このように、液体のような不定形で複雑な形状のマテリアルにシェードを置く場合、マテリアルの形状や位置、角度にもよりますが、こうした特殊効果を使った方がカンタンにシェードを置ける場合があります。
 ちなみに、この状態で消しゴムを入れたり色を置き足したりすると、それに合わせてシェードも変化します。 あまり実用的な方法ではありませんが、やってみると水面を指でなぞっているような変化が楽しめます。
 また、ナタレイヤーの下に置いた補助レイヤーにも、同様の特殊効果を施しておきましょう。
 同じように、床に広がっている液体にも特殊効果でシェードを置きます。
 ただし、こちらはマテリアルのサイズが大きいので、それに合わせて<距離>と<サイズ>の数値を1.5倍ぐらいにしてあります。
 これでもやや小さい気がしないでもないですが、あまりやり過ぎると逆にヘンに見えるので、これぐらいが丁度良いのではないかと思います。
 さて、今度はその液体に落ちる影、及び液体そのモノが作る影を描き込んでいきます。
 まず、床に広がっている液体の上に、人物が作る影を置きます。
 これは、乗算ではなくフツーに黒でシェーディングし、不透明度を下げる方法で描きます。
 乗算レイヤーだと、赤系の場合は彩度が増すだけで暗くならない事があるので、黒を使った方がそれっぽく見えます。
 股の下の部分は、イメージだけでほとんど塗りつぶしましたが、本来なら木漏れ日のように差し込む光があるやも知れず。
 まあ、そこまでこだわる必要はないかも知れませんが、皆さんが描く時はチャレンジしてみても良いかもしれません。
 ところで、足の下の影ですが、……やっぱりヘンですか?
 髪や顔にかかっている液体にも、髪が落とす影を描き込んでおきます。
 先ほどのセーラー服の襟と同じく、段差を意識すると良いですが、……左図では分かり難いですね。
 また、液体そのモノが作る影も、同時に描き入れていきます。
 が、これまた分かり難いっスね。(笑) ちゃんと描いてはあるんですが。
 ナタにかかっている液体にも、同様に影を付けていきます。
 とは言っても、刃の部分(白い部分)は分かり易いですが、刀身の部分(黒いマダラ模様の部分)は分かり難いっスね。
 ですが、これは飽くまでも結果論なので、“分かり難いから描き込まなくてもいい”という意味ではありません。
 飽くまでも立体感を表現する要素ですから、結果的に見えなくなってしまっても一応描き込んでおきましょう。
 同様に、胸や襟にかかっている液体の影も、描き込んでおきます。 って、……。
 ……えー、ココでようやく気づきました。
 セーラー服の袖のシェード、描き忘れてますね。(笑)
 描き込んでおきましょう。
 以上でシェーディングは完了です。
 完了したら、全体を見回しておかしなトコロは無いか、塗り忘れは無いかをチェックします。
 ……あ、忘れてた。(笑)
 床の液体レイヤーの下には、液体や人物が作るシェードを置きます。
 液体に置いたシェードと同じく、黒でシェード置き、不透明度を下げて処理します。
 脚のスネの部分や、指先が作る影も、液体に置いたシェードと整合性を合わせて描き込んでいきます。
 また、本来なら人物の上半身や頭が落とす影もスカートの後ろ(背中側)に置くべきかもしれませんが、難しいので今回はスルーします。(←コラ!)
 このように、シェーディングは作業自体はカンタンですし、時間もそれほどかかりませんが、光源の位置やマテリアルの形状を考えながら描かなくてはならないため、結構頭を使う作業です。
 ですが、『3DCGっぽいイラスト』の時にも記したように、これをシッカリとやっておくと、絵にリアリティが加わり、絵全体のクォリティが格段に向上します。 がんばりましょう!


to be continued...

コメント (2)
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

047.Photoshopで描く:萌えキャライラスト②

2009年06月19日 | クリエーターズラボ

-Creater's Lab #03b-


 皆さんおはこんばんちわ!
 asayanことasami hiroakiでっす!(・ω・)ノ
 突然ですが、

緊 急 告 知 ~ !!

 来月から、当ブログのうp曜日(←今作った新語)が変わります。
 新しいうp曜日は、『毎週土曜日』です。
 リアルの方でシフトローテーションが変わるため、金曜日にうp出来なくなるための変更です。ご理解のほど、よろしくお願い致します。


 それとは関係ありませんが、今月1日から、アメリカ最大のゲームショー、『Electronic Entertainment Expo 2009』(通称E3)が開催されました。
 その年の下半期から翌年上半期までにリリースが予定されている各メーカーの最新ゲームの発表の場になっているこのゲームショーは、アメリカのみならず、毎年世界中から注目されています。
 PCのみならず、コンシューマ専用のタイトルや最新ハードも出品されるため、ありとあらゆるゲーム関係者やゲームユーザーが集まり、今やモーターショーも顔負けの人出があるそうです。
 日本からは、カプコンやセガ、スクウェア・エニックスといった、海外でも人気の高いタイトルをリリースしているメーカーが参加しており、カプコンはPCでもコンシューマでも大ヒットしたFPSゲーム、『ロスト・プラネット』の続編を発表。 また、スクウェア・エニックスは、11作目以来となる久々のMMORPG、『ファイナル・ファンタジー14』を発表しました。
 さらに、Valve社がなんと『L4D』の続編、『Left4Dead2』を発表! 会場に訪れたゲーマーたちの注目を集めました。
 今のところ、X箱専用という事らしいですが、PC版もきっと出してくる事でしょう。 追加情報が待ち遠しいトコロです。
 ……つか、ホントに出せるのか? とりあえず年内はないな。(注:100%Valveタイムが適用されるから)
 ってゆーかむしろ、そんなの作る前にHL2のEp3とPortal2の方が先なんじゃないのか? ファンの忍耐にも限度というモノがあるのですよニューウェル?(←Valve社のCEO)
 何にしても、今年は年末にマイクロソフトが次世代OSのWindows7(注:飽くまでも予定。 Vistaと同じく延期する可能性大)をリリースしてくるし、Intelが企業サーバ向けの8コアCPU(!)をリリース(注:現行のCore2Quad、及びi7は4コアなので、単純にその倍となる。また、Intelお得意のHTテクノロジーが実装されているので、実質的なスレッド数は16スレッドとなる。ただし、飽くまでも企業サーバ向け。自作PC用リテール版は出すらしいが、個人向けメーカー製PC用のバルク版の出荷は予定していないらしい)してくるし、来年にはUSB3.0も規格化されるらしいし、今年の下半期から来年の上半期にかけては、PC業界にとってはは一つの大きな変革期になりそうですね。


 それとは関係ありませんが、SteamでTESⅣのGotYとTESⅢのGotY、そして、Call of CthulhuのDL販売が開始されました!
 当ブログでは何度も紹介させて頂いていますが、いずれもBethesdaを代表する超オススメのタイトルばかりです!
 加えて、TESⅣにはDLC各種をバンドルした『Delux版』もあります。
 いや~、嬉しいっスなぁ~! ビッグバン嬉しいっス! これでまた、TESⅣユーザーが増えてくれる事でしょう。
 まだTESⅣを体験されていないSteamユーザーの皆さま、ぜひ一度、かつてない“究極のRPG”を体験してみてはいかがでしょうか?



 さて、今回は前回の続き、Adobe社のフォトレタッチ&ビットマップドローイングソフト、Photoshopを使って描く萌えキャライラストのテクニック解説、その第2回です。
 今回は、基本色の塗りと目の描き入れ、及び描き残していたアレを描き込んでいきます。 今週も、最後までよろしくお願い致します。


・補助線とカラーモード

 さて、前回描いた線画は、いくつかの部分毎にパーツ分けし、なおかつ基本的に“画面に見える部分”だけを描きました。
 パーツ分けは、今回の基本色塗りをやり易くするためと、最終的な仕上がりを良くするためのモノですが、“画面に見える部分”だけしか描いていないので、今回の作業は逆にやり難くなってしまいます。
 そこで、まずは線画を補い、今回の作業をやり易くするための『補助線』を描いていきます。
Blog0323 とは言っても、やり方はいたって簡単です。
 先に描いた線画の線が途切れている部分に、線が途切れないように閉じるための細い線をエンピツツールで描き込んでいくだけです。
 ちょっと分かり難いかもしれませんが、このSSのように、開いたままになっている部分に、その手前にあるマテリアルの輪郭に沿って細い線を描き入れていきますが、より手前のマテリアルに隠れていれば、輪郭から外れていても(注:SSでは、左手に重なっている部分がソレ)構いません。
 これは、より手前にあるマテリアルに色を置き、レイヤー順を変更すれば、自動的に“画面に見えない部分”になり、描かれていないのと同じ事になるからです。
 パーツ毎に、このような補助線を描いていき、全ての線がキチンと閉じている状態にします。
Blog0322  また、ちゃんと閉じているかどうかを確認する際は、<自動選択ツール>を使うと簡単です。
 これで色を置く予定の部分(注:いわゆる“ベタ”)、あるいは色を置かない部分(注:いわゆる“ヌキ”)をテキトーに指定し、ベタとヌキがちゃんと分かれている事を確認します。
 また、線画レイヤーは間違って弄ってしまわないように、確認が終わったらロックしておきましょう。
Blog0324  補助線が描けたら、今度は描画モードを変更します。
 <イメージ→モード→RGBカラー>を選択し、グレースケールからRGBカラーに切り替えます。
 また、同じく<モード>から、カラーチャンネルを<16bit>に切り替えます。
 Photoshopでは、カラーモードが何であってもピッカーやカラーライブラリーからカラーで色を選び、色を置く事が出来ますが、カラーモードをRGB、もしくはCMYKにしないと、見た目はモノクロのままです。
 見た目に置いた色を確認し易いように、最終的にカラーの作品にしたいのであれば、この時点でカラーモードを切り替えておきましょう。
 また、カラーチャンネルは色をより高精彩にして、最終的な仕上がりとディスプレイ上の見た目を一致させるために(念のため)16bitにしておきます。
 RGBとは、レッド、グリーン、ブルーの『光の三原色』を再現するカラーモードで、ウェブ素材やノベルゲームの立ち絵、イベントカットなどのイラストの場合は、このカラーモードにします。
 PCのディスプレイ(注:アナログ/デジタルに関係なく、TVモニターでも)は、『光の三原色』によって色が表示されているからです。
 RGBカラーでは、それぞれ0~255までの256段階の数値によって3色それぞれの色の強さを決定し、3色を混色する事で一つの色を表現しています。 これにより、RGBカラーの色数は、1677万7216色(注:256の3乗)となり、現在のいわゆる“フルカラー”はこの色数です。
 また、RGBはヒトの視覚に極めて近い色が再現出来るのも特徴です。
 ヒトの視覚は、物体が反射する太陽などの光源から放射される光に含まれる可視光線という電磁波を捉える事で、初めてその物体の色を認識します。
 つまり、視覚に捉えられる色とは、物体がそもそも持っている本来の色ではなく、物体が反射する可視光線という光なのです。
 だから当然、ヒトの視覚に捉えられる色とは、RGBの光の三原色によって混色された色なのです。
 ちなみに、光の三原色では、全ての色が最大値の状態(注:RGBオール255)が白となり、逆に全ての数値が最小値の状態(注:RGBオール0、光が無い状態。暗闇、夜)が黒となります。
 これに対し、CMYKとは、シアン、マゼンダ、イエローの『色の三原色』にブラック(注:頭文字のBじゃないのは、RGBのBとの混同を避けるため。blacKのK)を加えた4色によって混色されるカラーモードです。
 これは、主に印刷用に描かれるCG用に用いられるカラーモードで、インクジェットはもちろん、レーザーでもインクリボンでも、紙に印刷するプリンターは、このCMYKを混色して色を再現しています。
 CMYKでは、CMYの3色を“原色”と呼び、この3色の各中間色3色を“2次色”、さらにこの6色のそれぞれの中間色6色を“3次色”と呼び、この合計12色を基本に、明度(Kの強さ)、あるいは彩度によって変化を加えた色のリストを基準に色を決定します。
 これを『カラーチャート(色相環)』と呼びます。
 CMYKは、実際に印刷する時に使用されるのと同じカラーバランスで混色するため、ディスプレイ(RGB)に表示されている状態と印刷した時の状態のギャップが極めて少なく、ディスプレイ上でも実際の印刷とほぼ同様の色を再現出来るのが特徴です。
 また、CMYKでは数値が全てゼロ(注:単位は%)の状態が白(注:色が無い状態)、全ての数値が最大値の状態が黒となり、RGBとは逆になるので注意が必要です。
 ただし、このカラーモードは鮮やかな色を調色するのが極めて難しく、特にRGBの原色を再現するのは、困難を極めます。
 また、Photoshopには、“Adobe Gamma”というユーティリティソフトがバンドルされており、ディスプレイ上のガンマ線量を検出し、RGBからCMYKへの変換を補助して、RGBとCMYKのギャップを最小限に止める機能がある(注:確認は取ってませんが、どうやらPhotoshop以外のソフトから印刷出力しても有効のようです。実際、僕はPhotoshop上でRGBカラーで作成したイラストをPhotoshop以外のソフトで印刷していますが、見た目のギャップはほとんどありません。ちなみに、Adobe Gammaはコントロールパネルにインストールされ、コントロールパネル上で常駐します)ので、印刷用でもRGBで描いておkだと思います。
 同人誌などの場合、実際の印刷は印刷業者に依頼する事になりますが、印刷業者もAdobe Gammaのようなガンマ線検出ソフトを導入しているトコロがほとんどなので、よっぽどの事がない限り(注:印刷業者のパンフレットなどで、カラーモードが指定されていない限り)、RGBでも問題ないと思います。
 なので、今回の作例でもRGBカラーで描く事にしました。
 ……つか、CMYKだとホントに鮮やかな色作るの大変なんですよ。 特に青。 何をどうやってもくすんだ色しか作れない。 何とかならないモンですかね?
 それはともかく、カラーモードとカラーチャンネルを変更する時、「レイヤーを結合しますか?」というダイアログが出る事がありますが、これは必ず『いいえ』を選択して下さい。結合しなくても問題ありません。
 また、ファイル容量が極端に増える(注:作例では、約6倍に跳ね上がりました)ので注意が必要です。(注:当然処理も重たくなる。保存にやたらと時間がかかるようになるが、メンドクサイからといって保存しないと逆にメンドクサイ事になるので、上書保存は作業中に小マメにやる事。ショートカットは<Ctrl+S>)


・基本色を置く

 さて、カラーモードを切り替えたら、早速色を置いていきましょう。
 ……の前に(笑)、色を塗る時は、こういうモノを予め作っておくと便利です。
Blog0325  これは、以前少し紹介したフリーウェアオフィススイート、『OpenOffice.org』の表計算ソフト、『Calc』で作成した“カラー管理表”です。
 今回の作例のモノではありませんが、僕はイラストを描く時は、必ずこのような配色管理表を作成し、新しく色を作った時、あるいは実際に色を置いた時などに、その色のレシピや色名をこのリストに追記していくようにしています。
 Photoshopには、作ったり選んだりした色をまとめて保存しておけるオリジナルパレット機能がありますが、個人的にこの機能がなんだか使い難く感じているので、僕はパレット機能を使わず、この管理表で代用しています。 特に、シェードやハイライトなどは、カラーの調色よりは、むしろレイヤーの描画モードの方で調色する事が多く、これはパレットでは記録出来ません。
 またこの方法だと、違う作品同士で色を兼用したい時でもレシピを参照し易いので、結果的にパレットを作るよりこちらの方がラクだったりします。
 加えて、複数のスタッフ間で作業する場合等にも、こうやって作成した管理表を印刷して配布すれば、配色の統一化にも十分役立ちます。
 さらに、OpenOffice.orgは、アカウントの取得やユーザー登録も不要で、アドウェアなども一切なく、完全無料で使えるフリーウェアなので、経済的にも助かります。
 オフィススイートには、こんな使い方もあるのですよ?


 では、いよいよ色を置いていきます。
Blog0326  色塗りにはいくつかの方法がありますが、今回は比較的カンタンな『自動選択法』(命名、オレ)でやってみます。
 マスク処理などのプロ向けのテクニックは使いませんが、線画さえシッカリ描けていれば、コチラの方が作業がラクです。
 まず、色を置きたいトコロを<自動選択ツール>で指定します。(注:左図の点線で囲まれた範囲)
 この時、線画がシッカリと閉じていないと、はみ出して色を置きたいトコロ以外のトコロまで指定されてしまうので、注意が必要です。(注:この確認のために、先に記したように補助線を描いた後に確認作業を行っておくと良いのです)
Blog0327  次に、<選択範囲→選択範囲を変更→拡張>のコマンドで、指定した選択範囲を少しだけ拡張します。
 線画の線の太さにもよりますが、1~5pix程度でおkです。 実際に拡張を実行してみて、選択範囲が線からはみ出ない程度に拡張します。
 続いて、新規レイヤーを作成し、レイヤー順を入れ換えて線画レイヤーよりも下に来るようにします。
 先ほど拡張した範囲は、線画の線に隠れてしまいますが、選択範囲が丁度だと、線と色の間に1pix以下のわずかなスキ間が出来る事があり、仕上がりが雑になります。
 これを防ぐために、予め選択範囲を拡張しておくと良いワケです。
Blog0329  後は、ココに<塗りつぶしツール>で色を置けばおk。はみ出しもスキ間もなく、キレイに色が置けました。
 後は上記の手順を繰り返し、全てのパーツに色を置いていきますが、ココで一つ注意点。
 色を置くレイヤーは、使う色数や塗り分けるパーツの数に合わせて別々のレイヤーに置いていくようにしましょう。
 先ほど記したように、選択範囲の拡張を行っているので、選択範囲によっては、線からはみ出ていなくても色同士が干渉しあって本来あるべき塗り分けと異なる塗り分けになってしまう事があります。
 しかし、レイヤーを分けておくと、このような事態が起こってもレイヤー順を入れ換えるだけで解決する場合がほとんどなので、最初からやり直しみたいなコトになり難いからです。
 また、色を置いたはいいけど、最終的にイメージと違う色だった、もしくは、色を置くトコロを間違えたなど、ミスった時に全ての色が同じレイヤーに置いてあると、修正がとても大変です。
 場合によっては、とんでもなく広い範囲を消しゴムツールでちまちま消していく事になりかねません。
 これを避けるために、予めパーツや色毎にレイヤーを分けておくと、ミスったらそのレイヤーを丸ごと削除してしまえばいいので、修正がとてもラクになります。
 で、上記の手順を繰り返し、全てのパーツに色を置くと、こうなります。(↓)
Blog0331 見易いように、ブルーバックにしてみました。
 ……う~ん、セーラー服の青がちょっと違うかにゃ~? ……って、むむ!?
 ……え~、ココで重大なミスに気付きました。
 セーラー服の襟の白いラインの輪郭線、いらなかったっスね。(笑)
 線画のロックを解除して、線画そのモノを修正します。
 塗ってしまった白いラインそのモノは問題ないので、これをそのまま流用して、輪郭だけを修正してほぼそのまま使用します。
 また、袖の部分の白いラインも、襟のラインと同じレイヤーに描きます。 線画の時と同じく、原画からエンピツツールで輪郭をトレスし、塗りつぶしツールで輪郭線のない白いラインにします。
 修正すると、こうなります。
Blog0332  輪郭線のない、キレイな白ラインが塗れました。
 ちなみに、セーラー服とスカートの青も変えました。
 RGBで調色した青を塗り、直下に単色の白を置いたレイヤーを置き、青の方の不透明度を少し下げて僅かに透過させてあります。
 配色見本として利用したイラスト集の配色にかなり近い色になりました。
 ちなみに、オリジナル版や小説版では、もっと彩度の高い青ですが、今回はアニメ版の配色に準拠するため、こういう色にしました。
 また、ナタは正直チョーテキトー。(笑) これは、後で(次回)加工するので、今はとりあえずこれでいいです。
 また、ナタのミネの線と胸元の色が干渉してしまっていますが、これも後で(次回)修正するので、今はこのままで。


・顔と目

 さて、それでは次に、前回スルーしていた顔と目を描き入れていきましょう。
 先送りにしたのは他でもありません。 ニガテだから。 それだけです。
 実を言うと、僕は普段、このようなリアルスティックなキャライラストは全く描かないんですよ。
 いつもは、はちゅねさんや南向春風のイラストのようなデフォルメキャラばかり描いてるんスよ。
 だから、今回のようなリアルスティック系のキャラ絵というのは、実はほとんど初めてに近いんですが、描き方は分かってるのでがんばって描いてみたいと思います。
Blog0333  まず、新規レイヤーを作成し、原画をトレスして眉や二重まぶた、マツゲや口といった顔のパーツの線画を描きます。
 描き方は、線画と同じくエンピツツールでトレスです。
 また、瞳の部分だけは別レイヤーにしておきました。 ミスったら怖いので。
 で、全てのパーツを描き込むと左図のようになるワケです。
 ……なんか怖いですね。このSS。
 マツゲの輪郭線がおかしいですね。 修正しておきます。
Blog0334  次に、それぞれのパーツに基本色を置いていきます。
 基本的には先の自動選択法で置いていきますが、白目の部分だけは、セーラー服の白ラインと同じく、エンピツツールで輪郭を描いて塗りつぶしツールで色を置く方法を取りました。
 白目の部分だけは、他のパーツと異なり閉じた線画を描く事が出来ず、補助線を入れる事も出来ないからです。
 描く範囲は広くないので、この方法でもメンドクサクはないでしょう。
 また、レイヤー順を入れ換えて、顔の線画レイヤーが髪よりも下に来るようにしました。
 本来、アニメやキャライラストでは、このような状態になっても前髪の一部を消し、マツゲや眉、瞳が前髪に隠れないようにするのがフツーですが、今回はあえてこうしました。
 この方が、表情がシュチエーションに合っているように思います。 目元がハッキリしていない分、表情が暗くぼんやりしたカンジになったように思います。
 それに、個人的にこういうカンジ(注:目の一部が前髪に隠れている状態)の方が、絵的にスキなので。
 ……しかし、また色を間違えてますね。(笑) 瞳の色が明らかに違う。 ……修正しておきます。
Blog0335  では、次に瞳に色を置いていきます。
 まず、自動選択ツールで範囲を指定し、範囲を拡張させて瞳の基本色を置きます。 Bが強めの青に変更しました。 ただ、やや強過ぎたのでレイヤーの不透明度を僅かに下げて、直下の白目がやや透過するようにしました。
 次に、中心部の黒を<シェイプツール→楕円形ツール>で作り、大きさと角度(<編集→変形→拡大・縮小/回転>)を合わせて、マツゲに左図程度にくっつく位置に置きます。 位置を決めたら、シェイプをラスタライズしてビットマップに切り替えておきます。
 また、これを取り囲むように、瞳の虹彩に当たる部分に色を置きます。 黒目を自動選択ツールで指定し、範囲拡張で20pix程度広げます。 そこに、基本色と全く同色を置き、エンピツツールでマツゲの輪郭に並行するように左右の影の部分を描きます。 瞳の輪郭線の外にはみ出ている部分は、消しゴムツールで消しておきましょう。
 そして、レイヤーの描画モードを<乗算>に切り替えます。
 すると、左図のように基本色と同色で、明度だけが下がったシェードを描く事が出来ます。
 乗算レイヤーとは、文字通り下地色に上塗り色を重ね、重ね塗りしたようにする描画モードです。
 この方法を使うと、明度だけを下げた同色を塗ったのと同じ効果が得られ、同色を塗り重ねるだけでシェーディングもカンタンに出来ます。
 ただし、色によっては逆に明度が上がったり(注:赤系)、全く変化がなかったり(注:黄色系や黒)、完全に透過されてしまったり(注:白)する事があるので、注意が必要です。
 左図では、元が青系の色のなので上手くいきましたね。
 ……黒目がちょっと大きいかな?
Blog0336  次に、そのシェードと黒目の輪郭をぼかします。
 <フィルタ→ぼかし→ぼかし(ガウス)>のコマンドを使い、輪郭を5pix程度ぼかします。
 すると、左図のようになります。
 そして、これを両目に施します。
 すると、こうなります。(↓)
Blog0337  ……ちょっとぼかしが甘いか?
 つか、やっぱり黒目が大きいですね。 小さくしましょう。
 <矩形選択ツール>を使って、黒目の部分だけを囲むと、囲んだ部分だけを加工出来ます。 <編集→変形→拡大・縮小>で、90%程度に縮小します。
 また、さらに<ぼかし(ガウス)>コマンドを実行し、今度は10pix程度ぼかしを強くします。
 またさらに、黒目とシェードをそれぞれ50%程度に不透明度を下げます。
 すると、こうなります。(↓)
Blog0338  お、グラデーションになりました。
 つか、やっぱりなんかコワイですね、この眼。 なんだかオヤシロモードっぽくなってる気もしないでもないですが、とりあえず今の段階ではこれでおkにしておきましょう。
 ハイライト(瞳の星)を入れればもっと落ち着きますが、次回のお楽しみという事で。
 ちなみに、上記で置いた色は、全て別々のレイヤーにレイヤー分けして置いて下さい。 でないと、失敗した時泣きを見ます。


・描いてなかったアレ

 さて、続いては顔と同様に、前回の線画では全くスルーしていた“アレ”を描いていきます。
 そう、レナの顔やナタ、そして床に飛び散っていた“液体”です。
Blog0339 忘れていたワケではありません。 もちろんワザとです。
 ナタと同じく、これは小道具の一つですが、セーラー服の白ラインと同様に、輪郭線を描かずに直接色を置くために、前回の線画の段階ではあえてスルーしていました。
 今回は基本色の塗りなので、ついでにこの“液体”にも色を置いていきます。
 しかし、……。
 ……う~~ん、何色にしよう?
 選択肢は最終的に二つに絞られると思いますが、どちらの色を置くかによって、このイラストの完成形の意味合いが大きく変わってしまいます。
 レーティングで言うとR18になるかX20になるか。 ……いや、PG13はハナから諦めてるから。(笑)
 まあ、正直どちらでも手間は変わらないんですが、当ブログの運営にも関わる事なんで、やはりココは気を使わないといけないポイントなのではないかなと。

・ ・ ・ ・ ・ ・ 。

 ……赤にしますか。
 いえ! 白はヤヴァいっス! 白はいけません! たとえ原画家にその意図があったとしても、やっぱり白だけはマズいっス! ココは赤で! 涙を呑んで赤で!
 さて、カラーライブラリーで色を探し、それっぽい赤(笑)を選んで、エンピツツールでいつものようにちまちまと原画の液体の部分をトレスしていきます。
 線画の時とやっている事は全く同じなので、解説の必要はないでしょう。
 強いて言えば、“液体”も柔らかい素材なので、出来る限り直線を描かないように、やや不規則に変化を加えながら描くように意識すると、“液体らしさ”が出ると思います。
 で、全ての“液体”(注:これは、床の部分以外は全て同一のレイヤーに描いていいです。レイヤー順は、線画の直上に来るようにしておきます。床の部分だけは別レイヤーにして、キャラの下にレイヤー順を入れ替えておきます)が描けたら、先ほどまでに描いた線画や色レイヤーに重ねて具合を見てみましょう。
 こうなりました。(↓)
Blog0340  ぎゃあああぁぁぁああぁぁあぁぁッッ!!!
 コワッ!!
 つかヤヴァッ!!
 このレナにいったいナニが起こったというのでしょう!?
 ナニをヤラれた!?
 つか、むしろナニを殺った!?
 ……とまあ、このように“液体”一つでこれだけ絵の印象が変わるのです。 皆さんも気を付けましょう。(←ナニを!? つかどうやって!?)
 それはともかく、微妙にキャラや小道具との整合性がおかしいトコロがちらほらありますね。 修正レイヤー(注:これは、キャラやナタよりも下になるようにレイヤー順を入れ換える)を作って、基本色のレイヤーを修正しながら修正レイヤーにも色を入れて修正していきます。
 液体の位置、特に、キャラやナタよりも手前にあるのか? それとも奥にあるのかを意識しながら、基本色レイヤー(手前)と修正レイヤー(奥)を使い分けて修正していきます。
 で、修正すると、こうなります。
Blog0341  キャラやナタと液体との整合性が合い、違和感のない液体になりました。
 ちなみに、ナタの液体を増量してみました。(笑)
 ……てゆーか、既に“萌えキャライラスト”じゃなくなってるように思うのは僕だけか?(笑)
 さて、このままでもいいですが、ちょっと気に入らないので色換えをしてみましょう。
Blog0342  <イメージ→色調補正→色の置き換え>を実行すると、左図のようなダイアログが開きます。
 このダイアログのプレビューウィンドウの白い部分が、色換えの対象です。これは、スポイトで指定すれば別の色を指定する事も出来ます。 また、<許容量>の項目は、明度や不透明度によるぼかしの範囲を指定するためのモノですが、今回はエンピツツールを使っているので特に弄る必要はありません。デフォルト値のままで行きます。
 そして、このダイアログの<結果>の項目にあるスライダーで色を変化させますが、色見本が表示されているウィンドウをクリックすると、ピッカーツールが開くので、そこで直接色を指定してもおkです。
 ただし、正確に指定した色にする事は出来ません。飽くまでも、スライダーの範囲内でしか変化しないので、スライダーの最大値を超える置き換えは出来ません。
 今回は、Rを思いっ切り強くして純色の赤に近い赤を指定しました。
 すると、こうなります。(↓)
Blog0343  赤が鮮やかになりました。
 もっとドス黒い赤の方が“ソレっぽい”ですが、今はとりあえずこれでおkとしておき、後ほどシェーディングの時に“ソレっぽい”色に変化させたいと思います。
 さて、今回の作業はココまでですが、今回も前回と同様、基本的には同じ事の繰り返しです。
 すなわち、自動選択→色塗りです。
 線画の段階で、完全に閉じた線画が描けていれば、マスクなどのプロユースのテクニックを使うより、コチラの方が断然ラクです。
 もちろん、原画によっては完全に閉じた線画が得られない事もあるので、マスク処理は必須になる……かと思いきや、実はそうでもなかったりします。
 結局のトコロ、マスクも自動選択法もやっている事は同じです。ただ、選択範囲の指定の仕方が違うだけです。
 完全に閉じた線画であれば、上記の自動選択法で選択範囲を指定し、基本色を置けば、これを自動選択してマスクの代わりに出来ます。
 完全に閉じた線画を得られなくても、閉じていない部分を手描きでちまちま描いていかなくてはならないのはマスクでも自動選択法でも同じなので、マスクを使わず最初から基本色を置いてしまえば、やはり基本色がマスクの代わりになります。
 もちろん、プロの現場ではマスク処理を行う方法が一般的に利用されているので、プロを目指すのであれば憶えておく必要のあるテクニックですが、個人であればそこまでこだわる必要はないと思います。
 ちなみに、今回の実作業時間は、約10時間ほどでした。
 うん、やっぱりこの方法の方がラクだ。
 次回は、シェーディングからハイライト、及び最後の仕上げまでやっていきたいと思います。


 ところで、この絵の背景なんですが、どんな背景にしましょう? やっぱり単色かなぁ~?
 ……と思って、試しに黒の単色を置いてみました。
 そしたら、こんなコトになりました。(↓)
Blog0344  逃げてェェェぇぇぇえええええぇえぇぇえぇぇぇぇッッッ!!!!



 といったトコロで、今週はココまで。
 楽しんで頂けましたか?
 ご意見ご感想、ご質問等があればコメにどうぞ。
 来週はシリーズ完結編、絵の完成まで一気に行きたいと思っております。お楽しみに!
 それでは皆さんまた来週。
 お相手は、asayanことasami hiroakiでした。
 SeeYa!(・ω・)ノシ



きょーのはちゅねさん♪


一曲歌わせて……もらえません!

Th3048 Thanks for youre reading,
See you next week!



-オススメアイテム-
※今回の記事に登場したソフト&ハードです。購入の参考にして下され。

Intuos4 Medium PTK-640/K0
※WACOM社のintuosの現行モデルです。僕が使用しているintuos3よりも使い易そうなカンジです。 また、これにAdobeのPhotoshopELやCorelのPainterETがバンドルするスペシャルエディション(型番:PTK-640/K1)もあります。 描画面のサイズが違うモデルもあるので、好みに合った物を探して下さい。 ちなみに、Bambooも複数種あるので、後述の公式サイトでそれぞれの仕様を確認してから買いましょう。

Cyborg Command Unit
※Saitek社のレヴァンティンです。 僕が使用しているモデルとは見た目が異なりますが、違うのは見た目だけです。 機能そのモノは全く同じです。 あると便利ですよ!(ゲームにも使えるし)


-関連ウェブサイト-
※上記のアイテムのメーカーサイトを含めた関連サイトのリンクです。活用して下さいませ。

Adobe公式ウェブサイト
※Adobe社の公式HPです。Photoshopを初め、Adobe社の製品は、パッケージ版以外にもこのサイトからDL版が購入出来ます。

WACOM公式ウェブサイト
※intuosシリーズやBambooシリーズのラインナップと仕様は、このサイトで確認して下さい。

Saitek Japan公式ウェブサイト
※Saitekは海外の会社ですが、日本法人があるので日本語サイトもあります。 レヴァンティンの仕様は、このサイトで確認して下さい。

BNN新社
光学社
※どちらもPhotoshop関連の書籍を多数出版している出版社です。 どれも参考になる書籍ばかりなので、本屋さんなどで同社の書籍を探してみて下さい。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

046.Photoshopで描く:萌えキャライラスト①b

2009年06月13日 | クリエーターズラボ

 塗りつぶしたら、表示を拡大して輪郭がより滑らかになるように修正を入れていきます。
 この時、はみ出たら消しゴムツールを使って消しても構いませんが、消しゴムツールを使うと輪郭にぼかしが入ってしまうので、一旦消しゴムが必要な部分よりもやや広い範囲を消し、改めて鉛筆ツールで修正を入れる。 という方法を取ると、より均一で滑らかな線に仕上がります。
 また作業中、時々左図のように原画レイヤーを非表示にして全体を確認するクセを付けましょう。
 原画レイヤーを表示したままだと、描き忘れがあっても気付かなかったり、目の錯覚で歪んだ線が滑らかな線に見えてしまう事があるので、そういった事がないか、このようにして確認するワケです。


 後はこれを繰り返し、原画の主線を全てトレスしていくワケですが、……ココでようやく、僕は自分の致命的なミスに気付きました。
 この原画、ちゃんとした原画じゃなくてラフ画なんですよね? なので、主線といらない線がごっちゃになっていて、それの見極めがとにかくやり難い! それも、一ヵ所や二ヵ所ならまだしも、そんなヵ所が足の指入れても数え切れないぐらいある。
 加えて、主線であってもラフなのでやや歪んでいる事もしばしば。 線が途切れているヵ所も多く、これらを修正するのにむちゃくちゃ時間を取られました。
 最初、この原画に決めた時は、「主線の抽出まで10時間ぐらいかな?…かな?」と楽観していたんですが、やりはじめてモノの2時間ほどで、「ヤヴァイ……。」と気付きました。
 しかし、気付いた時にはアフター・フェスティバル。後悔先に立たずとはこの事です。
 この時点で、ブログ記事のうp期限に間に合わないと判断。先週の、当ブログ始まって以来の“原稿落ち”と相成ったワケです。
 うぅ……、オレのバカ……。
 まあ、そんな事言っててもしょうがありません。始めたからには最後までやり遂げます。
 と、
 ようやく髪が描けました。
 開いたままになっていた髪の先端は、全て閉じるように修正しました。 この方が、色を置く時に何かとラクなので。
 これで8時間ぐらいです。
 ココからは、先の手順の繰り返しなので、もう書く事がありません。(笑)
 そこでココからは、仕上げだけでなく原画にも役立つ線画を描く時のコツ、というか、心得みたいなモノを解説していこうと思います。
 ……あ、その前にコレを解説しとかないといけませんね。
 髪の次にナタを描き始めたんですが、ナタは鉛筆ツールではなく、<シェイプツール>を使って描きました。(注:理由は後で説明します)
 シェイプとは、Photoshopに搭載されている簡易ベクタードローツールの事で、Illustlaterのようなベクタードローイングソフトほどではありませんが、ベクターを利用した滑らかな線が描けるツールです。
 まず、ツールボックスのシェイプツールのアイコンを右クリックし、サブメニューから<ラインツール>を選びます。
 次に、ツールバーの<線の太さ>の項目をクリックし、線の太さを“12pix”に指定します。
 あとは、直線を引きたいトコロの始点から終点までをドラッグすれば、左図のように均一な太さの直線を描く事が出来ます。
 ただし、このツールを使うと、引いた線の数と同じ数の新規レイヤーが自動的に作成されるので注意が必要です。
 曲線を描きたい場合は、まず始点と終点を結ぶ直線を引いておき、編集メニューの<変形→ワープ>を選び、左図のように変形させます。
 9つの区画に分かれたワープフレームをドラッグすると、それに連動して線が変形するので、原画と同じように湾曲させます。
 湾曲させたら、確定ボタンを押して確定します。
 あとはこれを繰り返し、必要な線を全て引いたら、レイヤーウィンドウでシェイプのレイヤーを右クリックし、ポップアップメニューから<レイヤーをラスタライズ>をクリックします。
 これで、シェイプがベクターからビットマップになります。
 逆に言えば、ラスタライズしてしまうと、二度とベクターとして加工出来なくなるので、先ほどの曲線のように加工が必要な場合は、ラスタライズする前にOKかどうかちゃんと確認しましょう。
 で、全てのシェイプをラスタライズし、レイヤーを結合させると、こうなります。(↓)
 まるで定規を使って描いたような、シャープな線が描けました。
 最後に、角や先端部など、はみ出たりしている部分を消しゴムツールと鉛筆ツールを使って修正して下さい。
 修正すると、こうなります。

 いかにもキレ味鋭そうなナタになりましたね。(笑)
 ちなみに、本来はミネの胸元に当たる辺りは隠れて見えないんですが、後々色を置く時のためにそのままにしておきました。
 また、柄の部分は、シェイプではなくフツーにトレスしました。
 先に描いた髪の主線と別レイヤーになっていますが、これはそのままにしておきます。
 次に、セーラー服と上半身を描いていきますが、これは髪と同じレイヤーに描いていきます。
 トレスオンリーなので、特に解説するコトはありません。


 さて、線画を描く時の心得です。
 まず注意しなければならないのは、描いている線が“どこの線なのか?”をシッカリと把握しておく事です。
 例えば、線が十字に交差している場合、縦の線と横の線のどちらが上になるのか? 縦の線と横の線は、同じマテリアルの線なのか? それとも違うマテリアルの線なのか? あるいは上から来て右に曲がっているのか? 左に曲がっているのか? 直進して下に行っているのか? 逆もまた然り。
 その線が、どのマテリアルを構成している線なのかをキチンと把握しておく事が大切です。
 先のナタを例に取ると、このナタのミネの一部は、キャラクターの胸元に隠れて見えなくなっています。 しかし、見えなくなっているからと言って描かない、あるいはミネの直線に続けて胸元のラインを一緒に描いてしまってはいけません。 何故なら、そこで線のイキオイが寸断され、本来あるべきナタのミネの一部が、削り取られているように“見えてしまう”からです。
 先にも記したように、今回の作例では、後々色を置く時に便利だから、という理由でナタのミネを消していませんが、一直線に描いたのはそれが理由なんです。
 ナタに限らず、キャラクターイラストの場合、複数のマテリアルが一本の線を共有している事がよくあります。
 例えば、顔と髪、腕と服の袖、スカートと足、上着とスカート、襟とスカーフ等々。 これに、今回のナタのような小道具や、複数のキャラクターが加わったりするとさらに大変です。 別々のマテリアルが一本の線を共有し合い、その線がどのマテリアルを構成している線なのかが把握し難くなってしまいます。
 しかし、だからといってシンプルな構図の絵ばかり描いていては、画力は一向に向上しません。 たとえ複雑になっても、描いている線が“どこの線なのか?”を考えながら描けば、おのずから描くべき線、マテリアルを構成している線が見えるようになってきます。
 また、共有している線が、どのマテリアルの線なのかが分かると、必然的にどちらを優先すべきかが分かるようになります。 何故なら、基本的に“より手前にあるマテリアルを優先する”のが原則だからです。
 手前にあるマテリアルが重なってしまい、奥になって見えなくってしまっているマテリアルは、見えないのだから描かなくてもいいんです。
 だから、線を共有している場合、手前にあるマテリアルを優先し、奥にあるマテリアルを後回しにして描いていけば、線の勢いが殺される事なく、理に適った線を描く事が出来ます。
 ただし、先のナタのように、線の勢いを優先しなければならない場合(注:詳細は後述)、たとえマテリアルが奥に配置されるモノだとしても、優先して描いておき、見えなくなっている部分を後から消す。 という方法を取った方が確実な場合もあります。 また、手描きでは難しいですが、デジタルならば別レイヤーにパーツ分けすれば簡単にこの方法が利用出来ます。
 どうしても線が歪なカンジになってしまうという時は、以上のような点に注意してみると良いと思います。
 と、
 ふぅ。 10時間以上がんばりましたが、ココでペンを握る手の握力が低下してきてしまいました。
 なので、ココで一旦保存して終了。 皆さんも、疲れたら適度に休憩を挟みましょう。 根の詰め過ぎは体にも良くないですし、絵の仕上がりにも確実に影響が出ます。
 ちなみに、保存は上書保存でおk。 作業中は、予期せぬトラブル(注:操作ミスよりは、PCそのモノの不調を懸念して)に備え、小マメに保存するクセをつけましょう。 上書保存のショートカットは、<Ctrl+S>です。


 続きです。
 上半身が描けました。
 腕の一部を描いていませんが、先に説明した通り、線の勢いが死ぬので本来は描くべきです。 しかし、今回はあえて描かずにそのままにしました。 ただ、このままだと後々色を置く時に不便なので、補助線は必要ですね。 次回描く事にしましょう。
 また、手はもうほとんど全部描き直しました。 原画のままでは全く使えない上、あーゆー手の描き方は、個人的に好きくないからです。 コッチの方が、僕的には好みです。
 少し手が大きくなってしまった感はありますが、元々僕は、手を比較的大きめに描くようにしているので、これも好みの範囲内です。
 本来、こうした原画の改ざんはやってはいけないんですが、ラフとはいっても原画のアレはあまりにもヒドイので、今回はこのようにしました。
 少し左手が小さいか?
 ……まあいいか。(←オイオイ)
 次はスカートを描いていきますが、念のため(?)別レイヤーにパーツ分けする事にしました。


 さて、線画の心得その2。
 先ほど記した線の勢いにも通じる事ですが、もう一つ注意しなければならないのは、“直線を描かない事”です。
 イラスト、特にキャラクターイラストでは、これは極めて重要な事で、例えば、皆さんのご自分の手を見て下さい。
 その手をじっくり、隅々までシッカリ観察して下さい。
 ……じっくり観察しましたか? では、次の質問に答えて下さい。
 直線は何本ありましたか?
 ……そう、答えは“ゼロ”です。 直線など、アナタの手には一本たりともないのです。
 これは、生物であれば至極当たり前の事で、少なくとも哺乳類であれば、身体の一部にでも“直線”があるようなコトはあり得ないのです。
 イラスト、特にキャラクターイラストとは、言うなれば人物デッサンです。
 描く対象が人物で、人物が哺乳類であるならば、その身体にはどこにも直線はないので、直線を描いてはいけないのです。
 線というのは、直線に近付けば近付くほど、硬くシャープな印象になります。
 逆に、曲線に近付けば近付くほど、線は柔らかい印象になります。
 特に、今回のお題である『萌えイラスト』では、これは極めて重要な要素で、“かわいい”、“キュート”、“萌え”という印象は、絵全体の線の柔らかさ、すなわち“直線がない事”によって得られるのです。
 おっと!
 スカートが描けました。
 これは全く改ざんしてません。
 ……あ、おしりの辺りの横方向のシワを一本描き忘れてる。(笑) 後で書き足しておきます。
 次は下半身を描いていきましょう。 これも、念のため(?)に別レイヤーにパーツ分けする事にしました。
 解説の続きです。
 先ほど、僕は常に“髪から描く”と書きましたが、最大の理由はコレです。
 髪という素材が持っている柔らかさ、しなやかさ、柔軟性といったモノを表現するには、髪を構成する全ての線が曲線である事が大前提です。
 だから、これをシッカリと描き、絵全体にその影響が出るようにするために、常に一番最初に描くようにしているワケです。
 特に、女性体や子供の場合はそれが顕著で、しなやかに湾曲した曲線美は、女性体の持っている柔らかな肌質を表現してくれます。(注:生物学的な見地から言っても、これは極めて理に適っている。女性体の皮膚組織は、男性体に比べて半分ぐらいの厚みしかなく、実際に柔らかい)
 服にしてもそれは同じで、ほとんどの衣類は、柔らかく柔軟な素材で出来ているので、これを表現するにはやはり曲線が欠かせません。
 さらに言うなら、女性体特有の胸やおしりといった部位は、まさに曲線によってのみ作り出す事が出来る柔らかさの典型です。
 柔らかく、しなやかに湾曲した曲線は、対象の質感を柔らかくし、絵全体の印象を柔らかくしてくれるのです。
 これとは逆に、小道具などの無機物は、直線で描いた方がいい場合があります。
 そう、今回の作例で言えば、ナタがそれです。
 ナタという小道具を構成している物質、すなわち金属を表現する時には、線を定規を当てて描いたように一直線に描けば、金属が持っている硬さ、剛性、シャープさを表現出来るのです。
 これは、小道具に限らず、車やバイク、自転車、机やイス、ビルやマンションや一戸建てといった背景に至るまで、人物や動物以外のほとんど全ての無機物に対して有効な手法で、実際マンガの背景などは、定規を使って直線で表現するのが基本です。
 もちろん、樹木や草花などは、有機物であり生物の一種なので、やはり曲線で描かなければいけません。
 絵を描く時には、マテリアルが何なのか? そのマテリアルを構成している物質は何なのかを意識して、曲線と直線を適切に使い分ける事が重要なのです。
「柔らかく、柔らかく、柔らかく……。」
 と、念仏を唱えながら描くと良いですよ?(注:ホントウデスヨ?)
 と、下半身が描けました。
 ……って、
 うはッ!wwwwwwww コレはマズいっス!wwwwwwwwwww
 何となくスカートに隠れている部分も描いたんですが、コレはさすがにエロ過ぎwwwwwww スカートレイヤーオフはヤヴァイっスwwwwww
 ヤーヴァイ! コレヤーヴァイ!└(゜Д゜)┘
 なので、これはさすがに自重しておきます。(笑)
 ちなみに、足は手と同様にかなり改ざんしました。


 さて、以上が描けたら、一度描いたパーツを全て表示して、原画を非表示にして全体のバランスを見てみましょう。
 こんなカンジですね!
 左図では、見易いように白ベタレイヤーの不透明度を100%に戻してありますが、実際の線画は主線以外は完全に透過されています。
 以上で、今回の作業は終了です。 お疲れ様でした。
 そうそう、「顔がないよ?」と思うかもしれませんが、これはワザとです。 顔の主線は、目を描き入れる時に一緒にやってしまうので、今回はとりあえずココまでです。
 先にも記したように、今回使用したトレス法は、完全にクリーンな線画が得られる代わりに、チマチマした作業が延々続く、非常に時間のかかる方法です。
 コレだけで、実作業時間は20時間ほどかかります。
 線画にこれだけ時間がかかると、もうそれだけでウンザリしてしまい、気力が続かない人が多いですが、ココからは比較的ラクです。 また、ココで苦労をしておかないと、逆に後で苦労させられる事になります。
 「どちらが楽か?」は、正直個人個人の主観によるトコロが大きいので一概には言えませんが、僕はこの方が楽だと思うので、こちらを推奨しています。
 最初に苦労をしておけば、後に得られる達成感もひとしおなのではないでしょうか?



 といったトコロで、今週はココまで。
 楽しんで頂けましたか?
 ご意見ご感想、ご質問等があればコメにどうぞ。
 次回は、基本色塗りから目の描き入れまでを解説する予定です。 来週もお楽しみに!
 それでは皆さんまた来週。
 お相手は、asayanことasami hiroakiでした。
 SeeYa!(・ω・)ノシ



きょーのはちゅねさん♪


私、ノコギリなんです……。


Thanks for youre reading,
See you next week!



-オススメアイテム-
※今回の記事に登場したソフト&ハードです。購入の参考にして下され。

・intuos4 PTK-640/K0
※WACOM社のintuosの現行モデルです。僕が使用しているintuos3よりも使い易そうなカンジです。 また、これにAdobeのPhotoshopELやCorelのPainterETがバンドルするスペシャルエディション(型番:PTK-640/K1)もあります。 描画面のサイズが違うモデルもあるので、好みに合った物を探して下さい。 ちなみに、Bambooも複数種あるので、後述の公式サイトでそれぞれの仕様を確認してから買いましょう。


・Cyborg Command Unit
※Saitek社のレヴァンティンです。 僕が使用しているモデルとは見た目が異なりますが、違うのは見た目だけです。 機能そのモノは全く同じです。 あると便利ですよ!(ゲームにも使えるし)


-関連ウェブサイト-
※上記のアイテムのメーカーサイトを含めた関連サイトのリンクです。活用して下さいませ。

Adobe公式ウェブサイト
※Adobe社の公式HPです。Photoshopを初め、Adobe社の製品は、パッケージ版以外にもこのサイトからDL版が購入出来ます。

WACOM公式ウェブサイト
※intuosシリーズやBambooシリーズのラインナップと仕様は、このサイトで確認して下さい。

Saitek Japan公式ウェブサイト
※Saitekは海外の会社ですが、日本法人があるので日本語サイトもあります。 レヴァンティンの仕様は、このサイトで確認して下さい。

BNN新社
光学社
※どちらもPhotoshop関連の書籍を多数出版している出版社です。 どれも参考になる書籍ばかりなので、本屋さんなどで同社の書籍を探してみて下さい。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

046.Photoshopで描く:萌えキャライラスト①a

2009年06月12日 | クリエーターズラボ

-Creater's Lab #03a-


 皆さんおはこんばんちわ!
 asayanことasami hiroakiでっす!(・ω・)ノ
 ちょいマジメなお話し。
 去る6月1日、世界第2位のアメリカの自動車メーカー、ゼネラル・モータース社(以下GM)が連邦法の適用を申請。GMは、事実上経営破たんしました。
 昨年9月のリーマン・ブラザーズ証券に続いて、再びアメリカを代表する大型企業が倒産し、世界経済の更なる混迷が予測されます。
 もちろん、今回のGMの倒産劇は、そのリーマンショックが引き金となり、経済不安から株価が暴落し、GMもその煽りを食らったモノで、GMが経営不振だったというワケではありません。 何せ、GMは世界第2位の業績を誇る自動車メーカーなのです。90年代までは、世界第1位(注:今世紀に入ってトヨタに抜かれた)だったのです。 多少の経営不振があったとしても、そう簡単に倒産するようなヤワな企業ではないのです。
 それもあってか、リーマンの時には全く動こうともしなかったアメリカ政府でしたが、今回はかなり迅速な行動がありました。
 経営破たんの申請以前から、ホワイトハウスはGMの役員らと協議し対応策を検討。
 申請と同時に、同社の株式を非公開にして、人員整理や業務規模の縮小を柱とした再建計画を打ち出し、事実上、一時的な『国営化』によって連鎖的に発生すると予測される経済的混乱を最小限に止める努力が続けられています。
 多少楽観的かもしれませんが、リーマンの時ほどの混乱は起きないように思います。 ってゆーか、そもそも負債額も6兆円程度と、リーマンの約10分の1程度しかないので、それほどの混乱が起きる要素は元々ないのかもしれません。(注:と言うより、ホワイトハウスは事実上リーマンは見捨てましたが、“僅か”6兆円規模だったから、GMは再建しようと考えたのかもしれません。公的資金の負担が軽くて済むから)
 もちろん、GMはアメリカを代表する巨大企業であり、これが倒産するという事は、日本で言えばトヨタやソニーが倒産するのと同等の大事件であり、アメリカ国民の国民感情的には、かなりヘコむ出来事であるのは確かです。
 とは言え、今回のホワイトハウスの迅速な対応は、リーマンの時とは比べ物にならないほど速く、しかも的確です。 こういうのを見せられると、やはりリーマンはホワイトハウスの切り捨て政策の一環だったのではないかと思えてしまいます。
 そうなると、まことしやかに囁かれているある陰謀説が真実味を帯びてきてしますが、これはハナシが違うので詳細は省きます。(笑)
 それはともかく、GMは今後、人員整理や事業縮小で3割程度の業務縮小が行われるらしいですが、そうなると、GM傘下のディーラーはどうなるんですかね?
 日本でも人気の高い車種が多いGM傘下のディーラーが、やっぱり少なからず閉鎖されてしまうんでしょうか?
 クルマ好きの僕としては、シボレーやハマーの姿を見る機会が少なくなってしまうので、一抹の寂しさを覚えてしまいます。(僕は買えないけどな!)
 はてさて、どうなるコトやら……。
 ちなみに、聞いたハナシによると、例のリーマンの倒産は、昨年の頭ぐらいから一部のエコノミストの間では予測済みだったらしいです。(←マテコラ)


 それとは関係ありませんが、以前お伝えしたインターネット社のVOCALOIDシリーズ第2弾、『メグッポイド』の優待販売受付が6月5日に開始されました。 価格が実勢価格より2割ぐらい安いです。
 ただし、優待版は通常版のみ。初回限定版はありません。
 また、既にインターネット社製の他の製品を購入&ユーザー登録済みの方のみを対象としたオンライン販売ですので、MIXTUREやSSWシリーズユーザーにはオススメですが、インターネット社製の製品を購入&ユーザー登録されていない一般ユーザーは、フツーにお店で買う方が確実と思われます。
 詳しい情報は、インターネット社のHP(→こちら)にてご確認下さい。



 それはさて置き、今回は久々の『クリエーターズラボ』のコーナーです。
 皆さま、大変長らくお待たせしました。 今回は、いよいよ『萌えキャライラスト』のテクニック解説です!
 さらに、今回からナンと実に3回(←またか!)に渡って、Photoshopを使った萌えキャライラストのテクニック解説をしようという壮大な(?)企画!
 今回は第1回目という事で、機材の準備から主線の抽出までを解説していこうと思います。
 ただし、例によって僕が使用しているのはPhotoshopのCS2であり、現行バージョンのCS4とは微細な相違がある場合があります。 また、当ブログの『036.PhotoShopで描く3DCGっぽいイラスト』で解説済みのテクニックに関しては、基本的に解説を割愛してあります。 予めご了承下さい。
 SSのサイズも、前回同様小さめです。見難い場合は、サムネイルをクリックして拡大表示してご覧下さい。
 それでは、今回も最後までお付き合い下さいませませ。


・今回のお題

 それではまず、今回のお題を発表しましょう。
 今回のお題は、コチラ(↓)です!
Blog0296  ハイ、『ひぐらしのなく頃に』のTVアニメ版の原画集です。(笑)
 これは、TVアニメ版1stシーズンの1話~8話までの原画を収録した画集ですが、シリーズ化はされておらず、TVアニメ版の原画集は、事実上これが唯一です。
 これをお題に選んだ理由は、手描きのオリジナル原画を使っても良かったんですが、原画を描くのがメンドクさかった(←オイ!)というのもありますが、この原画集は、A4サイズと版が大きく、加えて、まるで「思う存分スキャニングしてくれ!」と言わんばかりに片面印刷(注:本のような両面印刷だと、スキャニングの際に裏面が透けて写りこんでしまう。これを防ぐ手段はあるが、多少メンドクさい上作業の手間が増える事がある)だし、ネタとして面白いのではないかなと。(笑)
 で、今回は、この中から1枚を選んで、これを原画としてアニメセル画調のイラストを描いてみたいと思います。
 さて、問題の原画はというと、今回はコチラ(↓)を選びました。
Blog0297 ……ってよりにもよってコレかい!(笑)
 だぁってぇ~~、“ぬり絵”とか書いてあるしぃ~~。(笑)
 これは、アニメ版の原画ではなく、この画集のために総作画監督の沼田誠也氏が寄稿した書き下ろしイラストです。 今回は、これを使います。
 はてさて、どんな絵に仕上がるコトやら……。
 しかしこの選択が、まさかあのような地獄を見る事になろうとは、asayanはこの時、まだ知る由もなかったのです……。


・機材の準備


 さて、実際に描き始める前に、まずは必要な機材や資料を用意しなくてはなりません。
 前回の『3DCGっぽいイラスト』では、作業内容の関係上、ソフトウェア以外は“必須”となる機材や資料がありませんでした。
 と言うのも、アレはPhotoshopというソフトの基本的な使い方、機能、出来る事と出来ない事を説明するために書いた、言わば『基礎編』であり、初心者でも出来るようにマウスとキーボードのみで作成可能な作例だったからです。
 実際、僕もアレを作成した時は、マウスとキーボード以外のデバイスは使ってません。
 しかし、今回の『萌えイラスト』は、言わば『応用編』であり、Photoshopを使ったイラスト、CG、マンガを描く時には“必須”となる機材やテクニックを説明していくからです。
 ではまず、この写真(↓)をご覧下さい。
Blog0320  今回の作業で“必須”となる入力デバイスです。
 当ブログでは、以前にも『002.オレの相方(入力デバイス編)』で紹介しましたが、WACOMのペン入力タブレット、『intuos3 PTZ‐630』(シュベルトクロイツ)です。
 WACOM社のタブレットは、昨年2008年に現行モデルの『intuos4』がリリースされています。
 現行モデルのintuos4では、このintuos3では左右対称だったデザインが“上下対称”になり、左右に分かれていたキーパッドが片方に寄せられました。 “上下対称”なので、右利きの人は、このキーパッドが左側に来るように置き、左利きの人は右側に来るように置く事で、利き手に関係なく、誰でも自分に合わせてタブレットを利用出来るようになりました。
 いわゆる“ユニバーサルデザイン”ってヤツですね。
 ただし、intuosシリーズはやや高価(定価3万円台から)なので、金銭的に利用が難しい人は、同じWACOM社の『Bamboo』を利用するというのも手です。
 描画面の範囲がかなり狭い(注:A6~A5サイズ)ですが、僅か9000円程度と安価なのと、intuosのようにムダに高機能(注:先のキーパッドは、それぞれのキーにキーボードのキーを割り当てる事が出来るが、ドロップダウンリストから選択する形式を取っており、リスト外のキーや、複数のキーを同時押しするショートカットなどは割り当てられない。Photoshopでイラストを描く場合、ショートカットを多用する場面が多いので、せっかくのキーパッドが役に立たない)ではないので、初心者にも向いています。
 実際、僕も最初はBambooの前身であるFoviaという同様の製品を使っていましたが、特に不都合は感じませんでした。
 ただ、今のようにintuosに慣れてしまった後では、さすがに「描画面が狭過ぎる!」と感じるかもしれません。
 いずれにせよ、タブレットは“必須”なので、上記を参考に必ず用意して下さい。
 ちなみに、WACOM社のタブレットには、上記以外に液晶ディスプレイをそのままタブレット化した“液晶タブレット”(注:商品名はCintiq)なるモノがあります。
 液晶画面がそのまま描画面になるので、実際に紙に描いているのと同じ感覚で描けるのが最大のメリットですが、価格が11万円以上(注:フラッグシップモデルは25万円以上)と極めて高価なので、僕はオススメしていません。
 このような高価な機材を使うのは、プロになってからでも遅くはありません。 アマチュア、あるいは趣味程度であるなら、宝の持ち腐れになるだけなので、多少使い難くても安価なモノを選びましょう。(注:また、このような多少使い難い機材だと、それを補うために多少の工夫が必要になり、その過程で上手い絵を描くのに必要な重要なテクニックを自然に身に付ける事が出来る。詳細は後述)


 また、タブレットを使う時は、必ず手袋(注:写真参照)を使いましょう。
 手描きのマンガ原稿でも、原稿をキレイに保つために手袋が“必須”ですが、タブレットでもそれは同じです。
 タブレットをキレイに保つという意味でもですが、タブレットの描画面は、紙とは異なる樹脂性で、樹脂はヒトの肌に張り付きやすいという性質を持っているので、長い線を描く時などは、手がタブレットに張り付いて動かなくなってしまい、キレイな線が描けずにイラつく場面が多々あります。
 これを防ぐために、手袋が“必須”というワケです。
 僕の場合、百均で買った“ドライブ手袋”(注:おばちゃんが、車に乗る時に日焼け防止につけてるヤツ。ただし、滑り止め用のゴムのツブツブが付いてるヤツは不可)というのを使っています。
 これの、親指、人差し指、中指の部分(注:すなわちペンに直接触れる指)を第二関節辺りで切り取って使っています。
 プロのマンガ家でも、手袋ではなくハンカチやティッシュペーパーで代用している人がいますが、僕は手袋を推奨しています。
 また、汚れたら洗って使ってもいいですが、僕は使い捨てしてます。洗うと縮む事があるので。


 それと、これは必須ではありませんが、ゲーム向けの左手用コントローラー(レヴァンティン)があると、作業がかなりラクになります。
 これに、Photoshopでよく使うメニューのショートカットを登録しておけば、2キー同時押しや3キー同時押しなどの複雑なショートカットも1キーで一発で使う事が出来るようになります。
 また、フツーに市販されているキーボードは、4キー同時押しに対応していない(注:4つ目のキーが押しても認識されない)事が多いので、4キー同時押しのショートカットを使う場合は、こういった機材が必須になります。(注:多用するワケではないが、Photoshopには4キー同時押しショートカットが多い)


 これ以外に必要な機材として、スキャナがあります。(注:写真撮るの忘れました。サーセン)
 手描きの線画(注:あるいは原画。英語ではキーフレームと言う)を取り込む際に必須になるので、1台は用意しておきましょう。
 詳しくは後述しますが、Photoshopを初めとしたソフトウェアドローイングの解説本を読むと、よく「複合機ではなくスキャナ単体機を選びましょう」と書いてある事が多いですが、正直必要ありません。 複合機でも十分です。
 複合機は、プリンター一体型という性格上、商品単価を低く抑えるために性能を落とし、生産コストを抑えていますが、カラー原稿やカメラのフィルムを直接取り込むのでもない限り、モノクロの手描き線画を取り込む程度ならば、複合機程度の性能でも十分過ぎるほど十分です。
 解像度で比較すると、スキャナ単体機の場合は、最大で4800dpiという超高解像度で取り込めますが、複合機の場合は、最大でも1200dpi程度というのがほとんどです。
 ですが、実際に線画の取り込みに必要な解像度は、450~600dpi程度なので、複合機でも十分なのです。
 高価な単体機よりも、安価で場所も取らない複合機を選んでおkです。(注:ただし、プロになったら単体機を使いましょう。同じ解像度でも、複合機より精度が高いので)


 機材が揃ったら、今度は資料を集めましょう。
 今回は、主に以下のような資料を使います。
Blog0321  左側の大判3冊は、いずれもTVアニメ版『ひぐらしのなく頃に』の関連書籍です。
 原画集は、飽くまでも原画集なので配色見本となるカラー画がありません。なので、配色見本となるカラー画が収録されているこういった書籍を、参考資料として使用します。
 ただし、今回は飽くまでも“アニメセル画調のイラスト”を描くので、原作版やコンシューマ版の関連書籍は、参考資料からあえて外しました。 配色がアニメ版とは異なるため、選択肢の幅は増えますが、統一感が無くなる恐れがあるためです。
 右側の下段4冊は、いずれもPhotoshopを使った萌えイラストの描き方解説本です。
 同様の書籍は、複数の出版社からかなりの数が出版されており、僕は10冊ぐらい買いましたが、それでも本屋さんで見かけただけで買ってない本の方が多いぐらいです。
 今回解説しているテクニックは、こういった書籍から学んだテクニックをベースに、僕が自分でやりやすいようにアレンジしたり組み合わせたりしたテクニックです。
 また、右側上段の2冊は、いずれも配色見本帳です。
 本来は、萌えイラストだけでなく、イラスト全般、絵画やポスター、広告、ウェブデザインなどの資料として出版されているモノですが、萌えイラストでもこのような本は配色配置の見本として重宝するので、無いよりはあった方がいいです。
 これ以外にも、同様の書籍は複数の出版社から多数出版されていますが、本来は、こういった本の方こそ、数を集めるべきです。
 主な理由は、配色の使用例をより多く参照出来るようにしておく事で、配色のパターンがワンパターンで似通ったモノばかりになるのを防げるからです。
 最低でも、同様の書籍を3~4冊、あるいはそれ以上用意しておくと、かなりバリエーションが増えるハズです。
 また、こうした資料は、集めれば集めるほど、後々データベース的に参照出来るようになるので、出来る限りたくさん集めるようにしましょう。
 もちろん、こういった書籍は比較的高価で、1冊2000円以上するため、一度に全部集めようとするとまず間違いなく悪夢を見ます。
 時間がかかってもいいので、1冊ずつ確かなモノを集めていきましょう。
 そして、より多くの資料を参照するように心がけましょう。


・原画の取り込み

 さて、機材と資料が揃ったら、いよいよ作業開始です。
 ではまず、原画をスキャナで取り込みましょう。
Blog0298  本来、スキャナにはメーカーがバンドルした専用のスキャニングユーティリティがあり、これを使う事でそのスキャナの機能をフル活用出来るように設計されていますが、このユーティリティソフトは、メーカーがそれぞれ独自に開発しており、インターフェースやメニュー、機能にかなりの差があります。
 僕が使っているスキャナは、エプソン製の複合機ですが、キャノンや富士ゼロックスのスキャナを使用している方には、応用が利かない恐れがあります。
 そこで今回は、Windowsの標準機能であるTWAINによるスキャニングを行う事にしました。(SS参照)
 Photoshopのメニューから、<ファイル→読み込み→WIA[スキャナ名]>のメニューをクリックすると、SSのようなダイアログが開きます。
 まず、何もせずにスキャナに原稿をセットして<プレビュー>のボタンを押します。すると、右側のプレビューエリアにプレビューが表示されるので、原画の位置のズレや歪み、目に見える大きな汚れ等がないか確認します。
 ちなみに、本のままだと本の折り目周辺の像が、暗くなったり歪んだりするので、思い切って切り取ってしまった方がいいです。
 僕は切り取りました。つД`)゜。
 問題が無ければ、プレビューエリアの点線の枠をドラッグして、取り込み範囲を広げます。
 TWAINには、描画されている部分と余白を自動的に識別して、描画範囲のみを取り込み範囲にする機能がありますが、モノクロ原画の場合、ホントにギリギリの範囲で識別してしまうので、必ず広げておきましょう。
 また、余白はあればあるほど、というワケではありませんが、ある程度以上は必ず必要です。
 Photoshopで作業をする時、拡大表示すると線が画面の端によってしまい、作業しにくくなる事があるので、余白を持たせておく事で、全ての線が画面の中央に表示させられるようにしておくワケです。
 作例のような縦長の原画の場合、横の余白が足りない事が多いので、最大まで広げておきます。(逆に、横長の場合は縦幅が足りなくなり易い)
 作例では、縦幅に余裕があったので、上下の余白が同じぐらいになるように調整しましたが、不安なら最大まで広げても可です。
 次に、<スキャンした画像の画質の調整>というリンクをクリックして、詳細プロパティを開きます。
Blog0299  ココで、<解像度>を“600dpi”にして、<画像の種類>を“グレースケール”にします。
 今回は、印刷にも耐えられる解像度にするために600dpiを指定しましたが、ウェブページに貼る用であれば、450dpi程度で取り込んでも構いません。 ただし、その場合は印刷にはやや不向きになるので、注意が必要です。
 ウェブ/印刷兼用の場合は、印刷用(600dpi)に合わせるようにしましょう。
 また、前回の『3DCGっぽいイラスト』とは異なり、600dpiの高解像度なので、ファイルサイズがかなり大きくなります。 処理も重くなるので、HDDとメインメモリの容量には余裕を持っておきましょう。
 画像の種類は、僕の場合はモノクロ2階調(注:白と黒のみに変換)でも構わないんですが、原画の主線の濃淡まで欲しい時のために、グレースケール(注:モノクロ2階調に中間色のグレーを足したモノ)にしておきます。
 皆さんが描く時も、グレースケールで取り込むクセを付けておくと良いかもしれません。(注:飽くまでもモノクロ原画の時のみ。カラーの場合は、当然カラーを選びましょう)
 また、TWAINには、明るさやコントラスト、カラーバランス(カラーモードのみ)の調整も可能ですが、ココではやりません。Photoshopにある同様の機能の方が高機能なので、今回はそちらを使います。
 ココでは、解像度と画像の種類だけを指定し、シンプルに取り込みます。


 以上の設定が終わったら、<OK>のボタンを押してプロパティを閉じ、<スキャン>のボタンを押して原画を取り込みます。
 で、取り込むと、こうなります。(↓)
Blog0300  単純に取り込んだだけなので、描画面全体がグレーがかって暗いですね。 線も薄くて細部が見難いです。
 これは、普通に紙に描かれたモノを取り込んだ時、どんなスキャナでも必ず起こる現象で、仕様なのでどうしようもありません。
 これを補正するために、肉眼で原画を見た時と同じような明るさ(注:紙の白さ)になるように、先の画質調整でカラーバランスやコントラストを調整(注:これを“色調補正”という)する必要があるワケですが、今回は、これをPhotoshopの機能を使ってやってみましょう。
 ちなみに、この状態の原画を保存しておきたい場合は、次の作業に入る前に、<ファイル→別名で保存>で任意の場所に保存しておきましょう。


・色調補正

 ではまず、取り込んだ原画をレイヤー化しておきます。
 レイヤーウィンドウに、レイヤー名が“背景”となっているレイヤーがあるハズなので、これを右クリックし、ポップアップメニューから<背景からレイヤーへ>のメニューをクリックして、背景をレイヤー化しておきます。
 これは、背景のままだと加工出来る範囲に制限がかかる(注:消しゴムツールで消しても透明にならない、レイヤー順を入れ換えられないなど)場合があるので、レイヤー化してこの制限を無効化します。
 最終的に、この原画は以下の色調補正以外の加工は行わない上、絵が完成したらレイヤーごと削除しても構いませんが、僕は常にやるようにしてます。
Blog0301  色調補正は、メニューバーの<イメージ→色調補正>のメニューから行います。 まず、<レベル補正>のメニューをクリックし、左図のようなダイアログを開きます。
 ココで、グラフの下にある小さな上向きの矢印を左右にドラッグして、黒がより黒く、白がより白くなるように調整します。
 黒、グレー、ホワイトの3つがありますが、それぞれ個別に調整していきます。
 今回は、<入力レベル>の項目にあるような数値になるように調整しましたが、これは原画によってケースバイケースです。 矢印をドラッグすると、ワークウィンドウの原画がほぼリアルタイムに変化するので、それを見ながら、黒がより黒く、白がより白くなるように少しずつ調整していきましょう。
 ただし、やり過ぎると肉眼では分からなかった原画の汚れ(注:消しゴムをかけた跡、あるいは紙そのモノの製造過程で封入されてしまったゴミなど)が浮き出てきたり、逆に薄い線が飛んで消えてしまったりするので、原画の隅々まで確認しながら、少しずつ、慎重に調整していきましょう。
 慣れない内は時間がかかるかもしれませんが、慣れてくると感覚で調整出来るようになります。 経験を積みましょう。
Blog0302  本来なら、このレベル補正だけで十分ですが、ちょっと気に入らない箇所が何箇所かあったので、今回は同じ色調補正メニューの<明るさ・コントラスト>の調整も行いました。(左図参照)
 ココで、全体をやや明るめにし、コントラストを強調気味に調整しました。
 すると、こうなります。(↓)
Blog0303  グレーがかっていた白がより白くなり、主線がハッキリして原画全体がクッキリしたカンジになりました。
 これをやっておくと、この後の主線の抽出がやり易くなるワケです。

Blog0304  さて、主線の抽出に入る前に、以下の操作を行っておきます。
 メニューから、<ウィンドウ→アレンジ→[ファイル名]の新規ウィンドウ>のメニューをクリックします。
 すると、全く同じウィンドウがもう一つ開きます。(左図参照)
 これは、アレンジウィンドウと言って、両方とも同じファイルの全く同じ状態が表示されており、一方を加工するともう一方にもその結果が反映されます。
 これを利用し、一方を実際のワークエリアとして、もう一方には絵全体を表示させておき、ワークエリアで拡大表示で作業をしている最中でも、縮小表示しなくてももう一方で絵全体のバランスを確認出来るワケです。
 またこれは、デュアルディスプレイ環境であればさらに効果的に利用出来る機能なので、デュアルディスプレイ環境がある方はぜひ一度試してみて頂きたい機能です。 作業効率が格段に上がる事請け合いです。
 シングルディスプレイでも、ワイドディスプレイであれば、十分に利用出来る機能ですが、スタンダードディスプレイ(スクウェアディスプレイ)だと、逆にウィンドウの切り替えがメンドクさくなるかもしれません。(注:左図がそれです。ツールバーやレイヤーウィンドウを置いておくスペースがない! 僕は、普段はデュアルディスプレイで作業してます)
 次に、<レイヤー→新規→レイヤー>で新規レイヤーを作り、ココに塗りつぶしツールで白ベタ(RGBオール255)を塗ります。
 そして、レイヤーウィンドウの<不透明度>の数値を50%にします。
 こうしておくと、後述の主線の抽出がやり易くなります。(注:詳細は後述)


 以上の作業が終わったら、一度保存しておきます。
 任意の場所に分かり易いファイル名を付けて保存します。(注:先に原画を未加工で保存している場合は、同じファイル名にならないように注意) 今回は、ファイル名を“renatan”としました。
 今後は、これがワークファイルになり、作業の過程で随時<上書保存>する事になるので、必要ならば保存用にファイル名を変えてもう一つ保存しておきます。


・主線の抽出

 さて、ココからが今回のメインディッシュ。シュベルトクロイツの出番です。
 主線の抽出とは、原画から鉛筆、あるいはインクで描かれた主線だけを取り出し、紙の色である白を取り除く作業の事を言います。
 ではまず、下のSSをご覧下さい。
Blog0305  これは、原画のある部分を200%に拡大表示したモノですが、主線以外に小さな黒い点々や、ミミズがのたくったような線があるのが分かりますね?
 これは、肉眼では確認出来ないサイズの小さな“汚れ”で、これを“ゴミ”と言いますが、これはどんな原画であっても必ずあります。
 たとえどんなに注意を払っても、消しゴムをかけた時の紙の汚れ、鉛筆やインクのミクロンサイズの欠片、原稿に触れた時の手垢、空気中に飛散しているホコリ、あるいはスキャナのガラス面の汚れなど、様々な要因によってスキャニング時に少なからず写り込んでしまうため、例えクリーンルームでスキャニングしても、紙の製造段階で紙そのモノに封入されてしまったゴミまでは取り除けないので、ありとあらゆる全ての原画に必ず付いて回る“ゴミ”です。
 主線の抽出にはいくつかの方法がありますが、結局は、突き詰めると主線の抽出はこの“ゴミ”を取り除く“ゴミ取り作業”に終始します。
 これをシッカリと取り除いておかないと、この後の全ての作業で必ず取り返しの付かない失敗をします。
 かなりメンドクさい作業ですが、メンドクサがらずにシッカリやりましょう。


 さて、主線の抽出にはいくつか方法がありますが、主に二つの方法に分類出来ます。
 一つは、『抽出法』(命名、オレ)です。
 これは、自動選択ツールやマスク処理などを使い、主線だけを残して後のいらない部分(注:白い余白部分や、主線以外の不必要な線など)を、消しゴムツールやカットコマンドを使って消していく方法です。(注:白で塗りつぶしていく方法もある)
 この方法だと、原画の主線をそのまま利用する事になるため、原画の線の細かなニュアンスや濃淡が、そのまま完成CGに生かせるというメリットがあります。
 そのため、アニメやマンガ、あるいはギャルゲーに代表されるノベル系ゲームの立ち絵やイベントCGなど、原画と仕上げの担当者が異なる場合、仕上げ担当者が原画家の意図した線を(良い意味でも悪い意味でも)改ざんしてしまわないように、この抽出法が一般的に行われています。
 なので、プロを目指すのであれば、これは必須テクニックになるのでこの方法を覚えておく必要があります。
 ただし、“ゴミ”を一つ一つ手作業で取り除く必要があり、非常に手間がかかる上、商用にも耐え得るレベルのクォリティになるにはある程度の経験が必要になる、あるいは主線をパーツ毎にレイヤー分けする必要がある場合などは、逆に手間がかかってメンドクさいなどのデメリットもあります。
 もう一つの方法は、『トレス法』(命名、オレ)です。
 これは、先ほどの抽出法とは異なり、原画レイヤーを一切加工せず、全くの透明な新規レイヤーを原画レイヤーに重ね、ブラシツールやペンツールなどで文字通り主線をトレーシングする方法です。
 この方法だと、原画のゴミの有無や数に関係なく、ゴミや汚れの消し忘れも一切無い、完璧にクリーンな線画が出来るというメリットがあります。
 ただし、原画家と仕上げ担当者が異なる場合、先に抽出法で説明した理由で、解釈の違いから原画家が意図した線と異なる線画になってしまう可能性が高いため、プロの現場ではまず使われていない方法です。
 また、この方法はとにかく時間がかかるという致命的なデメリットがあります。
 結局のトコロ、トレスと言ってもトレペに写し取るのとは異なり、解像度の違いから、元の原画の何倍もある巨大な紙に写し取るのと同じだからです。
 イメージ的には、A4サイズの原画の場合、A全サイズの2倍(面積はA4サイズの16倍)の紙に、原画と全く同じ絵ゼロから描いていくのと同じです。
 なので、本来はオススメ出来ない方法なんですが、僕は基本的にこの方法で描いてます。 ゴミ取りの手間に比べたら、時間がかかるぐらい……。(注:飽くまでも僕の個人的な見解です)
 ちなみに、先に白ベタのレイヤーを作ってもらったのは、このトレス法のための下準備です。
 半透明の白ベタレイヤーがないと、トレスした線と原画の線が同じ濃さの黒色のため、トレスし忘れやスキ間が残ったりします。
 これを防ぐために、白ベタで原画の主線をややグレーにしておくワケです。(注:「原画そのモノの明度を下げれば良いのでは?」と思うかもしれませんが、それだと細い主線が飛んで見えなくなってしまう事があるので、僕は上記の方法を推奨しています)


 さて、それではトレス法の手順です。
 まず、白ベタの直上に新規レイヤーを作成し、これをワークレイヤーとします。(注:これ以外のレイヤーは、レイヤーウィンドウの南京錠アイコンをクリックしてロックしておくと、間違いが起こりません)
 このワークレイヤーに、<鉛筆ツール>で原画をトレスしていきます。
 ブラシツールやペンツールなどだと、ピクセル周辺にぼかしが入ってしまい、見た目にはキレイ(注:飽くまでも“見た目”は。実際には塗り残しが多発し易い)ですが、均一な濃度の線が描けない(あるいは描き難い)ので、ぼかしが無く、均一な濃度の線が描ける鉛筆ツールを使います。
 太さは2pixにしましたが、これは原画の線の太さによって変えてもおkです。
 ただし、太くし過ぎると微妙な修正が困難を極めるので、あまり太くし過ぎないように注意が必要です。
 僕の経験上から言わせてもらうと、4pixが限界でしょう。(注:それでもかなり太い)
 また、カラーは黒(RGBオールゼロ)を選びます。
 ちなみに描き始める順番ですが、これはお好みでおkだと思います。 ただし、キャラクター画の場合は、やはり基本は顔周辺からでしょうね。 キャラクター画は、何と言ってもやはり顔が命ですから。
 僕の場合は、どんなキャラクターでも必ず髪から描くようにしてます。 好きなんですよ。髪描くの。(注:髪は女の命ですからね!)
 で、トレスの手順ですが、まず、原画の主線をよく見極め、主線の輪郭を丁寧になぞり、左図のように輪郭を一通りトレスします。
 あまり広い範囲を一気にやろうとせず、左図程度の範囲を目安にチマチマとトレスしていきます。
 次に、<塗りつぶしツール>で輪郭線の内側を塗りつぶします。
 この時、輪郭線に1ピクセルのスキ間もない事を必ず確認して下さい。1ピクセルでもスキ間があると、そこから流れ出して意図しない場所まで塗りつぶされてしまいます。
 もちろん、そうなっても慌てず騒がず、ヒストリーや編集メニューでアンドゥすれば元に戻りますが、かなりイライラするので注意深く確認し、完全に閉じた輪郭線を描くようにましょう。
 また、輪郭線を描く範囲は、あまり大きくなり過ぎないようにしましょう。 目安としては、ウィンドウの範囲内に収まる程度の範囲で、適度に区切りを付けると良いです。 ウィンドウの表示範囲を超えると、先の確認に手間がかかるため。


to be continued...

コメント (1)
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

036.PhotoShopで描く3DCGっぽいイラストb

2009年03月28日 | クリエーターズラボ

・壁の作成

 では次に、壁を作っていきます。

 お題のSSを見ると、壁のテクスチャーには“WALL 128x128”というテキストが入っていますね。BOXのテクスチャーを作ったのと同じように、テンプの方でこれもテキストツールを使って作り、左肩のイイ感じの位置に置きます。
 ただし、コレは水平反転ナシです。SSでは反転していないので。
 次に、これを同様にテスティングにコピペして、拡大・縮小と歪みを使って変形させます。ただし、フロアタイルと同じように、縮小率はBOXの2倍。すなわち“66.6%”にして、歪みは同じ“26.6°”にします。これも、スケールとパースを統一させるためです。
 変形させたら、このレイヤーをBOXとフロアの間に置き、移動ツールで左図のような位置に動かします。
 移動させたら、レイヤーをコピーして画面右上を壁で埋めていきます。
 ……って、せっかく入れた“WALL 128x128”が切れちゃってますね。(笑)
 これではもったいないので、さらにレイヤーをコピーして修正しましょう。
 まず、予めフロアの壁に隠れている部分をカットします。
 BOXの修正レイヤーを作った時と同じ要領で、自動選択ツールを使って壁全体を選択し、フロアのレイヤーを指定してカットします。
 次に、壁のテクスチャーをコピペして、同様に縮小と歪みで変形させ、左図のような位置に壁テクスチャーを追加します。(注:左図では、分かり易いようにフロアとBOXのレイヤーを非表示にしてあります。また、壁テクスチャーのツナギ目を見易くするために、黒単色の背景レイヤーを置いてあります。テクスチャーのツナギ目に、薄っすらと黒っぽい線が入っているのが見えますか? このように、反対色のレイヤーを下に置いておくと、コントラストが強調されて手前のレイヤーが見易くなります。この場合は白だったので黒を置きましたが、赤の場合は青、緑の場合はオレンジ、紫の場合は黄色が、それぞれ反対色になります。また、このレイヤーは必要なくなったらレイヤーごと削除してしまえばいいので、レイヤーを直下に置いてもOKです)
 壁テクスチャーのレイヤーを全て結合したら、このレイヤーをフロアレイヤーの直下に置き、フロアレイヤーとBOXレイヤーを表示させ、左図のような位置に移動させます。ちなみに、上下だけでなく左右の位置も少しずらしました。
 そのため、画面左上にスキ間が出来てしまったので、壁レイヤーの直下に修正レイヤーを作り、テクスチャーのツナギ目の修正(白ベタ)とスキ間埋め(オレンジベタ)を塗って修正します。(注:白ベタは、塗りつぶしツールで直接白をベタ塗りすればOKですが、オレンジの修正は矩形選択ツールで修正する範囲よりやや大きめの範囲を矩形選択し、塗りつぶしツールでベタ塗りするとカンタンです。修正レイヤーは、出来たら結合してしまってもOKです)
 修正が出来たら、壁は完成です。


 さて、必要なオブジェクトは以上で完成ですが、コレだけでは絵は未完成です。
 なので、次に最後の仕上げ、シェーディングを行って絵を完成させましょう。


・シェーディング

 影付けとも言います。
 シェーディングは、どんな絵画でも最も重要な仕上げ作業の一つで、これをやるとやらないのとでは、絵の完成度に雲泥の差が生じます。
 今回は、特に“3DCGっぽい絵を描く”というのがテーマなので、もっと3DCGっぽくなるようにシェーディングを行って絵の完成度を高めましょう。
 ちなみに、今回は画面の左上に光源があるという設定でシェーディングを行っていきます。
 まず、BOXを作った時に残しておいたcの位置のテクスチャーレイヤーを指定し、自動選択ツールと選択範囲反転を使ってテクスチャー全体を指定します。
 次に、新規レイヤーを作成し、ココに塗りつぶしツールで単色の黒(RGBオール0)を塗りつぶします。
 すると、テクスチャーと同じ形の黒いテクスチャーが出来るので、これを移動させて左図の位置(注:BOXの底面、フロアの直上。レイヤー順を入れ換えてこの位置に置く。 ちなみに、左図では分かり易いようにBOXレイヤーの不透明度を下げてあります)に移動させます。
 次に、この黒テクスチャーのレイヤーを3枚コピーし、左図の位置に移動させ、黒テクスチャーの面積を拡大します。(注:拡大・縮小でやってもいいかも。ただし、その場合は縁にシャギー=縁がギザギザになるビットマップドロー特有の症状が出るかもしれないので、今回は確実なコピー&移動で処理しました。また、左図では見易いように壁とフロアのレイヤーを非表示にしてあります)
 拡大させたら、今度は矩形選択ツールを使って、左図のように上下のいらない部分をカットします。(注:予め、画面の適当なトコロに大きめの矩形選択範囲を作っておき、それを移動させる方法が手っ取り早いと思う)
 カットしたら、黒テクスチャーのレイヤーを全て結合させて下さい。

続いて、黒テクスチャーを指定した状態で、拡大・縮小で“横方向のみ75%”に縮小します。“縦横比を固定ボタン”を押下せずに、“W”だけを数値入力で“75”にすればOKです。

 縮小したら、今度は左側のはみ出ている部分を含めたいらない部分を、矩形選択ツールを使ってカットします。 上下の位置ズレも、この段階で修正しておきます。
 それが終わったら、ツナギ目のスキ間を修正(注:ブラシツールで手書きしてもいいですが、はみ出ると修正がメンドくさいので、いつもの自動選択ツールと修正レイヤーを使う方法で修正します。作例では、この方法を使いました)し、レイヤーを結合させ、非表示になっている壁とフロアのレイヤーを表示させ、BOXレイヤーの不透明度を戻し、逆に黒テクスチャーのレイヤーの不透明度を“40%”に下げます。
 すると……。
 こうなります。
 画面左上の光源によって出来る影が出来ました。
 しかし、これではまだ不完全です。
 左側から光が当たっているなら、BOXの右側の面は影になって暗くなるハズです。そこで、同じように先ほど残しておいたBOXのテクスチャーを使って、bの位置のテクスチャーをシェーディングします。
 とは言っても、やり方はいたってカンタンです。
 先のシェーディングと同様に、bの位置のテクスチャーを選択範囲で囲み、新規レイヤーを作って黒をベタ塗りします。
 そして、レイヤー順を入れ換えてBOXの直上にこのレイヤーを置き、不透明度を“40%”に下げるだけ。
 で、こうしてシェーディングを行うと、出来上がるのがこちら。(↓)
 いかがですか?
 先ほどのシェーディング前の図と比較してみて下さい。BOXに立体感が生まれ、画面全体にメリハリが出来、絵がリアルになりました。
 このように、シェーディングは絵に立体感を与えるのに最も重要な要素なのです。これをやるのとやらないのとでは、これだけ絵の完成度に違いが生じるのです。


・装飾/出力/アレンジ

 さて、今回のお題は以上で一応完成ですが、これでは絵としてあまりにも味気ないので、ちょっと装飾してイラストらしく仕上げましょう。
 これは好みにもよるし、目新しいテクニック解説はないので詳細は省きますが、今回はこんなカンジに装飾してみました。(↓)
 ロゴのテクスチャーは拾いモノを流用。壁とフロアのテキストは、文字ツールを使っています。 ちなみに、フォントは両方とも“Impact”です。
 ポイントとしては、ロゴテクスチャーを一枚一枚別々のレイヤーに置き、レイヤー順を入れ換えながら位置を決める事。 テキストは、自動選択ツールと“選択範囲の拡大”を使ってフチドリを入れた程度ですが、これだけで絵がちゃんとしたイラストっぽくなります。
 また、右下にはいわゆるクレジットとサインを入れて、ポスターっぽくなるようにしました。
 では今度は、完成した絵をjpg形式に変換します。
 PhotoShopでは、加工が可能なpsdという専用ファイル形式で保存しますが、専用なのでWindows上やIE上では表示出来ません。そこで、ウェブなどで絵を公開する時は、WindowsやIEでも表示出来るjpg形式に変換しておきましょう。
 PhotoShopには、『ImageReady』というベクタードローツール(注:詳細はいずれまた)が標準でバンドル(注:CSシリーズのみ。それ以前のバージョンにはない場合がある)されており、“ファイル→Web用に保存”のコマンドを実行すると、左図のようなウィンドウが開きます。
 このウィンドウの右側のメニューで、保存するファイル形式、画質を指定し、画像サイズを変更します。
 今回は、“JPEG形式”の“最高画質”を指定し、サイズを“800×600pix”に変更しました。
 数値を変更したら、“適用”のボタンを押下して反映させます。
 反映させたら、ウィンドウの左側で確認し、これで良ければ“保存”のボタンをクリックします。保存先は、自分の分かり易い場所を指定して下さい。
 で、今回完成させた絵を変換したのがコチラ。(↓)

 こんなカンジでございますね!
 結構良く出来てるんじゃありませんですか?
 作業時間は、SSを撮影しながらだったので6時間ほどかかりましたが、速い人なら2時間ほどで出来ると思います。
 上手くいって良かった良かった。(笑)
 ちなみに、今回ご紹介したテクニックを応用すると、こんなモノも描けるようになります。(↓)


 これは、今回の絵よりも以前に描いたモノで、CS:Sのクラン戦リプレイの時にお世話になったクランチーム、aXion(現aXn Gaming)様に提供させて頂いたチームロゴです。
 今回とは異なり、立方体ではなく立方体の展開図をモティーフにしましたが、やってる事は今回と全く同じです。応用次第では、こんな事も出来ます。
 ちなみに、“シーン”のスペルが間違ってましたね。“since”でしたね。(笑)
 すまぬ……。つД`)゜。
 また、これをさらに応用すると、木箱や段ボール箱などの異なる素材の箱や、学校やビル郡などの建物に至るまで、様々なオブジェクトを3DCGを使わずにPhotoShopのみで描く事が出来ます。
 皆さんも、PhotoShopで3DCGっぽいイラストを描いてみてはいかがでしょうか?
 ちなみに、今回はキーボードとマウスしか使ってませんが、ペンタブレットが必要な人物などのキャラクターイラストに関しては、いずれまたテクニック解説をやりたいと考えています。
 いつになるかは例によって分かりませんが(笑)、その時もまたよろしくね☆



 といったトコロで、今週はココまで。
 楽しんで頂けましたか?
 ご意見ご感想、ご質問等があればコメにどうぞ。
 来週もお楽しみに!
 それでは皆さんまた来週。
 お相手は、asayanことasami hiroakiでした。
 SeeYa!(・ω・)ノシ



きょーのはちゅねさん♪


復活ッ!!


Thanks for youre reading,
See you next week!



-オススメアイテム-
※今回使用したソフトウェア、及び素材です。ぜひ一度お試し下され~。

Adobe公式ウェブサイト
※今回使用したPhotoShopの開発と販売を行っているAdobe社の公式HPです。このサイトから、直接ソフトウェアのDL購入が可能です。
 ちなみに、最新のFlashプレーヤーやAdobeリーダーのDLも、このサイト内から出来ます。

FontCubes.com内フォントDLページ
※今回使用したQbicle BRKフォントを配布しているウェブサイトのDLページです。このページにある“Download Qbicle BRK font”というボタンをクリックすれば、4種類のフォントが入ったパッケージをDL出来ます。
 フォントを導入する場合は、DLしたアーカイブファイルを解凍し、フォントファイルをCドライブ内の“WINDOWS/Fonts”のフォルダ内にコピーすれば、PhotoShopやWordで利用出来るようになります。
 ただし、フォントファイルは多過ぎるとWindowsの起動や終了が遅くなるので、入れ過ぎには注意が必要です。

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする