クリスタで描く!ドット絵作成の方法【ClipStudio・ピクセルアート】

クリスタでドット絵
藤依しの
藤依しの

ピクセルアートにハマりつつある藤依しのです。
このブログでちょいちょい登場するドット絵ですが、実はフリー素材ではなく自分で描いています。

ななしちゃん
ななしちゃん

いつもムダなところに力使いますよね。

藤依しの
藤依しの

いいじゃないですか!ドット絵描くの楽しいんですもん!

この楽しさを知ってもらうため、今回はイラストツール『クリップスタジオ』を使ったドット絵の描き方について話したいと思います!

スポンサーリンク
スポンサーリンク

ドット絵を描く準備 元となるイラスト

藤依しの
藤依しの

まず最初にやるのは、元となるイラストの準備。
紙に描いても、PCのお絵かきツールやスマホアプリで描いてもいいです。

で、実際に描いたのがこちら。

下書き

注意点は

  • 輪郭や目は目立つように描く
  • あまり細部にこだわらない

ちなみにサイズはなんでも良いです。
どちらにせよ、あとでクリップスタジオで読み込んだ時に縮小するので、サイズが何だろうとあまり関係ない

紙に描いた場合は、写真やらスキャンやらで一旦画像にしておいてください。

ドット絵を描く準備 クリップスタジオ

藤依しの
藤依しの

下絵の準備ができたら、PCでクリップスタジオを起動します。

僕はMacのクリスタを使用していますが、多分Windowsでも操作は変わらないと思います。
また、ipad版も使っていないのでわかりませんが、おそらくこちらも操作は同じはずです。

ピクセル指定で新規作成

新規作成ボタンを押した際に、ドット絵用に大きさを指定します。

キャンバスの『幅・高さ』を、32×3264×64などの小さい値に変更してください。
特に大きさを決めていない場合は、『32×32(幅 : 32、高さ : 32)』にしておけば良いと思います。

キャンバスサイズ

普通のイラストであれば、大きければ大きいほど描きやすくなりますが、ドット絵はそうとも限りません。

32×32個のレゴブロックと、64×64個のレゴブロックでは、確かに後者のほうがハイクオリティなものを作れますが、そのぶん1つ1つブロックを組み合わせるのが大変です。
これが初心者ならなおさらのこと。

ドット絵もそれに似ています。

元絵画像の読込

キャンバスを作成したら、さっき描いた下絵を読み込みます。

上の『ファイル』メニューから『読み込み』を選択し、『画像』をクリック。

読み込み

用意しておいた下絵の画像or写真を読み込みます。

ファイル選択

元の絵はサイズが大きいので、読み込んだ直後は一部しかキャンバスに表示されません。

『オブジェクト』『ツールプロパティ』から『位置調整』『キャンバス』に変更すると、キャンバスのサイズに合わせて調整されます。

位置調整

あとは四隅のサイズ調整枠をいじって、キャンバス内に上手く収まるようにしてください。
当たり前ですが、解像度を下げているのでかなり画質が荒いです。

読み込み完了

グリッドの表示

ドット絵は普通のイラストと違い、パズルのように地道にピースを当てはめていくような描き方をします。

こういう『決められた場所に何か描いてくような作業』をする際、役に立つのが『グリッド』の機能です。
クリスタの初期状態では『グリッド』が表示されていないので設定しましょう。

まずは上の『表示』メニューから『グリッド・ルーラーの設定』をクリックします。

グリッド設定

『グリッド設定』『間隔』を1pxに、『分割数』を1に変更してください。

グリッド間隔と分割数

その後、もう一度『表示』メニューから『グリッド』をクリックすると、ドット絵を描くための補助線が表示されます。

グリッドにチェック

これでドット絵を描く準備ができました!

下書き

藤依しの
藤依しの

いよいよ、実際にドット絵を描いていきます!
まずは下絵に合わせて、輪郭を描いていきましょう。

ここで注意したいのがこちら。

  • 顔・髪の毛・目・手足が判別できるか
  • 身体の一部が変にへこんでたり、でっぱってたりしてないか

以上を踏まえて、描いていきます。

下書き

目の部分はわかりやすく赤で描きました。

下絵のシルエットから離れすぎないように描けていれば十分。
パーツごとの位置を確認するのが目的なのです。

『ドットペン』が便利

クリスタには『ドットペン』と呼ばれるピクセル単位で線が引けるペンツールがあります。
これを使うことでドット絵を描くためにわざわざペン先サイズを変える必要がなくなります。

ドットペン

ちなみに消しゴムについては同じく『ドットペン』を使い、『透明色』で塗っていく方法が便利ですね。

透明色

色塗り

藤依しの
藤依しの

次に、色を塗っていきます。
残念ながら色塗りに関しては、かなり奥が深くあまり具体的なことはまだ教えられません…。

ただ僕が気を付けているのは

  • 必要以上にグラデーションは作らない
  • 輪郭線は濃い色ではっきりさせる
  • 小物は形ではなく色で表現

そうして黙々と色を塗ること1時間、こんな感じになります。

色塗り経過

まだ途中ですが、元の絵よりだいぶ単純化されているのがわかると思います。

