こんにちは、しゃも(@ShamoEi_Shamo)です。
ドット絵でアニメーションを描いたことがありますか？
ドット絵はピクセル単位の絵なので、アニメーションを作りやすいです。
- ドット絵初心者でアニメーションを描いてみたい
- なんとなくアニメーションって難しそう
- 無料のドット絵アプリで取り組みたい
という方にぜひ読んでいただきたいです！
この記事では無料のWebアプリPiskelでアニメーションを作ります。
Piskelの初歩的な使い方は以下の記事で紹介しています！
Piskelが初めての方はこちらを読んでから取り組むことをおすすめします。
意外と簡単にアニメーションを作れるので、みなさんも記事を読みながら描いてみましょう！
ドット絵が描けるPiskelでアニメーションを作る方法
アニメーションを作る流れは色々とあるかもしれませんが、
動かしたい絵を描く→フレームを追加して少しずつ動かしていく
という流れがやりやすいと個人的に思います。
Piskelにはフレームの機能が付いているので問題なくアニメーションを作ることができます！
上記の流れで説明していきます。
動かしたい絵を描く
まずは、動かす元の絵を描きます。
何を描くかを決める
その前に、何を描くのかを決めましょう！
人を歩かせる、風で服をなびかせる、波で揺らぐ船、空を飛んでいる鳥、ゲームでいそうなモンスター、などなど何か動かせそうなものを想像してみてください。
僕は猫が好きです。
猫を飼ってはいませんが、猫カフェに行くのが好きです。(まだ2回ですけど。。w)
猫好きなので尻尾を振る猫でも描こうかなぁ、と思います。
みなさんは何を描くか決めましたか？複雑に考えず、好きなものを描いて楽しみましょう！
キャンバスサイズの設定
描くものを決めたら、キャンバスサイズを設定しましょう。
右側にある「リサイズ」を開くことで変えられます。
デフォルトでは、32ピクセル×32ピクセルになっているはずです。
描きたいものが横長ならWidthを大きく、描きたいものが縦長ならHeightを大きく、もっと画素数を大きくしたいなら適宜変更しましょう。
32ピクセル×32ピクセルというサイズは、個人的にかなり初心者の方に向いていると思います！
僕の猫の絵は32ピクセル×32ピクセルで行います。同じ場合は変更せずに始めましょう。
描きたい絵を描く
では、先ほど描くと決めた絵を描きましょう！
僕の描いた絵はこのような感じになります。白猫を描きました。笑
なんだか尻尾動きそうですよね？(そう思わない方もいると思います。笑)
描き方などはお任せします。下書きを紙に描いたりしてもいいし、レイヤーも自由に使ってください。動く様子を想像しながら描きましょう。
あと、忘れずに適度にセーブしましょう！
どうしたらいいかわからない方もいると思うので、初心者におすすめの描き方を説明します。
- 使用する色を少なめにする。
- 動かすレイヤーと動かさないレイヤーを作る。
この2つをすることで、ドット絵初心者の方でもアニメーションをあとあと描きやすいかと思います。
使用する色を少なめにする
動かす対象は白猫ですので、色は少なめです。動かす部分に関しては尻尾なので白色単色です。
色をグラデーションにさせることでリアリティを上げることができますが、色を変えたりしてアニメーションを作るのは少し大変なので、少なめの方がいいです。
また、ドット絵初心者の方は、色を少なめにして練習するとドット絵の力がつきやすい(表現力が上がる)と個人的には思います。
動かすレイヤーと動かさないレイヤーを作る
レイヤー分けは、本当に人それぞれですが、アニメーションを作るときには背景を描き直したりしないようにするため、分けるのがいいと思います。
僕の場合は「cat」と「background」という2つのレイヤーを作っています。
こうすることによって、猫を動かすときに、背景のことについて心配する必要がありません。
アニメーションを作る
動かす元絵ができたら、アニメーション化していきましょう！
その前に忘れずにセーブしましょう！
フレームの追加
キャンバスのすぐ左側にあるのがフレームです。
「1」とあるのが第1フレームということになります。
フレームに背景がない、、と思う方もいるかもしれません。
しかし安心してください。フレーム画面に表示されているのは今選択しているレイヤーなのです。
フレームの複製をすると、しっかり他レイヤーも複製されます。
カーソルを合わせると、「Duplicate this frame」と表示されます。
こちらをクリックすることで、全く同じフレームを作ることができます。
黄色に囲まれているのが選択フレームです。
全く同じフレームから、差分を作って動かしていきます。
アニメーション化
ドットアニメーションは、GIFで出力することが多いです。
アニメーション化のポイントは、最初と終わりを繋げると良いと思います。
アニメーションがループされるので、連続されているといいと思います。
違和感がないと、ずっと見て入られます。
アニメーション化の仕方として2通りの方法が考えられます。
- フレームを追加して少しずつ動かしていく
- 動きの始めと終わりを先に描いて、その間の動きを埋めていく
好きなやり方でやってみましょう！
また、Piskelではドラッグすることでフレームを入れ替えられます。
またカーソルを合わせて「ゴミ箱」をクリックすることで削除できます。
完成したらエキスポート
セーブもしましょう！
右側のエキスポートのタブを開くと、色々と選べます。
Scaleでは、個人的に300ピクセルを超えるぐらいがいいかなと思います。
32×32では、10倍くらいがいいですね。
アニメーションでは、GIFを選びましょう。ループはONにしましょう。
そして「Download」でダウンロードしましょう。
完成！
猫可愛い！！！
ちなみに、フレーム数は9枚です。
多くすればより滑らかになります。
GIFで出力するとこのような感じになります。
ツイッターなどのSNSに投稿して自慢しましょう！
まとめ
Piskelでのアニメーションの作り方を説明しました。
アニメーションを作るのは意外と簡単でしたか？
Piskelはフレーム操作がわかりやすいと個人的に思います。
この記事を読むことで、ドット絵のアニメーションを作るきっかけになれば嬉しいです！
何か作ったら、コメントで教えていただけると見にいきます！
コメント