Photoshopでgifアニバナーを作ろう！

まず初めに

バナーで、複数回ガチャをまわしたようなイメージのgifアニバナーを作成いたしましたので、ご紹介いたします。

何かの参考になれば幸いです。

サイズと容量を確認する

あとで容量を減らすのは大変なため最初に必ず確認します。
今回のバナーは

サイズ	容量
600px×500px	400KB以内

という規定があるためそれを念頭に入れて作成します。

アニメーションの最後のコマのキャラクターの画面を静止画で作成します。
今回はアイドルのミニキャラが出てくるイメージで作成いたしました。
※静止画の画面の作成過程は省略させていただきます。

今回は商用可のフリー素材で見つけた七色の石を使用

400KB以内でキャラクターの登場を最低でも2回行いたかったため暗闇の中から石が落ちてくるだけのシンプルな方向で作成開始します。

ウィンドウ→ライムラインを選択

タイムラインを使いながらアニメーションを作っていきます。

合計＝8枚
※ざっくりで大丈夫です。

赤枠四角で囲っている「選択したフレーム」を複製を選択し、フレームを増やす。
またループさせたいのでこの段階で赤枠「一度」の箇所を無限にします。

全てのフレームでの石を出した状態で落ちるアニメの位置を作成。
1と3の暗闇の時の石は画面の上下にあるとして位置や回転を決めていくと綺麗になります。

最後のフレームは文字を読ませたいので、フレームの時間も調整しました。

この段階でこんな感じです。

少しカクカクしているので、下記赤四角枠のトゥイーンを押します。

これは1コマ目と2コマ目の間のフレームを補完するため機能になります。
追加するフレームが多いほど滑らかになります。
今回は容量の都合で落ちる石のフレームの間に全て1ずつだけ足していきます。

こんな感じになります。

先ほどより少し滑らかになりました。

全てのフレームを選んだ状態で新規フレームをおすと一連の流れを複製できます。

1度目のガチャのアニメーションに下記変更を加えます。
・文字を削除
・キャラクターを差し替え
・最後のキャラクターの表示時間を短く

gifの色数を落として容量を調整しました。
色は劣化してしまいましたが、カラー32で362KBと400以内になりましたので、こちらで書き出し直して完了でした。

Animateのモーショントゥイーンほどではないですが、Photoshopのトゥイーンもかなり便利でした。
gifアニを作る際はぜひ使ってみてください。