読者です 読者をやめる 読者になる 読者になる

にせねこメモ

はてなダイアリーがUTF-8じゃないので移ってきました。

Photoshop CS6で動画からアニメーションGIF作成

この記事では、 Photoshop CS6 を使って動画からアニメーションGIFを作成する方法を説明します。
f:id:nixeneko:20170327231806g:plain

こんな感じのものを出力します。


動画ファイルが比較的手軽に扱える時代になりましたが、HTML上などで画像感覚で手軽に動画を扱えるアニメーションGIFはまだまだ便利な技術です。
動画からアニメーションGIFを生成するのは、 Photoshop を使って簡単に行うことができます。ここではCS6を使いました。

手順

動画ファイルを用意

まず動画ファイルを用意します。Photoshopから読み込める形式になっている必要があります。
ここではAfterEffectsでレンダリングした圧縮なしのAVIファイルを用意しました。

動画を開く

ファイル(F) -> 読み込み(M) -> ビデオフレームからレイヤー(F) を選択します。
f:id:nixeneko:20170327224731p:plain

用意したAVIファイルを選択し、開くを選択します。
f:id:nixeneko:20170327224952p:plain

「ビデオをレイヤーに読み込む」ダイアログが開くので、「フレームアニメーションを作成」がチェックされていることを確認して今回はそのままOKを押します。
ここで読み込む範囲を指定することもできます。
f:id:nixeneko:20170327225321p:plain

すると、ビデオのフレームがレイヤーとして読み込まれ、タイムラインにフレームが表示されます。
f:id:nixeneko:20170327225759p:plain

この状態ですでにフレームの表示時間の指定がなされているため、表示時間を変更する必要がなければすぐに出力できます。

アニメーションGIFの作成

ファイル(F) -> Web用に保存... を選択します。
f:id:nixeneko:20170327230040p:plain

出力設定

するとダイアログが開くので、各種設定をします。
f:id:nixeneko:20170327230840p:plain

  • 形式に「GIF」を指定
  • 「カラー」で色数の設定(256が最大)
  • 今回の動画では透明部分を含まないので「透明部分」のチェックを外す
  • 「画像サイズ」で出力画像サイズの設定
  • アニメーションの「ループオプション」で、無限ループにするか、ループをしないかを設定可能

今回はその他はデフォルトのままにしてあります。
プレビューの下部に出力ファイルサイズが表示されるのでそれも参考に設定を変えていきます。
ちなみにTwitterにアップできるGIFのファイルサイズの制限は15MBまでだそうです(2017年3月27日現在)。

最後に「保存...」をクリックし、保存ファイル名を指定して保存します。