Photoshop CS5でGIFアニメを作る方法

特別なプラグインなど必要なくWeb ブラウザで表示できるGIF形式の画像ファイルは，基本的に256色までしか使えませんが，手軽な動画フォーマットとして，アイコンやちょっとしたモノクローム動画などに，便利に使われています。

アニメーションGFは，複数の静止画をアニメのコマのように順番に表示させることで画像が動いているように見せています。パラパラ漫画と同じですね。

オンラインでGIFを作ってくれるサービスなどもあるようですが，わざわざ新しいモノを使うより，せっかく手に入れたPhotoshopで，作成してみることに。今回は，デジタルカメラで撮影した静止画をGIFアニメ化してみます。

16305-275-274716

場所は，お台場。
三脚（バンガード・Abeo 323AV）とGXR A16 24-85mmで，30秒毎のインターバル撮影を20枚ほど撮影しました。

で，家に帰ってきてから，ちゃんとインストールされた（笑），Photoshop CS5を開いて，全てのファイルを読み込ませます。

で，さすがに横4000ピクセルを越える画像はでかすぎるので，全ての画像を横1024に圧縮。

ここからGIFアニメの作成に入るのですが，実はとっても簡単。

1枚目の画像に，後の画像ファイルをそれぞれ全選択してコピーしたものを，ペースト。

これを最後のファイルまで続けます。

すると，1枚目の画像に，枚数分のレイヤーが重なったものができあがります。

ウィンドウメニューから，アニメーション を選択し，アニメーション（フレーム） パネルを表示します。

アニメーション（フレーム） の右端にあるパネルメニューから，「レイヤーからフレームを作成」を選択します。

アニメーション GIF は、Web ブラウザで表示できる動画の一つです。アニメーション GIF では、複数の静止画をアニメーションのコマ （フレーム） のように順番に表示することで、画像が動いているように見せています。

アニメーション（フレーム）で，各フレームのディレイ（表示時間）と再生回数を選びます。

風景のGIFアニメは，あまり需要が無いのとファイルが大きくなってしまうので，あまりやられないので，Photoshopの「アニメーション（フレーム）」に表示される各フレームもとても小さいのですが，一応，プレビューして，問題ないことを確認します。

今度は，アニメーション（フレーム） パネルメニューから「アニメーションを最適化」。

で，いちばん重要なのが，単に「保存」するのではなくて，「ファイル」メニューから，「Web およびデバイス用に保存」 を選択して保存すること。

これでできあがったのが，

Source: flickr.com via Hideya on Pinterest

こちら。

このままでは，大きすぎるので，画像をクリックしてpinterestのページに飛んで，さらに画像をクリックしてFlickrのオリジナルファイルのページに飛んで下さい。

下までスクロールすると，太陽が沈んでいくところがGIFアニメ動画として再生されます。

このブログ用に横500ピクセルで作れば直接表示できて良かったのですが，せっかくの広角レンズのA16ユニットを使ったので，ちょっと変則的なことをしてみました。

ついでに，どんなサイトのサービスで，このGIF風景動画が再生されるかを調べたところ，
Facebook ×
Flickr ×（オリジナルファイルのみ○）
Pinterest ×
で，ダークホースのG+が○でした。

×の所は，表示用にJPEGファイルに変換されてしまうようですが，G+は表示用に圧縮された画像でもアニメーションを表示してくれます。Google plusは，変なところで頑張ってますね（笑）。

というわけで，Photoshop でGIFアニメ，ヘルプファイルを見ると，ちょっと難しそうに思いますが，写真だけでけっこう簡単に作成できてしまうので，三脚を持っているときはぜひお試し下さい。

16305-275-274716

- 「まわりぶろぐ」トップページに戻る -

Adobe Photoshop CS6 Macintosh版 アップグレード版(amazon)
Adobe Photoshop CS6 Windows版 アップグレード版(amazon)

Adobe Photoshop CS6 Windows版(amazon)
Adobe Photoshop CS6 Macintosh版(amazon)