Gifアニメーションを作成する方法

先日作成したイラストレーション「Floral Uterus – 緑(ROKU)」のYouTube動画の後半に、アニメーションのようにモノクロだったイラストに色が付いていく箇所があるのですが、せっかくなのでその時に使った画像でGifアニメーションを作ってみました。

その他制作過程の画像一覧はこちら　→ Noah’s ART Behance

Gifアニメーションを作る方法

Gifアニメーションを作る方法は、いくつかあるのですがその中でも、自分が使った方法と、とある制限のせいで使えなかった方法のいくつかをご紹介しようと思います。

まずは、

１．「画像を並べてぱらぱらマンガのように動かす方法」　

自分は、一番最初に、先ほど紹介した動画の後半にあるように「イラストの色付け過程で色を塗っては画像を保存する」ということを繰り返したため、少しずつ着彩箇所が増えた画像が大量に出来上がったので、それを順番通りにアップロードすることで自動的にGifアニメーションにしてくれるサイトを探しました。

こちらのサイトBanner Koubou さんでは、上記で書いたように画像を順次アップロードすることで無料でGifアニメーションにしてくれるのですが、こちらは、アップロードできる画像の上限枚数が３０枚とのことで、その他のサイトに比べて多いのですが、自分のイラストは６２枚!!!

枚数が多すぎて断念しました。。

そして次に自分が取り掛かった方法は、

２．「YouTubeに公開している動画から切り出す方法」

自分は前述してある通り、すでにYouTubeに動画を公開していたので、その中のアニメーション部分だけを切り出してGif動画にしようと考えました。

こちらのサイト Gif YouTube では、YouTubeのURLを張り付けるだけで自動的にGifアニメーションにしてくれます。

しかし、、　このサイトでのGifアニメーションにしてくれる最大のDuration(時間)は、１５秒まで。
自分が公開しているYouTubeのアニメーション部分は、３０秒近くあったのでこれまた断念。

最後に結局行きついたのが、、

３．「Photoshopのアニメーションで作成する方法」

自分が作りたかったGifアニメーションは、６２枚と枚数が多く、YouTubeにUPしていた動画もアニメーションにしたい部分のDurationが約３０秒と長かったことから、前述の各サイトでのGIFアニメ化は不可能とわかりました。

そして、結局Photoshopのアニメーション機能を使って作成することになりました。

作り方の詳細は、こちらのAdobe creative stationさんをご覧いただけるといいと思いますが、自分はUPする画像サイズが馬鹿みたいに大きかったので、Web用に保存する際にサイズが大きすぎて保存できず、何度もリサイズを繰り返してしまいすごく時間がかかりました。
そりゃ印刷レベルの画像を６２枚も読み込んで並べたらメモリを食いますよね、、、汗

そんなこんなで、最上部にUPしたGIFアニメーションが出来上がりました。

画像との違いは、やはり「動いている点」、しかし、動画との違いは再生までのハードルが低く、スクロールしているうちに動いているものに目が留まり最後まで見てもらえる確率が高いことでしょうか。
なかなかYouTubeが貼られていても、よほど時間がない限り再生ボタンは押さないと思うので、そういう点ではGIFアニメーションはパッと目を引くのでいいと思います。

今後も、自分の絵は完成した作品のみならず、制作過程や動画、アニメーション、グッズなど様々な切り口で見ていただけるように工夫をしていきたいと思っています。

また、今後はBehanceに作品を多くUPしていくことが予想されるので、是非ご覧ください。
よろしくお願いします。