気球を狙撃して大爆発を引き起こすGIFアニメ

GIFアニメの作り方と素材庫

 今日は、気球の爆発GIFアニメです。

 以前から、爆発GIFアニメを作りたかったのですが、やっと作ることができました。

 単純な爆発だとつまらないので、狙撃することにしました(笑)。

 照準を向けると最初、ターゲットがぼやけていますが、調整してくっきり表示します。そして、ヒット! 気球は空の藻屑と消えてしまいます。

 このGIFアニメを作ること自体はそれほど難しくはないのですが、この品質のGIFアニメとして出力するのに苦労しました。

爆発GIFアニメの作り方の手順

1.爆発の動画素材をネットで探します。”explosion free video clips”あたりで検索すると、簡単に見つかると思います。素材の背景は黒になっていると思います。

2.入手した爆発動画を「After Effect」に読み込み、黒い部分を透明にします。透明化した各フレームを画像ファイルとしてPNG形式で保存。

3.「Photoshop」に気球の写真と爆発画像フレームを読み込み、合成します。
  照準線を描き、最初の方で、照準器越しに見たとき、ボケた画像から正しく焦点を合わせた画像に移行するように「Tween」で中間画像を作ります。

4.これをGIFアニメで出力
 
 出力の設定は下の通り。Qualityの覧を[Bicubic Smoother]と設定していますが、この覧はそれほど影響しないように思います。

 GIFアニメとして保存する別の方法も紹介します。

 PhotoshopでGIFアニメとして保存するとどうしても劣化が激しくなる場合の対処方法です。

 画像によっては、PhotoshopではGIFアニメとしてきれいに出力できない場合があります。今回の背景画像のように、空の色が広範囲に微妙に変化しているような画像の場合、gif形式での画像劣化が大きいようです。さまざまな変換形式を試して見ても、きれいに出力できません。

 そこで、イメージとして出力し、GIAMでGIFアニメにする方法も試します。余分なフレームも削除できるので、きれいに小さなGIFアニメを作ることができます。

 Photoshopでアニメーションをイメージとして出力するには、次のようにします(英語設定で使っているので、英語表記です。)

  • [File]⇒[Export]⇒[Render Video]
  • [Render Video]ダイアログが開くので、画面中ほどの[Image Sequence]にチェックを入れ、[JPEG]を選択
  • [Size]で[Custom]を選択し、出力したい縦横のファイルサイズを入力
  • [Frame Rate]で[Custom]を選択し、[fps]を「10」に設定

 最後に、Photoshopで出力した画像を「GIAM」に読み込み、動きのない同じフレームを削除し、時間を長く設定。GIFアニメとして保存します。

 最適化を行うと、ファイルサイズが半分になるのですが、画像劣化が激しいため、今回は最適化は行っていません。サイズが1.4MBになってしまいましたが、幅500px、50フレームで、なおかつ、この画質を維持するにはこのくらいのサイズになるのはやむを得ません。

 ネット上にたくさんのGIFアニメが公開されていますが、どれもサイズが小さく、画質が悪い。GIFアニメが劣悪画質の代名詞になっているように思います。そこで、今回は、ファイルサイズを抑えながら、可能な限り高画質で表示することにこだわりました。

 いろいろ試したのですが、この方法が最も良い画質が得られます。