ドット絵 作業過程とか

まったくの素人なのですが気が向いたのでドット絵ぽちぽちしてみました。

使用したのはiPhoneアプリのEDGE Touchというやつ。

せっかくなので自分用も兼ねて出来上がるまでをメモっていこうと思いますー。

というわけでいきなりですが、

完成品がコチラ。

はい。

人魚とか海っぽいのとか、とにかく青いのが好きなんです。。

ではこれを書き上がるまでの工程を順番に載せていきましょー！

はじめに：ドットを描くときにあると嬉しい機能

とその前に、とりあえずアプリを起ちあげた画面がコチラ。

好きな色を自分でつくって置いておけるパレットがあって、

丸や四角を書くツールがあって、

ペンの太さも選べて、

レイヤー(絵を何枚かに分けて、重ねられる機能。これは髪用、これは身体用、とか)が作れます。

点が打てさえすれば普通のペイントツールでも十分ですが、レイヤーがあるととっても便利です。

失敗がぐんと減ると思います。たぶん。

手順１. 下書き

さてさっそく書いてゆきます。

これが適当にｼｬｼｬっと下絵をしている所です。

いろんな方法があると思いますが、今回は特に大きさの縛りもなく自由に書こう〜と思って始めたので、ドット絵とか意識せず、普通の絵を描くのと同じ感覚で下書きしています。

（そのせいで後からとても後悔する羽目になります。）

女の子部分はいいとして、尻尾をどうしよっかな〜って悩んでいるのがよくわかりますね…（後からとても後悔する部分です。）

 

手順２. おおまかに色を置いていく

こんなもんかなって形が決まったら、肌なら肌色、服なら服の色、って感じでてきとうに色をつけていきます。

コイツ、さっそく尾ヒレ挫折して後回しにしてやがる…

はじめから細かく書こうとしても、どうせ後から微調整して結局やり直しになっちゃうので、おおまかで！

書き込んじゃってからの修正はむずかしいので、まずは全体のバランスをつかむのが先決かなーと思います。

ざーっと、ざーっとで。

面積の大きいところから順にやってくと、わかりやすい気がします。

今回の場合だと、サカナ部分＞お肌＞髪の毛＞ブラや髪飾り等の小物、みたいな。

手順３. パーツごとにレイヤーに分けてみる

尾ヒレと肌が重なってる部分をうっかりはみ出して塗っちゃった！とか、

顔はいいんだけど身体の位置や大きさがなんか変な気がする…とか、

そういうときのために絵を別々に分けて管理すると便利です。

レイヤーちょう便利。

レイヤーって言葉だけで、なんか自分が絵が上手な人みたいな気までしてきます。

オススメ。

レイヤーをどんなパーツで分けるかですが、自分にとって便利ならなんでもいいと思うし、ツール使っていればなんとなくわかってくると思います。

隣り合ったバーツを別のレイヤーに分ける、ってことだけ守ればなんとかなるはず。

（今回なら顔と髪、おなかと下半身、とか）

でも慣れてる人なら1枚にゴリゴリ書き込んでも大丈夫なんだろうなー。男気！

 

手順４. 陰影をつけていく

はい！！ これですよ一番の！醍醐味！

色の濃い/うすいをつけてくのが一番ドットっぺえ感じがしますね！

基本になる色に対して、

• 1段階 濃い色
• 1段階うすい色

のふたつを用意して、暗い所を塗って、次に明るい所にハイライトを入れていきます。

うまい人になるとこの影の付け方で質感をいい具合に出していけるんでしょうけど、

わたしはドット絵3回めくらいの素人なので素直に書いてはやり直し書いては塗りつぶし、時間をかけてああでもないこうでもない…ってします。

メッシュ地というか、格子状？になるように交互に色を置いて行くと、離して見た時にいい具合に混ざってくれる気がします。なんとなく。

それでもダメなら色を増やします。なんとかそれっぽくなるようがんばります。

手順５. 重ねてみて微調整

はい！ここまででもう５時間ほど経過してます(白目)

絵を重ねるのはツールのレイヤー機能さんがよろしくやってくれます。

尾ヒレの形がいまいちで書きなおすこと2桁近く、もうだいぶ投げやりになっています。

適当に下書きをしたツケが回ってきています。

根性でアバラのあたりにエラだけは書き込んでおきました。コダワリ。

手順６. 背景もじゃあがんばる

もう力尽きているのでて背景は適当を極めます。

1. 画面を濃い青緑でぬりつぶす（↑の一番左下に残ってる色）
2. その少し右上に、一段階うすい青で丸ツールを使ってでっかい丸を描く
3. そのさらに右上に、もう一段階うすい青でさらに丸を…と重ねていく
4. ちょっと太めのペンで境界をぼかしていく

• このアプリの場合、太さ3のペンが ＋ ←こんな形なので、それを使いました。
• 隣のエリアの色を選び、＋＋＋＋＋＋こんな感じになるようクリッククリック
• そしたら2列目も＋＋＋＋＋＋＋＋＋＋＋＋トントントントン
• ちょっとずつ間隔を開けて、グラデーションにしていきます
• ある程度それっぽくなったら今度は次のエリアの色でトントントン。

そんな感じで、↑の画像ができあがりました。お手軽！

ただし、この背景に手順5までで出来た人魚を重ねると、背景と人魚が似たような色でぼやーっと同化します。

適当な背景にしたツケが早くも回ってきました。

仕方ないので、白に近い明るめの水色で、境界線をクッキリさせます。

（その書き途中のものが↑の画像の白いフニャフニャした線です。。）

で、背景と、人魚と、境界線の白いフニャフニャ、これらを全部あわせて、、

完成！

どーん！

と思うじゃん？

実は一度完成したと思ってアップロードしてみたら、人魚と画面フチの間の余白を十分に取っていなかったせいでとても窮屈な見た目になってしまい、あわてて画面サイズを広げ、広げた分の背景を書き足すという作業をする羽目になりました。

余白は多めにとっておくこと！！

狭く切り取るのは簡単だけど、狭すぎるのを広げるのはめんどうだからね…本当にね…

そんなわけでやっと完成です！

やったー！！ もうこんな面倒なこと2度とするか！！うわーーん！！