みなさんこんにちは。タニグチです。

ネット上でよく見かけるGIFバナー。
アクトゼロへの制作依頼も最近増えてきました。

今週はそんなGIFバナー制作の小技を紹介します。

GIF制作の方法

社内ではphotoshopの、【タイムラインウインドウ】で制作しています。
【タイムラインウインドウ】には制作画面が【ビデオタイムライン】と【フレームアニメーション】の2パターンがあって、制作するGIFバナーの容量や動かし方によって、使い分けられるようになっています。

すごくざっくりとした違いは下記になります。

ビデオタイムライン
簡易的な動画編集の画面。Adobe After Effects 、apple motion等の動画編集ソフトの画面と同じく、キーフレームが設定できます。

【メリット】
オブジェクトを滑らかに動かせる。オブジェクトを移動させたりスタイルに動きを付けたりできる。複数のものを動かすのが楽。
フレーム数の制限がない。動画を読み込んで変換できる。等
【デメリット】
自動的に最もなめらかに動きを表現するため、（コマ数が増えるため）容量が動画並に重くなる。

フレームアニメーション

一コマ一コマに対しデザインと秒数を指定する方法。パラパラ漫画的な考え方。
【メリット】
コマ数を減らすのが簡単。静止画を切り替えるだけのgif等に向く。
【デメリット】
コマの数だけ画面デザインが必要。デザイン調整後にフレームの再設定が必要。フレーム数制限があるため、長い動画が読み込めない。

ほとんどのバナー制作では複雑な動きを必要としない為、【フレームアニメーション】を使ってバナーを制作します。

さて、ここに【フレームアニメーション】を使って制作した二つのバナーがあります。

今回はこれら二つのgifを組み合わせ、一枚のgifを作りたい時どうするか？ということを考えていきます。
簡単そうに聞こえますが、フレームアニメーションのみではなかなか困難です。理由は↓です。
【コインが降るバナーのタイムライン】
こちらのバナーは各コマに「0.15秒」を設定し、キラキラとコインの位置を切り替えて動きを表現しています。

【スロットマシーンのタイムライン】

こちらは各コマ「0.1秒」、随所に止まる箇所として「0.5秒」と「1秒」の設定がされています。

ここで問題なのが、これら二つの【フレームアニメーション】は、一つのpsdに秒数設定できません。
二つのGIFの動きがバラバラのため、コインの動きとスロットの動きの辻褄の合う動きを考えなおす必要が出ていきます。
（この場合だと、スロットの動きで「1秒」を使っていて、「0.15秒」で割り切れないため完全再現は不可能です。）

そこで【ビデオタイムライン】を使って組みあわせてみましょう。手順を紹介します。

1.gifの秒数を長い方に合わせる

今回はスロットのGIFの秒数に、コインのコマをコピペで増やし、秒数を合わせます。

2.二つのpsdを【ビデオタイムライン】に切り替える。

左下のアイコンで切り替えられます。

3.psdを一つにします。

片方のpsdの動きが設定されたレイヤーをグループ化（またはスマートオブジェクト化）し、もう片方のpsdにドラッグで持ってくる。

4再生してみましょう。

変なずれが無ければokです

移動で持ってきた際に容量が増えてしまうので、実際には最後にもう一度【フレームアニメーション】に変換し、コマを半分ほど落とし秒数を倍にするなどの対処が必要ですが、一つ一つ動きの設定をし直すよりも楽なのでは？と思います。複数のものを動かす際に【ビデオタイムライン】はかなり使える機能ですね。