officehojoブログのメインキャラ「freemans（フリーマンズ）」をアニメーションにしてみました。Topページで登場しています。
Photoshopのタイムラインでアニメーションを作ったので、簡単に作り方を説明しますね。
簡単にGIFアニメーションを作る（タイムライン）
Webサイトでは欠かせない存在になったGIFアニメーション。写真を動画のように動かしたり、キャラクターを動かしたり、簡単なアニメーションを作ることができます。
用意するのは、レイアウトが違う画像かイラストだけ。例えば上のアニメーションならこのように2つのイラストを用意します。（イラレで制作）
これを、そのままPhotoshopにコピペします。
一つのレイヤーに1コマずつのせていきます。
ずれていないか確認するために、目玉マークをつけたり消したりして目視します。
これでOK！ってなれば、アニメーション作業に入ります。
タイムラインでレイヤーからフレームを作成する
まず、「メニュー > ウィンドウ > タイムライン」でタイムラインウィンドウを呼び出します。
すると、アートワークの下に「タイムライン」というウィンドウが現れるので、ウィンドウの右上にあるメニューアイコンをクリックし、「レイヤーからフレームを作成」を選択します。
すると、一つだったタイムラインのコマがレイヤーの数だけ増えます。
次に、コマごとの再生時間を割り当てます。サムネイル画像の下にある数字をクリックし、選択します。最初は「0」になってるはずですが、私の場合は1コマ「0.5」秒で設定しているので、画像には「0.5」と表示されています。
その下にある「無限」のところをクリックすると、ループの回数を設定できます。ずっと動かしたい場合はそのまま無限でOK。
コマを増やしたい場合は「＋」マークで追加、削除したい場合はゴミ箱で。アニメーションの様子は再生ボタンで確認できますよ。
アニメーションをGIFデータで保存する
Webサイトで動かしたい場合は、Web用のGIF形式で保存します。
メニュー「ファイル > 書き出し > Web用に保存」（ショートカットキー：Command + Shift + Option + S）を選択し、次の画面でWeb用に保存画面に移ります。
左側に4つあるプレビューは、解像度別に「元の画像、高、中、低」と表示されています。右側で設定した結果は青枠で囲まれている画像です。
設定を拡大します。
プリセットのところでGIFを選択。128は高解像度になります。ファイルサイズと相談しながら設定をカスタムしてください。
設定後に保存を押せば、完了です！
どうでしょう、簡単でしたか？コマ数を増やせばもっと動きがリアルになりますよ。
最後は保存したファイルをダブルクリックして、実際にアニメーションされているか確認しましょう。