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用に保存の画面の設定項目でディザをなくしたり等を試し、出来る限り美しく、また容量を軽くします。

iPhoneサイト向けCSSサンプル(CSS3)

使いまわしがききそうなものをまとめた個人的なサンプルです。随時更新致します。

MovableTypeコンテスト2010

MovableTypeコンテスト2010でConneCreが入賞致しました! 受賞サイト一覧[MovableTypeコンテスト2010]

phpファイルにxhtmlを適用するためのMIMEタイプなどの設定

docomoは仕様上、MIMEタイプに「application/xhtml+xml」を指定しないとxhtmlとして表示されません。 そのため、.xhtmlや.h

Photoshop CS5を使用した混合ブラシツール

とりあえず触ってみました。 イラストを描くときにかなり重宝する機能です。

Photoshop CS5を使用したコンテンツに応じた塗り

Photoshop CS5を使用したコンテンツに応じた塗り(Content Aware Fill)のメモ。 以前からyoutubeなどでアップされていた機能です

Photoshop CS5を使用した人物の切り抜き

Photoshop CS5を使用した人物の切り抜き方法のメモ。 以前のバージョンのチャンネルを使用した切り抜きや抽出を使用した切り抜きよりも、楽にできる印象です

Photoshop CS5の設定変更

Photoshop CS5の体験版を入れてみましたので、個人的な設定変更のメモ。 あとは、作業しながら順次、追加の変更を行っていきます。

文字を選択した際の背景色などの指定

CSS3をサポートしているブラウザ以外は無視されますが、ctrl+Aなどで文字を選択した際の背景色などの指定方法についてメモ。

PAGE TOP