gifアニメの作成〜Photoshop

gifアニメーションの作成方法です。
今回の題材はMac版のFirefoxの初期画面に現れるキツネ君に勝手に協力してもらいました。

オリジナルのものは実はping形式になっておりgifアニメではありません。
もともとの画像はこんな風になっています。

これをバラバラにしてgif形式にしてみます。

スライスで均等に分割

数えたら44匹のキツネ君が描かれています。
つまり44枚に分割すればよいわけです。

1. メニューからレイヤーの「レイヤーに基づく新規スライス」でスライスをします。
2. スライス選択ツールで大きなスライス部分を選択するとオプションバーに分割ボタンが出ています。
3. 垂直方向に分割で44分割とします。

これで44匹のキツネ君に分割できます。
あとはgif形式で保存をしておきます。このとき出来たゴミは捨てておきましょう。

ファイルをレイヤーとして読み込む

44枚のキツネ君のファイルをレイヤーとして読み込みます。
ファイルから「スクリプト」→「ファイルをレイヤーとして読み込み」で読み込むとひとつのファイルに44のレイヤーとして取り込まれます。

フレームの作成〜gifアニメ化

1. 44のレイヤーを一気にgifアニメにするにはCCではタイムラインを出しておきます。
2. タイムラインの右上にあるハンバーガーメニューから「レイヤーからフレームを作成」を選択します。
3. 44枚のフレームができあがります。
4. 全てのフレームをShiftを使って選択して切り替え秒数を設定します。0.1秒くらいが適当です。
5. アニメーションの繰り返し回数を設定します。