GIFアニメに少し細工すると突然奥行き感が増して立体っぽくなるテクニック

By Night-thing

画像フォーマットの一つであるGIFファイルを使えば、複数の画像を連続で表示させてパラパラマンガの要領で動く画像ファイルを作ることができます。古くから使われているフォーマットなので慣れ親しんでいる人も多いと思いますが、簡単な工夫を加えるだけでいきなりGIFアニメーションの奥行き感を増すことができるテクニックがあることが判明しました。

Incredible 3D GIFs Created with a Simple Visual Effect - My Modern Metropolis
http://www.mymodernmet.com/profiles/blogs/3d-gifs

そのテクニックとは、画像の中に2本の白線を書き込み、画面の動きに合わせて白線を調整するというもの。百聞は一見にしかずと言うことで、実際のGIFアニメーションを見れば一発で理解することができます。

思わずのけぞってしまいそうな感覚に襲われます。

さらに、この画像のような応用編も存在しています。

かじられそう……

ホラー映画のシーンもリアリティが倍増します。

元は平面の画像なのに、突如として現れる奥行き感が不思議です。

サイトでは、これら以外のGIFアニメーションを見ることもできるので、気になった人は訪れてみてもいいかもしれません。また、日本のアニメを加工した作例を見ることができるサイトもあります。

「アニメGIFに縦線2本入れると3D化される」を「けいおん！」でやってみたｗｗｗ | オタク.com
http://otakomu.jp/archives/55862.html

◆実際に3D風GIFアニメーションを作ってみた
原理がわかったので、実際に3Dっぽく見えるGIFアニメーションを作成してみました。まずはアニメのもとになる写真を準備します。今回は約20枚の写真からアニメーションを作成します。

Adobe Photoshopなどの写真加工ソフトを使用して写真に白線を書き込みます。レイヤー機能が使えるソフトがあればベスト。

左右に2本の白線を書き入れました。

今回は、左の白線の手前側を列車が走り抜けるように加工します。たとえばこんな写真。

消しゴムツールを使い、車体に重なっている部分の白線を消して行きます。

重なっていた部分を取り除きました。

この作業を繰り返し、必要な写真全てを加工します。写真の準備が調ったら、組み合わせて1個のGIFファイルを作成します。今回使用したのは、無料でGIFアニメーションを作成できるフリーソフトのGiamです。アニメーションのもとになる画像を全て選択してGiamへドラッグ＆ドロップ。

「ウェイト」に表示される数値を変更し、画像ごとの表示時間を100分の1秒単位で調節することもできます。準備が調ったら、ウィンドウ左上の「名前をつけて保存」アイコンをクリックして、ファイルを書き出します。

この作業でできたファイルがこちら。背景色と白線が溶けこんでしまいましたが、奥行き感を出すことができました。

白線が入っていない場合だとこんな感じ。見比べてみると、たしかに奥行き感・空気感が増したように見えます。

白線の色を変えてみました。グレーにしても同様の効果が得られましたが、あまり鮮やかな色は使わない方が自然な仕上がりになるのかもしれません。

1枚のGIFアニメーションを作るのに費やした時間はおよそ1時間程度でしたが、慣れてきて自分なりの方法が確立できると、もっと短縮できそうでした。YouTubeで見るムービーやVineなどのマイクロビデオなどとは違った味わいがあるアニメーションを作ることができるので、チャレンジしてみてもいいかもしれません。