ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

16 x 16ピクセルのドット絵アイコンを描こう!【人物イラスト編】

2014/01/21, cocopon

前回の「導入編」では、ドット絵の魅力や作成ツールについて書きました。
今回は人物イラストの描き方について、具体例に沿って解説していきます。

描きやすい題材の選びかた

小さいサイズのドット絵で重要となってくる要素が「形」です。

Twitterのタイムラインをぼーっと眺めていても、誰だか一瞬でわかるアイコンってありますよね。そういった目立つアイコンは、「形」または「色」に特徴があります。この2つのうち、前者の「形」が16×16ピクセルで表現できるかどうかが、題材を選ぶときのポイントです。

くまんぼうさんを描いてみよう!

今回は、iOSの「ジャマだカメラ」シリーズで有名なくまんぼうさんにご登場いただきまして、実際にドット絵化する過程を追ってみます。

ジャマカム!〜江頭ジャマだカメラ〜
カテゴリ: 写真/ビデオ, エンターテインメント

元のアイコンはこちら。(ご本人から許可をいただいています)

kumanbow

いちばん特徴のある部分はどこ?

いちばん特徴のある部分を大事にしましょう。人物アイコンの場合は、ほぼ間違いなく「顔」でしょう。自分が人物を描くときは、必ず顔のパーツから描きはじめます。

輪郭から描きはじめてしまうと、それまでうまくいっていたのに、もっとも重要な顔のパーツが収まらないなんてことも…。

2014-01-20 23.50.29 2014-01-20 23.50.36

…このような悲劇を避けるためにも、顔の内側、パーツから描きはじめましょう。

顔のパーツから描きはじめる

まずは目とメガネを描いてみます。

kumanbow_eye

2014-01-20 23.55.03

黒目をちゃんと表現すると、このサイズが限界でしょうか。
上まぶたも描いてみます。

2014-01-21 00.15.37

う…怪しさ満点になったので省きます。多くを詰め込めないドット絵では、重要度の低いものを「捨てる」ことが重要です。

次は口に取りかかりましょう。

kumanbow_mouth

上くちびるがキュッとなってかわいい感じですが、これを表現するのはなかなか難しい。

2014-01-21 00.14.28

ニヤリ。口角を上げると変態度がアップしてしまうことがわかったので、端は落とすことにします。

2014-01-21 00.17.24

チャームポイントのまゆ毛も描き足して、中身はこんなもんでしょうか。

2014-01-21 00.19.16

顔の輪郭を描く

kumanbow_face

中身が終わったら、顔の輪郭の当たりをつけるために四角で囲います。

2014-01-21 00.24.20

この四角をベースに削り足していくと、ふっくらカワイイ形に仕上げやすいでしょう。ドット絵のデフォルメ感は、肉付きが命です。迷ったら肉を足す方向で。

2014-01-21 00.30.22

曲線を描くときは、ギザギザが目立たないようにドットの置き方を工夫します。どういう曲線がきれいに見えるかは、いろいろ試しているうちに見えてくるはず。

2014-01-21 00.36.53

残りのパーツと全体調整

顔ができたら、残りのパーツ、耳と身体を描いてしまいましょう。

2014-01-21 00.43.06

全体のバランスを確認すると耳がやや大きいので、押し込んでしまいます。

2014-01-21 00.43.30

ちなみに、原画にはカワイイ犬っこ(ご家族でしょうか?)が描かれていますが、彼らは入りそうにありません。かわいそうですが、今回は出演を控えてもらいましょう。

色塗り

最後の仕上げ、色塗りです。
スポイトツールで原画から取ってくると楽ですが、自分はあえて使いません。
原画全体から受けるイメージを大事にしたいので、雰囲気を感じ取りながら、それぞれの色を選んでいきます。

2014-01-21 00.53.07

こうして、ドット絵くまんぼうさんが完成しました!
いかがでしょうか。

kumanbow

ドット絵になったくまんぼうさんは、表情豊かです。楽しい!!

2014-01-21 01.30.37

本日のポイント

  • いちばん特徴のある部分を、内側から描いていく。
  • 重要度の低い要素は、思い切って捨てる。
  • 肉付きはやや多めに、ギザギザ感の少ない曲線を引く。
  • 色選びは、全体の雰囲気を大事にする。

次回に続きます。