グラフィック
ドット絵講座
公開日:
2020/04/18
ドット絵講座

はじめに

ドット絵好きですか?

ドット絵は容量制限の厳しかったゲームソフト黎明期で, 小さくて色の限られた画像しか使えなかったことから生まれました. ハードウェアの発展により, 高画質なグラフィックがふんだんに利用できるようになりましたが, 現在でもインディーゲームでは個性的なドットのゲームが開発されています.

楽しいゲーム体験に一役買っているドット絵ですが, 描くという面からみるとかなり特殊です.

  • ディティールが表現できない
  • たくさんの色が使えない

など自由にキャンバスを使えるイラストとは違い, 制限が多いです.

しかしこの制限が無駄をそぎ落とし, 絵の本質を認識させてくれるため, 普通のイラストを描こうと思っている人にもおすすめです.

なんだか難しそうですが, いくつかのポイントを押さえると誰でも簡単に描けます(嘘)

本文ではドット絵を描くコツを紹介したいと思います.

準備:ドット絵ツール

Aseprite - for $14.99 USD

ドット絵を描くならこれ以外ないです. ほかのツールでドット絵を描いたことがある人なら使いやすさがよくわかると思います.

準備:キャンバスを開く

これがキャンバスです. 設定は何でもいいですがあまり大きいと大変です.

Size 32px x 32px
Color Mode Indexed
Background Transparent

今回はこのような設定にしました.

りんごを描いてみる

今流行りの「りんご」をお題にしました. もちろん青森県産です.

ポイント1「シルエット」

まずシルエットを描きます. 絵を見たとき一番最初の情報はシルエットです. 全体のバランスを後から調整するのは難しいので早い段階でシルエットを見て, バランスを取りましょう.

ポイント2「コントラスト」

影の色を作ってざっくりと塗りました. この段階でさっきとは見違えます. 影を描いたことでコントラストが生まれました. コンピュータ上で色は「0-255のRGBの明るさ」として表現されますが, 色の本質は絶対値ではなく相対値です. キャンバスに描いた2色の差がコントラストとして脳に与えられます.

  • パレット上でベース色を複製
  • 複製した色を色空間で少しずらす

たったこれだけで, 簡単に調和のとれたコントラストが作れます. これができれば免許皆伝です. 皆伝おめでとう!!

この2色コントラスト手法を繰り返すと, グラデーションになります. ハイライトを加えて, りんごの瑞々しい質感が表現できました.

ポイント3「アウトライン」

さらに葉っぱを書き加えた後, アウトラインを追加しました. スタイルによって書かない場合も多いですが,この縁取りによってどこに配置しても目立つため, ゲームのアイテム画像などでは有効です. また強いコントラストが生まれるため, シルエットが強調されます.

アウトラインを周囲の色に馴染ませると, より自然になります.

まとめ

ドット絵を描くときに重要な3つのポイントをまとめました. ツールによって操作は違うと思いますが, この3つのポイントを指針にして一度描いてみてください!

この記事は「ドット絵のできる過程」や「簡単に描けるということ」を伝えるために, 過去の資料を再編集しました. そのためはぐらかした部分が多いです. 詳しい技術については勉強中ですが, 次回は「アニメーション」について書こうと思います.

資料

去年ドット絵を勉強しながらまとめたスライドです. リンクの保管的な意味なので読み飛ばしてください.

第一回 ドット絵の基本

第二回 岩を描いてみる

第三回 マップチップ

loading...