2012年07月22日

ビデオから奇麗なGIFアニメをつくる:Photoshopの使い方


 GIFアニメは、連続する数枚の写真を一定の時間間隔で表示することで、動いているように見えるアニメーションです。

 ビデオのコマからこれを作る時に問題になるのは、動かす対象と一緒に背景も動くこと。このため、無限ループのつなぎ目で、背景が激しく動き、とても見苦しくなります。

 それでは、背景を削除すればよい訳ですが、これが結構大変。そこで、今日は、この方法をご紹介します。ソフトは何でも良いのですが、今回は、Photoshopを使います。

【ビデオからの画像の抽出】

 今回の素材は、水樹奈々のビデオです。
 まず、このビデオをGom playerで再生します。
 Gom playerの左上にあるロゴをクリック。
 メニューの中から、[コントロールパネル]を選択
 切り取りたい必要なシーンで[静止画像キャプチャー]ボタンをクリックします。連打して連続画像をキャプチャします。

nana001.jpg


【抽出した画像の読み込み】

 抽出した画像は、特定のフォルダに保存されます。この保存フェルダーは、[静止画キャプチャー設定]で確認、変更できます。
 このキャプチャーした画像の中から、素材として使いたいものをPhotoshopにレイヤーとして読み込みます。

[ファイル][スクリプト][ファイルをレイヤーとして読み込む]で[レイヤーとして読み込む]ダイアログを開き、[参照]ボタンで、必要なファイルを選びます(Shiftキーを押しながら複数選択)。

nana002.gif


【背景の作成】

 読み込んだレイヤーで、アニメで最初に表示する画像を「背景レイヤー」に移動します。
[背景レイヤー]を2つコピーします。コピーした[背景レイヤー1]のみ表示し、それ以外の表示チェックを外します。
 コピーツールで、人物の部分を背景で塗りつぶします。この時、塗りつぶすのは人物が動く範囲だけでOK。

[背景の削除]
 「背景レイヤー2(これが1枚目の画像となる)を選択し、[多角形選択ツール]で背景の部分を選択していきます。この時、左上のボタン [選択範囲に追加][現在の選択範囲から一部削除]を使って微調整します(上の画像参照)。

 [Alt]+[マウスのジョグダイアル]を使って、表示を拡大・縮小しながら作業します。
 選択範囲の設定が済んだら、メニューバーの[選択範囲]⇒[選択範囲の保存]で、適当に名前を付けて保存します。
[Ctrl]+[X]で、選択範囲を削除します。これで、背景が削除されます。同時に、選択範囲も解除されます。
 次のレイヤーも同じようにします。この時、メニューバーの[選択範囲]⇒[選択範囲の読み込み]で、先ほど保存した範囲を読み込みます。この範囲でよければそのまま背景を削除しますが、たいていの場合、範囲の修正が必要になります。上の手順で範囲を修正し、範囲を保存後に背景を削除。この操作をフレームの数だけ繰り返します。

nana004.jpg


【GIFアニメの作成】

 今回は、5枚の写真を使っています。Photoshopのアニメーション機能を使ってGIFアニメを作成します。
 メニューバーの[ウィンドウ][アニメーション]。画面下に表示された[アニメーションフレーム]の右上のボタンをクリックし、[レイヤーからフレームを作成]。

nana008.jpg


 先ず、アニメーションフレームのフレーム1を選択し、背景レイヤーと人物の最初のレイヤーのみ表示させます。次に、フレーム2を選択し、背景フレームと人物の2枚目のみ表示させます。この操作を繰り返します。

nana009.gif


 横向き▲ボタンを押し、アニメーションの動きを確認します。

【GIFアニメーションの出力】

 最後に、GIFアニメーションとして出力します。
 メニューバーの[ファイル][Webおよびデバイス用に保存]。
 開いたウインドウで、先ず、出力形式[GIF]を選択。出力サイズの横幅を指定(縦は自動的に変わります)。最後に[保存]ボタンを押し、名前を付けて保存します。

nana6.jpg


【完成品】

 下のGIFアニメが完成版です。サンプルとして作ったものであり、コピー禁止のため、ロゴを入れました。
 アニメーションフレームで、フレームを一つずつコピーして、それらが逆順になるように移動します。これで動きがスムーズになります。

nana010.gif


 Photoshopでアニメーション出力すると、最適化されるため、GIFアニメをGIAMでフレームとして出力しても、逆順にすることができません。逆順だと最適化の過程で削除された部分が不足するため、欠落したドットが背景として表示されてしまいます。以前、キーラナイトレイのGifアニメでこの失敗をしました。普段は、Photoshopのpsdファイルは保存しないので、作り直しもできない。

 後でGiamを使ってGIFを調整するのなら、Photoshopの段階で、1枚ずつ画像として出力する必要があります。ネコ師は、時々、そのような方法を採ります。Giamはとても優れたソフトだと思います。

「水樹奈々 サンプルGifアニメ」削除しました。

【注意点】

 今回、作ってみて、アニメが1回繰り返した時点でノイズが入りました。このようなこともたまに起きます。その場合は、最終フレームをコピーして追加します。時間は短く設定。これでノイズは取れます。

 背景がチラつかないGIFアニメは、見ていて飽きません。
 このブログでは、いろいろなツールを使ったGIFアニメの作り方をご紹介していますが、Photoshopではトゥイーンは使いません。それはなぜか。やってみれば分かりますが、トゥイーンは二枚の画像の透明度を変えて中間画像を作っているため、全体としてボケたGIFアニメになります。仕上がりは、とても奇麗とは言えません。

 この記事の更新版は下のリンクでご覧下さい。新サイトです。

面白いビデオ:Youtube アニメコスプレ

猫x2
posted by ネコ師 at 15:34 | Comment(0) | 役立つ知識(PC編) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
記事に関係ないコメント、宣伝的なコメントは削除させていただきます。
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

▲ このページのTOPに戻る