2010年8月25日水曜日

前に投稿したマンガ風イラストの描き方メモ(レイヤーとか)

前に投稿したマンガ風イラスト「女子アナウンサー?」の描き方メモです。 独学でテキトーに描いているのと、最初の作品ということで変な描き方かも。

真正面から見た絵ということで、ルビンの杯を描いたときと同じように左右対称の絵を描きます。

左側が元のパス、右側が左右反転して位置をずらしたリンクオフセットです。 左側のパスは、適当に作ってからガシガシノードを増やして形を整えています。 普通は別のレイヤーに描くような部品(顔、目、スーツ、シャツ)なども1つのパスです。

大まかな絵ができたら右側のリンクオフセットに「オブジェクトをパスへ」をして左右のパス統合。 非対称の部分を描いていきます。

例によってノード追加の繰り返し。 服にはシワがあるので、対称のときと比べると手が入っています。 顔はそのまま。 ボタンや鼻、口などのパーツは別のパスで作ります。

ここまで1つのレイヤーで作ってました。 髪と手は複雑になりそうなので別レイヤーで作成。 メインレイヤーの上に重ねます。

上の図は、見やすいように今までに描いた部分の不透明度を下げてキャプチャーしています。

髪は黒いベース部分が1つのパス、テカり部分は1つ1つがグレーで塗りつぶしたパスです。 手のレイヤーは結局1つのパスで作ってしまった...

服や顔などのパーツの下塗りをします。 1番下にレイヤーを追加。 ベタ塗りをします。 普通は顔やスーツなど、各パーツ毎に下塗りをするかと思いますが、この絵はシンプルなので1つのレイヤーにまとめています。

スーツはグレーに塗ります。 顔、シャツ、手、原稿、机は白です。 背景色が付いたウェブページに載せてもいいように白い部分も塗っておきます。 上の図は透明色の部分がわかりやすいように青く塗ってみました。 投稿した絵は青くないです。

メインレイヤーの線は太めです。 下塗りの境界はその線に隠れるように調整します。 髪の毛の下は雑に塗っても大丈夫。

メインレイヤーと下塗りレイヤーの間に影のレイヤーを追加します。 影も境界がメインレイヤーの線に隠れるように描きます。

影は不透明度をいじらずにベタ塗りにしました。 顔や手など下塗りが白い部分は薄いグレー、スーツの陰は濃いグレーにしてあります。 これは、inkscapeやbatikでSVG → PNGをするときに真っ黒になってしまうことがあるためそうしました。 不透明度が真っ黒になる原因なのかは確認していませんが、今のところ全部ベタ塗りなら大丈夫なことだけ分かっているので、この絵は全部ベタです。

ホントは影は全部黒で塗って不透明度で色を調整すると楽なんですけどね。 髪の毛の影がスーツとシャツ両方にかかるところが少し面倒でした。 シンプルな絵なので、影を描くとき面倒だったのはそこだけかな?

あとは適当にセリフを付けて完成。 こんな風になりました。

ちなみに、各レイヤーのキャプチャー画像の中に何枚かAPNGが混ざっています。 APNGが見れるブラウザを使うと、少しだけ今回の投稿内容が分かりやすくなるかも? firefoxかOperaならAPNGが見れます。 気が向いたらどうぞ。

というか、死に体のAPNG久しぶりに使ったな。 ここまで書いてからなぜアニメーションgifにしなかったのかと後悔です。