アニメーションgifが復権してきているようなので、方法のメモ。写真をコマ撮りしてレイヤーに時系列で並べていくことでもできますが、今はmovとかスクリーンキャストとかをアニメgifにするのが新しいのかな。とおもいます。

まずは、動画ファイルを用意します。カメラから取り込んだものや、スクリーンキャストならQuickTimeなどで録画して保存したものを利用できますね。
Premireや、iMovieなどで、アニメーションgifにしたい部分だけ抽出して書き出ししておくとベストです。
（Photoshop側の取り込み時にも読み込み範囲を設定できるみたいなのですが、Photoshopって読み込みの部分、若干弱いイメージがあるので。）


「ファイル＞読み込み＞ビデオフレームからレイヤー...」
を選択し、読み込む.movファイルを選択します。


レイヤーにずらーっと.mov内の画像がインポートされたら、「ウェブ用に保存」で保存します。



プリセットをgif系に、さらにカラーテーブルの下あたりにあるアニメーション設定を適宜調節して書き出します。

fc2用に圧縮してるのでザラザラになっちゃいましたが、こんな感じです。
movファイルのコマを一枚一枚jpeg圧縮してから繋げたら、もうちょっと綺麗な絵になるのかな。
圧縮はCompressor.ioを利用しました。
他にOnline GIF optimizerなどもよさげです。

スクリーンキャストのみの動画なら、
スクリーンキャストをそのままアニメーションgif化してシェアまでできる「recordit 」が便利そうです。
あんまり長いのはNGなのかなと（5〜6秒くらいまでが最適？）おもいます。あとは、データの重さですね。ハイビジョン動画（iphoneで撮ってもハイビジョンだけど）だとすぐに10Mとか行きますので。
どうやって圧縮するか、どの部分を切り取るか、というあたりを気をつければいいのかなーと思いました。

jpgをつなげてjqueryでパラパラアニメにしたほうが絵は綺麗。
アニメーションgifは、ひとつのファイルにまとまっているのが素晴らしい。
けどHDな画像の場合は、youtubeにあげちゃったほうが良い場合もある。
いろんな方法があるので、そのときに一番必要な方法を選ぶことが大事なのかなっておもいます。

ご参考にどうぞ。

関連記事

• movなどの動画データをphotoshopでアニメーションgifにする方法
• 「ウェブデザイン」の「枠」のほうのデザインのおはなし
• 「デザイン」という思考（概念）をまとめてみる。
• photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。
• プレゼンやセミナーのスライドのばに的考え方と、作り方。