PhotoshopでGIFアニメを作る方法[第2回]動画をGIFに変換する方法

本記事で制作するGIFアニメ

今回は動画素材を使ってこのようなGIFアニメを作ります。

使用した素材ファイル

※今回の動画素材は、「Movietools.info」の「Green Equalizer」をお借りしています。

解説の流れ

1. Photoshopで動画を読み込みます。
2. タイムラインパネルでフレームを調整します。
3. GIF形式で保存をします。

1.Photoshopで動画を読み込みます。

1-1.[ファイル]メニュー→[読み込み]→[ビデオフレームからレイヤー]を選択します。

1-2.動画が長いので一部に切り出します。[選択した範囲のみ]を選択し、GIFにする範囲を制限します。

また、[頻度制限]を大きくすることにより、フレームを間引くことができる。今回は4フレームとしました。

ここまででほぼ作業は終了です。次にタイムラインパネルで余分なフレームを削除していきます。

2.タイムラインパネルでフレームを調整します。

タイムラインパネルの使い方は以下をご覧下さい。

2-1.タイムラインパネルでフレームを削除する。

このように最終敵に8フレームを残した。イコライザーの一つの山の始点と終点のフレームで区切ることにより、GIFアニメがスムーズにループするようになります。

3.GIF形式で保存をします。

3-1.[ファイル]メニュー→[Web用に保存]を選択します。

3-2.[保存形式]をGIFにして、[保存]を選択する。

動画からGIFアニメを作成することができました。

イコライザーの山を調整することでスムーズなループGIFアニメになりました。

次回はトゥイーン機能で２フレーム間の補完をすることにより、簡単にGIFアニメを作ります。

今回は、Photoshopで動画を読み込んでGIFアニメを作成する方法を解説しました。次回は、トゥイーン機能により、[位置][不透明度][レイヤー効果]の２フレーム間の変化を１ボタンで補完できる機能を解説します。ご期待下さい。

次回は１枚の写真素材を用いてこのようなGIFアニメを作ります。

次回記事はこちら：第３回PhotoshopでつくるGIFアニメ[トゥイーンの使い方]

クリエイター：大野謙介(@SeKai_SeiFuKu)

GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。Adobe Pinch Inにて「Photoshopで作るGIFアニメバナー」を連載
Follow @SeKai_SeiFuKu