まずはビデオタイムラインを使ったGIFアニメーションを制作したいと思います。

ビデオタイムラインは「タイムライン」の概念があるので、FlashやiMovie、finalcatなどの動画編集用ソフトに使用感が似ていると思います。要素の位置や不透明度などを設定しておいて移動させることで、中間のモーションが無くてもアニメーションさせることができるので、より直感的な操作が可能です（とは言いつつも、動画編集用のソフトがあるので複雑なものはわざわざPhotoshopで制作する必要はない気もしますが）。

使用素材：マップラボ

完成したものはこちら。画像がフェードインアウトを繰り返すアニメーションを制作します。

Photoshopを起動して、新規ファイルを作成します。サイズは任意のもの（今回は縦横128pxとしました）、解像度は72dpiを指定します。

「タイムライン」のウィンドウが出ていない場合は、「ファイル ＞ ウィンドウ ＞ タイムライン」を表示させます。タイムラインが表示されたら、中央のセレクトバーが「ビデオタイムライン作成」に選択されていることを確認してください。もし、選択されていない時は「▽（下矢印）」から選択してあげます。

「ビデオタイムライン作成」の部分をカチッとクリックしてあげると、編集画面が出てきます。

キャンバスにアニメーションさせたい画像を任意の場所に配置します。今回の場合は画像は1枚を使用、同じ位置でフェードインアウトすることを想定します。

上の画像は、画像1枚を配置した状態のもの。カンバス内に画像を配置するだけでタイムライン上にレイヤーと同様の名前で要素が自動的に追加されます。

画像をすべて配置し終えたら、タイムラインを操作していきます。「▽（下矢印）」をクリックすると「位置」「不透明度」「スタイル」という3つのオプションが出てきます。今回はフェードインアウトを設定していきたいので「不透明度」を使用していきます。

手順としては、青いバーを設定したい秒数に合わせ、点（キーフレーム）を打ち、不透明度を変更していくということを繰り返していきます。

画像は開始（0秒）の時点で設定を行ったところです。タイムライン上で菱形の点（キーフレーム）を打つときは、「不透明度」文言の左にあるストップウォッチのアイコンをクリックしてあげてください。画像をフェードインさせるので、開始時点では見えない状態（不透明度0％）に設定します。

1. 青いバーで編集したい時間を指定
2. 点（キーフレーム）を打ち、位置を確定
3. レイヤーで該当の表示形式を設定

すべての指定が終わりました。

このままだと2秒以降は表示されたままの状態となるので、終了の位置を2秒のところに設定してあげます。

最後にGIFへの書き出しを行います。「ファイル ＞ 書き出し ＞ Web用に保存」を選択し、「GIF」に設定、また今回はアニメーションをループさせたいのでループオプションを「無限」に設定しました。

次はフレームアニメーションを使ってGIFアニメーションを制作したいと思います。

フレームアニメーションはパラパラ漫画やコマ撮りに考え方が似ています。GIFアニメーションといったら、こちらの方に馴染みがあるかもしれません。

使用素材：マップラボ

完成したものはこちら。

使用する画像はこの8枚となります。

今回は「フレームアニメーション作成」を選択します。

すべての画像を配置し終えた状態がこちら。今回は8枚の画像を使っているので、カンバス上で画像が8枚重なって表示されている状態となっています。タイムラインはまだ変更していません。

1フレーム目では1枚目の画像を表示させ、それ以外は非表示とします。

次に2フレーム目を設定するために、1フレーム目を選択した状態で「複製」ボタンをクリックして2フレーム目を作成します。

作成されたら2フレーム目が選択されていることを確認し、レイヤーの表示非表示を切り替えます。

すべて指定したものがこちら。必要に応じて秒数を調整したらこれで完了なので、ビデオタイムラインの時と同様にGIFへ書き出しを行って完成です。

作成したGIFの圧縮は下記のサイトなどで行うと良い感じです。