ConneCre

connelog

RSS

Photoshopを使用した動画からGIFアニメの作成方法

仕事で動画をGIFアニメに変換する必要が生じたので作業方法のメモ。

色々やり方はあると思うのですが、動画の編集ツールとPhotoshopを使った作成方法です。
大まかな流れは、

・動画編集ツールを使い画像シーケンスで書き出し
 →PhotoshopでGIFアニメ化

です。
実際やっておりませんが、他の方法としては下記のやり方があると思います。

・動画編集ツールで画像シーケンスで書き出し
 →フリーソフトでGIFアニメ化

・Webサービス(Gifninjaなど)で動画からGIFアニメに一発変換

※GIFアニメにフレームをつけなければいけなかったのと画像のサイズ変更・切り抜き・調整レイヤーの追加等がPhotoshopで必要だったので今回はボツ

動画編集ツールで動画を画像シーケンスで書き出し

フリーソフトでもあるかと思うのですが、とりあえず今回はVegasでフォルダに書き出し。

20110715gif02.jpg


画像の間引き

画像を確認し、前後で必要ない部分があれば削除。
また、30fpsの動画の場合、そのままGIFアニメにするともったりするので、半分にばっさり間引く。

20110715gif03.jpg


画像をレイヤーとして読み込む

Photoshopを開き、ツールバーの

ファイル/スクリプト/ファイルをレイヤーとして読み込み

を選択し、フォルダを読み込み、OKを押す。

20110715gif01.jpg


レイヤーの順序を入れ替える

このままだと逆再生になってしまうので、レイヤーパネルのレイヤーを全選択し、

レイヤー/重ね順/逆順

で入れ替える。

20110715gif05.jpg


調整

切り抜いたり、サイズを変更したり、調整レイヤーを加えたり好きに加工。


アニメーションパネルでレイヤーをフレーム化

ウィンドウ/アニメーション

でアニメーションパネルを出す。
パネル右上のオプション(▼)から、フレームアニメーションに変換を選択

20110715gif07.jpg

更に、パネル右上のオプション(▼)から、レイヤーからフレームを作成を選択

コマアニメの為ディレイは必要ないので、フレームを全選択し、〇〇秒をクリックし、ディレイなしを選択

20110715gif08.jpg


フレームなどの装飾をつける

1フレーム目を選択し装飾などの追加をして書き出し。

1フレーム目で作業すると他のフレームも全て入れ替わるハズなのですが、矩形のパスを部分的に移動しても反映されなかったりするので、その場合一度別の新しいウィンドウにオブジェクトを引っ張って、元のウィンドウに戻すと反映されます。

20110715gif09.jpg

書き出しに際し、Web用に保存の画面の設定項目でディザをなくしたり等を試し、出来る限り美しく、また容量を軽くします。

PAGE TOP