そこはかとなく好奇心を刺激するクリエイターの秘密基地。

そこはかとなく好奇心を刺激するクリエイターの秘密基地。

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

      2016/02/09

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

こんにちは、GIFMAGAZINEでデザイナーをしている大野謙介(@SeKai_SeiFuKu)です。本連載は、Photoshopを用いて、GIFアニメを作成する方法を5回に分けて解説します。タイムラインパネルの使い方、GIF形式の保存の仕方、動画をGIFに変換する方法、2つのフレームだけで簡単にアニメーションが作成できるトゥイーンの使い方、写真1枚からアニメーションが作れるパペットワープ、最後にはシネマグラフという手法を用いて、幻想的なGIFアニメを制作します。

「PhotoshopでGIFアニメを作る方法」(大野謙介 連載)
第1回 タイムラインパネルの使い方、GIF形式の保存方法
第2回 動画をGIFに変換する方法
第3回 トゥイーンの使い方(位置・不透明度・効果)
第4回 パペットワープで写真1枚でGIFアニメを作る方法
第5回 シネマグラフの作り方

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

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

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

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

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

使用した素材ファイル

第二回のサンプルファイル
※今回の動画素材は、「Movietools.info」の「Green Equalizer」をお借りしています。

解説の流れ

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

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

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

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

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

また、[頻度制限]を大きくすることにより、フレームを間引くことができる。今回は4フレームとしました。
1-2.動画が長いので一部に切り出します。[選択した範囲のみ]を選択し、GIFにする範囲を制限します。

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

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

タイムラインパネルの使い方は以下をご覧下さい。
1-3.タイムラインパネルのボタンについて

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

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

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

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

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

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

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

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

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

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

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

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

PhotoshopでGIFアニメを作る方法[第3回]トゥイーンの使い方

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

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

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

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

 - PhotoshopでGIFアニメを作る方法, クリエイター, 大野謙介 , , ,

crem fbpage header
(いいね!で最新記事を毎日受け取れるみたいですよ)

あなたの好奇心を刺激する
コラム、ビジュアルビュース、GIFマンガ、海外映像作品紹介記事を毎日配信

more