blog.heyassy

pixel artやってみたい!ドット絵を描くツールを調べてみた

2019/02/04 一部追記しました

毎年なにか新しいものに興味を湧いていろいろやってみたくなるのですが、継続してスキル習得までにはいかないです。いろいろ目移りしちゃう。そんな性質なのですが、近頃はpixel artに興味が湧きました。いわゆるドット絵なのですが、学生の頃から豊井さん(@1041uuu)の絵を拝見しており、ドットを描いて動かしたり、細かく一枚絵を描くなんてすごいな〜と思ってました。

豊井さん以外にもpixel artやドット絵を描いている人をフォローしてるのですが、細かい絵は無理でも自分もドット絵描いてみたいなーと思ったのです。

ドット絵を描くツールはなに使ってるのだろう?photoshopかな?と思って調べてみると、windowsではEDGE2というソフトがあるみたいですね。豊井さんはこれを使っているみたいです。

macユーザーの人向けにはAsepriteという有料ソフトがあるらしく、アニメーションも簡単に作れるみたいですね。有料といえど、$14.99(約2千円以下)で購入できるのでこちらがよさそう!ソフト自体のUIもドットで構成されているのがかわいいです!今度買ってみようかな。

Photoshopでドット絵を描く初期設定

結局ツールはなんでもよくて、クリスタやphotoshopなどでもできるので手元にあるphotoshopでドット絵を描くやり方をやってみました。

グリッドの設定

photoshopの環境設定をドット絵仕様にします

ドット絵の基本サイズ、16x16px, 32x32px, 64x64pxなどに合わせてグリッド数と分割数を入力します。ファビコン作るときもこれでいけますね。

画像補間方式を変える

つづいてドット絵を拡大縮小したときにアンチエイリアスがかからないようにするために、環境設定から一般を選んで、画像補間方式を「ニアレストネイバー法」に変えます。アンチエイリアスとは、2つの色の境目に中間の色を置くことで境界を滑らかに見せる技法です。

環境設定→一般を選択します

実際にドット絵を描いてみる

先ほど設定したグリッド数と同じ値でファイルを新規作成します。グリッド数が16pxなら16x16のサイズで、解像度を72でつくります。ドット絵を描くときは鉛筆ツールを1px, 硬さ100%にして描いていきます。

試しに描いてみました。うんこです。どのサイズで描いた方が練習できるんだろう。ドット絵は慣れないとどこから描き始めるか迷ってしまいますね。下のうんこはとりあえず模写してみました。グリッドノート使ってアナログで下書きしてから描き始めるのも良さそうですね。

ひとまずよく使うツールのアイコンを見ながら描いてみました。ななめに描くのが少しむずかしいですね。描きたいモチーフをスクショしてphotoshopで開くと先ほどの設定でグリッドが引かれてるのでだいたいの位置を見ながら描いてみました。どう描けばいいかわからないときは一旦ピクセルを無視して普通にイラストを描くように鉛筆を動かしていきましょう。近い形になるのでそれから1ピクセルづつていねいにドットを打つ感じだと思います。

保存するときの一手間

できたドット絵は当たり前ですが、このままだと小さいサイズなので拡大しても見づらいままです。SNSに上げたいな〜と思ったときは、書き出す前にサイズを設定しましょう。

ニアレストネイバーで保存します

上記画像のように、サイズを512x512pxなど任意に設定して、Resampleの部分をニアレストネイバーに設定します。こうすることで、大きく見やすいドット絵になるのでSNSに投稿することができます。

描いていくと、実寸大でプレビューしたいなと思ったら、メニューバーのウィンドウから現在描いているpsdを新規ウィンドウを開きましょう。

pixel artに憧れてたのでこれからもちまちま描いていきます。わーい、ドット絵デビューだ〜

お仕事のご相談・ご依頼はこちらからどうぞ

haruka510a[a]gmail.com