読者です 読者をやめる 読者になる 読者になる

灰色の棚

適当な話を適当に書くので、適当に見ていってください

手書きのGIFアニメーションを作りたい! ~理想と現実~


スポンサードリンク

 ワニを使って面白いことをしよう企画、第……なんだん?

 とりあえず、今回はGIFアニメーションを作ることを目標にしていろいろ作業しました!

 その結果、理想と現実にかなりのギャップが出ましたが、なんとか完成させることが出来ましたので紹介します。では、いってみよー!

理想型

 私が題材に選んだのは、ウッウーウマウマ*1でした。


ウッーウッーウマウマ(゚∀゚) PV 高画質 H.264 - YouTube

 こういうやつですね。


 曲に合わせてキャラクターが動く的なアニメーションで、今回は曲は付けないけど似たような動き(手を頭につけて踊っている部分だけ)をさせたいなと考えました。

作業内容

 まずはFireAlpacaで絵を書きました。一番慣れているソフトなのでいいかなぁと。

 で、ビットマップ形式で保存。アニメーションにするときに形式を変更させるだろうと思ったので、とりあえずbmpで保存しました。


 次に、Photoshopでそれらを取り込みました。今回は画像数5枚(この時点で少なすぎる気も)です。これを取り込んでレイヤー化しました。

 で、アニメーションのバーを開いて、レイヤーからフレームを作成して、秒数を割り振って、必要フレームをコピペで作って、GIF形式で保存して完成!!


 FireAlpacaからPhotoshopに移る間にいろいろ調べたり試行錯誤したので、それほどすんなりとは進みませんでしたが、とりあえず完成しました。次回からは簡単にできるはず。

 Photoshopがあるなら、この方法はかなり簡単に出来そうです。Gif形式で保存するときの設定で色数を少なく抑えたりすれば、かなりファイルサイズも抑えられました。

完成品

 完成品は、こちら!

 f:id:syunki-gt:20140812163813g:plain

 こいつ、動くぞ!

 ループしていますので、ここまで読んできたらすでに動いているよ、って状態でも大丈夫です。すぐに最初から踊り始めます。


 一応は踊っているんですが、なんか、違う。

 まぁ、これはこれで私は好きなんですが、お手本に近づかなかったのはなんでかな……。フレーム数が足りなかったかな……(もっと根本的な問題?)

おわりに

 GIFアニメも意外と簡単に作れました。確か少し前からTwitterGIFアニメが動くようになったはずなので、そちらでも遊べそうですね。

 5枚くらいの枚数でのアニメーションなら、慣れれば数十分で作れそうです。多分、絵を描く時間が一番長い。それ以外の作業は楽でしたからねー。


 そんなこんなで手書きGIFアニメーションを作る実験でした!

 では、今回はこのへんで。おわり!