ドット絵gifアニメをPC&スマホで使える無料アプリで作成しよう!作り方と私的コツ!

画像編集

steamやスマホでも使える「Pixel Studio for pixel art」を使ってgifアニメを作っていきます。
簡単にオリジナルgifアニメを作れるとても優れたツールなので、是非一度使ってみて下さい。

基本的なアプリの情報や使い方は過去記事にてご紹介しています。

今回steam版を使っていますので、説明がPC基準になってしまう事をご了承下さい。
また本記事は私個人の作り方であって、他にも色々な作り方もあると思うので参考程度に。

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

最終完成形

今回紹介する方法でこのようなgifアニメが作れます。
ミニサイズなので、Twitchスタンプやアイコンなどで気軽に使えるサイズ。
左から 32×32 / 64×64 / 128×128。シンプルですが、最低限の動きはつけてあります。

事前準備

目指すドットアニメのイメージをする

「これを書きたい!こんな風に動かしたい!」というある程度全体のイメージをして下さい。
今回私の目指した物は、以前Twitchで使用していたこちらのアニメーション。

この左側の女の子部分(33側)をドットアニメにしたい、という目標でした。

新規作成

今回は32×32サイズの小さいGIFアニメを作ります。

サイズは基本プリセットを使った方がいいと思います。
もっと大きいのが作りたい人は16の倍数で指定するといい。

新規作成するとこのような画面になる。

同じソフトで静止ドットを作成してある場合は、その静止ドット絵を元にして新しくアニメーションをつける事も可能です。

アニメーションモードに変更

のフィルムマークを押すと上側()にアニメーションツールバーが出てきます。
はアニメーションに関する設定画面を開く。

必要に応じて「オニオンスキン」の設定

アニメーション設定画面内に「オニオンスキン」という項目があり、プルダウンで数値が選択出来ます。

このオニオンスキンはざっくり言うと、選択した数値分の前フレームをうっすらと表示してくれます。
↓今回は「1」を選択したので、前の1コマがうっすらと視覚化出来ます↓

勿論無効にしても問題ありませんし、数値を大きくすれば全体の動きが把握出来るようになります。
お好みで。それ以外の設定はとりあえず今はいじらないでおきます。

実際の作業工程

基準の1コマ目

アニメのスタートフレームです。
ループ対応のgifを作る場合、「最初の1コマと最後の1コマが同じになるように」するといいと思います。とりあえず基準となる1コマを描いてみましょう。

ここはまだ静止ドット絵を書くのと変わらない。

2コマ目

上記バーのプラスボタンを押して、新規フレームを追加します。
私の場合少しでも楽に作業したいので、アニメーション設定からフレームコピーやペーストを駆使しています。

↑1コマ目をコピーして、2コマ目にペースト↑
↑同じ素材が2つになりました↑

↓まず目の瞬きを作りたいので、貼り付けた2コマ目に目を閉じる静止画を↓

↑貼り付けた2コマ目の目のサイズを1ドットにしただけです↑

こんな感じでどんどん新規フレームに1枚1枚動きを追加していきます。

3コマ目以降

あとはパラパラ漫画と同じ要領です。

オニオンスキンを1に設定してあるので、前のフレームがうっすらとガイドしてくれます。

ここまでが頭を下げる動作です。
↓逆に頭を上げる動作は、頭を下げる動作をコピペして髪の毛の揺れを少しいじっただけ↓

全体の調整

とりあえず素材の準備は終わりなので、ドット絵自体のバランス調整や全体の修正をします。
動きを確認したい場合は再生ボタンを押せばいつでもアニメモードで動きを確認出来ます。

この再生ボタンでいつでも確認出来る。とても便利。

アニメーション設定

アニメーションのフレーム設定をしていきます。
フレーム設定は画面右上のフィルムマークから開きます。
このフレーム設定はざっくり言うと1コマを表示する時間の長さや間隔だと思って下さい。

フレームを1つ選択し、選択したフレームに対し「このフレームは何秒間表示して下さい」という設定をします。この時間設定は、1フレームずつ行います。
1フレームの設定→2フレームの設定…と、全てのフレームに設定する必要があります。

↑今回の私の設定はこのような設定で、最終的に合計3秒アニメになる計算にしました↑
瞬きはぱちぱちとさせるので、0.1秒。
目を開いている部分や、お辞儀の深い部分(頭を下げ切った部分)は0.5秒前後にしています。

「全てのフレームに適用」という項目は作る物にもよりますが、あまりオススメしません。
今回のアニメ動作としては「瞬き・頭を下げる・頭を上げる」ですが、動きのメリハリも大事です。

↓仮に全フレームを0.2秒表示にさせるとこうなります↓

かくかくと、なんだか機械的に見える。

上記にも述べたようにいつでも再生して動きを確認出来るので、色々試してみよう。

保存&出力し、完成!

保存は赤矢印の場所から。

原寸サイズは32×32ですが、プリセットで「2倍(64×64)」「3倍(128×128)」と選択出来ます。

任意サイズを選択、出力形式はGIFを選択、Sprite sheetはゲーム製作等で使う用なので今回はスルー。
あとは名前をつけて保存するだけです。

無事に完成です!おめでとう!

全体を通して、手描きでドットGIFアニメを作るコツや心構え

手描きのgifアニメは所謂パラパラ漫画。コマ送り。この事を常に頭に入れておく!
ポーズが分からない!という方は「自分でその動作をしてみる」と、意外にもよく分かる。
コピー&ペーストなどで楽が出来る場所は、思いっきり楽をしていい。
たかがgifアニメといえど、動きの強弱は大事。
1コマ1コマが「不自然かな?」と思っても、全体を見ると自然だったりするので、諦めない。
・小さいサイズのドットアニメでは、主線は描かない方がいい。
・大きいサイズのドットアニメでは、より精密に描く必要がある。(個人的に)
とりあえず色々挑戦してみて、とにかく楽しく描く!

まとめ

オリジナルでドット絵アニメgifを作れるようになると、色んな場所で使えます!
実際に作ってみたら思っているより簡単に出来た!という事もあるので、是非挑戦してみて下さい。

↓Pixel Studio for pixel art のアプリの基本情報↓

スポンサーリンク
スポンサーリンク
画像編集
ぜひこの記事をシェアしてください!
スポンサーリンク
スポンサーリンク
この記事を書いた人
33(みみ)

ゲームが大好き33(みみ)です!
毎日笑って元気に明るく毎日を過ごしていたい!
皆と一緒に笑える時間が増えたらなと思ってます!

33(みみ)をフォローする
ゲームの間

コメント 疑問や感想など

このサイトはreCAPTCHAで保護されており、Googleのプライバシーポリシー利用規約が適用されます。

タイトルとURLをコピーしました