元の絵
※元の絵はこんな感じ

ドット絵作成で大切なのは、『単純化すること』です。

1ピクセルのズレで大きく印象が変わってしまうのがドット絵ですから、「ただ解像度を下げるだけ」とはいかないのです。

ちなみに、どうも変に見える時は、少し画面から離れて見てみるのをオススメします。
あとは拡大率を下げたり、あるいはクリップスタジオであれば右上の『ナビゲーター』から確認するのも良いでしょう。

ナビゲーター

近くで見ると荒い点の集まりですが、遠目に見ると「絵に見える」のがドット絵です。
定期的にチェックすることで「どこが悪いのか?」がわかりやすくなると思います。

完成

藤依しの
藤依しの

そうして点を打ち続けること数時間…
完成したのがこちらです!

完成ドット絵
ななしちゃん
ななしちゃん

ポーズ変わってるじゃないですか。

藤依しの
藤依しの

やっぱ32×32のサイズであのポーズは無理あったかなって。

当たり前ですがドット絵では複雑なポーズであるほど描きづらくなります。
慣れない内は棒立ちポーズで描いてみるのが良いですね。

とりあえずドット絵の作り方としてはこれで終わりですが、この段階ではまだ完成したファイルは『.clip』というクリスタでしか使えないファイルになっています。

どうせ作成したなら、色んなサイズの画像を作れたり、素材として使えたほうが良いですよね?

なので次はそのやり方について話します。

画像として出力する方法

そのまま『png』で保存する

藤依しの
藤依しの

まずは、普通にpng形式で保存する方法。

これは簡単です。
画面上の『ファイル』メニューから『複製で保存』を選び『.png』をクリックするだけ。

png保存

背景を透過したい場合は、下書きも含めて背景になるレイヤーを全て非表示にすれば、キャラ以外が透過処理されたpng画像が作成されます。

意外と忘れがちなので注意してください。

サイズを変更して保存する

アイコンなどに使用する場合は、サイズが小さすぎると正しく表示されないことが多いです。
たとえば32×32のドット絵を、そのままTwitterアイコンを設定するとこうなります。

荒いアイコン画像
ななしちゃん
ななしちゃん

ななしちゃんがモザイクちゃんに…

藤依しの
藤依しの

これを避けるためには、ドット絵の状態を保ったまま『400×400』などの大きい画像に変更する必要があります。
実はこれ、クリスタではわりと簡単にできます。

まずは画面上の『編集』メニューから『画面解像度を変更』を選択。

解像度の変更

出てきたメニューから『幅』『400(任意のサイズ)』に変更し
『補間方法』『ハードな輪郭』に設定して『OK』をクリック。
(縦横比は固定なので、幅だけ入力すれば勝手に高さも変わります)

解像度の設定

するとめっちゃでかくなるので、『複製を保存』から『.png』を選んで完了。
普通に保存すると、元のファイルが400×400に変わっちゃうので注意してください。

素材として、別なキャンバスに貼り付ける

「作成したドット絵を画像として使わず、他のキャンバスに読み込みたい…」

なんて時は、実はわざわざ『png画像』で保存しなくても大丈夫です。

まず、ドット絵を読み込むためのキャンバスを用意。
画面上の『ファイル』メニューから『読み込み』を選択し、『ファイルオブジェクトを作成』をクリックします。

ファイルオブジェクトの作成

ファイル選択画面から作成したドット絵の『.clip』ファイルを選択します。
するとドット絵が出てきます。(32×32なので非常に小さいです…)

ファイル読み込み完了

読み込まれたドット絵は『オブジェクト』なので、自由にサイズ変更ができます。

サイズ変更

ただ注意点が一つ。
元のclipファイルに、『用紙レイヤー』が設定されている場合は、たとえ『非表示』にしていようと、背景が透過されません。

用紙レイヤーとは

「透過されるはずなのに、ファイルオブジェクトにすると透過されてない!」

と思ったら、元のドット絵ファイルを確認して『用紙レイヤー』があるか確認してください。

『用紙レイヤー』『削除』しもう一度保存することで、『背景が透過されたファイルオブジェクト』として読み込めるようになります。

良いドット絵ライフを!

藤依しの
藤依しの

というわけで『クリップスタジオ』を使ったドット絵の作り方でした!

ななしちゃん
ななしちゃん

クリスタはドット絵用のツールではないけど、わりと簡単に描けるもんですね。

藤依しの
藤依しの

ドット絵はゲームの素材としても使えるし、こうやってアイコンにするだけでも、そのレトロ感が逆に新鮮で目を引くんじゃないでしょうか?
特に色んな人のドット絵を見ていると『限られたリソースでいかに表現するか』という部分にこだわりが感じられてとても楽しいです。

イラストとは違い、それほど画力がなくても手軽に作れるので
興味を持った人がいたら、挑戦してみて欲しいですね。

本当はもっと色々教えられれば良いんですけど、僕もドット絵描き始めたばかりなので、それほど多くのことはわかってない状態です。
でも今後何か人に話せそうなことがあったら、すぐに記事にしたいと思うので、楽しみにしてくれると幸いです。

それでは!