![](/images/clear.gif)
前回、某サイトの制約に合わせたGIFアイコンの作り方を掲載しましたが、
お遊びの行程も入れたので少々冗長になり分かり難かったかもです。
そこで今回もっと単純な行程で作ってみようと思います。
準備する物はAVI形式の動画ファイルと「VirtualDub」という動画編集ソフトです。
基本的にこれだけでアニメーションGIFは作れます。
が、
補助でファイルコンバーター(AVI以外のファイルをAVI形式に変換)を使います。
それと、「Giam」(GIF制作ソフト)を使っています。
それでは始めましょうか。
![](https://blogimg.goo.ne.jp/user_image/02/b8/ae337f24349355add075cc72b74d9cf2.png)
いきなりですが、既に編集した画面になってます。
VirtualDubにAVIファイルを読み込ませたら、まず必要なシーンを残し不要部を切り捨てる「編集」をして下さい。
編集が終わりましたら、映像→フィルターとクリック
![](https://blogimg.goo.ne.jp/user_image/26/d6/d7f7b07caf2f208c58c78a34e2e6b84a.png)
ポップアップから更に追加をクリック
![](https://blogimg.goo.ne.jp/user_image/15/87/7693f25d7a536ed1066033589a608137.png)
そこからresizeを選択→OKをクリック
![](https://blogimg.goo.ne.jp/user_image/2f/5c/b8ba5867674420f9487b1ee61d32d612.png)
現在の画面サイズが入っています
そのままOKをクリック
![](https://blogimg.goo.ne.jp/user_image/17/0b/de83e7f95863f6c56a347c851dd952f1.png)
現在の画面サイズが表示されてます
切り出しをクリック
![](https://blogimg.goo.ne.jp/user_image/73/64/304274968c2f95aea5b8792f60eab450.png)
今回は、1024×768の画面から縦横比1:1の画面を切り出すので
左右合計256ピクセル分カットします
フレームが決まったらOKをクリックです
![](https://blogimg.goo.ne.jp/user_image/5f/7d/ba8b8bd76b2c71403f0fbc1eb1d9ba0f.png)
新しいフレームサイズが表示されてます
こんどは設定をクリック
![](https://blogimg.goo.ne.jp/user_image/4c/dc/2dfdab2a5de0e5d945f7f2f65cfba715.png)
ここで100×100ピクセルのフレームサイズでGIFファイルを作ってみましょう
新規設定で絶対指定を選択しサイズを100ピクセルに書き換えて下さい
そうしたらOKをクリック
![](https://blogimg.goo.ne.jp/user_image/6c/94/d542567eadd1a6c5d70bbc6405bcc964.png)
右側に新しいサイズ
OKをクリック
![](https://blogimg.goo.ne.jp/user_image/76/80/7ac7027a71f3798eb4291b142ed40106.png)
左上のちっちゃいのがリサイズ後のフレームです
![](https://blogimg.goo.ne.jp/user_image/5e/d5/9fcc65823319a41cae8c77c6f2ed1f83.png)
とりあえず、AVIファイルのままちっちゃくしたファイルを保存しておきましょう
これは「保険」みたいな物です
![](https://blogimg.goo.ne.jp/user_image/25/28/000c432827a16e9cb8664a370f3ef8e8.png)
いよいよ本番
エクスポート→アニメーションGIFを選択クリック
![](https://blogimg.goo.ne.jp/user_image/4d/ed/ef0d8638a4157aac5c4746d180cda9bb.png)
ファイルネームの入力ダイアログを開きます
![](https://blogimg.goo.ne.jp/user_image/6f/3e/63e3d1bfe10be4604f61dd3ffe95e63d.png)
ファイル名を入力して保存をクリック
これで100×100のサイズでGIFファイルが出来上がっています
![](https://blogimg.goo.ne.jp/user_image/20/45/6dcbd1ae7d816093acb990e863bacf12.png)
再度、映像→フィルターをクリック
![](https://blogimg.goo.ne.jp/user_image/06/bf/8b24e144335abcc942a73fd05cea0a58.png)
項目(リサイズ)を選択(クリック)→設定をクリック
![](https://blogimg.goo.ne.jp/user_image/7c/fa/b9572ec2eb541fae02b95182737de82f.png)
絶対指定のピクセル数を32に書き換えてOKをクリック
![](https://blogimg.goo.ne.jp/user_image/4d/0d/70e7795bc6def3771754d8388179801e.png)
新しいサイズが表示されてます
そのままOKをクリック
![](https://blogimg.goo.ne.jp/user_image/3f/8e/3b32ffd7587c9e3009d1ffae1555fc56.png)
はい、更にちっちゃくなってますね
![](https://blogimg.goo.ne.jp/user_image/21/3f/fec5b75f41ef373a69ff7647f56536da.png)
先ほどと同じ様にAVIファイルで一旦保存してからGIFファイルとしても保存します
![](https://blogimg.goo.ne.jp/user_image/5c/28/8664ffa3d24b5d039091747acea7b1b7.png)
ダイアログを開き・・・
![](https://blogimg.goo.ne.jp/user_image/34/dc/878cf97e8ed3a892842519ae8aaee3ae.png)
ファイル名を入力します
保存をクリックで32×32ピクセルのGIFファイルが出来上がります
これで一応出来上がりなんですが、某サイトで使うにはファイルサイズを150kb未満にする必要があります
ここで作ったファイルは約600フレームで900kb程度になってます
ファイルサイズを小さくする為にフレーム数を落とします
![](https://blogimg.goo.ne.jp/user_image/17/35/0386bd8101c679f180d9f94bd8791258.png)
映像→フレームレートを選択クリックします
![](https://blogimg.goo.ne.jp/user_image/42/e2/4e634e84576077897d98636f3bc0bdc5.png)
フレームレート変換から数値を指定するを選択
現在約30fps(上の囲み)なので10を指定する(この辺は適当)
指定したらOKをクリック
![](https://blogimg.goo.ne.jp/user_image/07/aa/71dd2f81a68bd5cc2a1b0e823f026977.png)
後はさっきと同じ様にGIF保存する
この結果、約200フレーム250kb程度まで小さくなった
これでも未だサイズが大きいが、
fpsを落とし過ぎると動きがカクカクしてしまうので、後はGiamにバトンタッチ
その為に
10fpsで作ったファイルをAVIファイルとして保存しておく
GiamでAVIファイルを読み込むとGIFに変換され編集が出来ます。
手動でコマ抜きやシーンカット及び保存時の減色などでファイルサイズを調整して下さい。
今回、動画形式の変換とVirtualDubの編集とGiamでの編集は端折りましたが、
動画変換から完成まで画面キャプチャしてスライドショーにしてみました
余分なコマも混ざってるかもですが
行程順にキャプチャしてるので、流れは分かって頂けるかと思います。
最後に完成品を貼り付けておきます
![](https://blogimg.goo.ne.jp/user_image/24/ce/5406ea23d64d10911edbdd0431614ed5.gif)
お遊びの行程も入れたので少々冗長になり分かり難かったかもです。
そこで今回もっと単純な行程で作ってみようと思います。
準備する物はAVI形式の動画ファイルと「VirtualDub」という動画編集ソフトです。
基本的にこれだけでアニメーションGIFは作れます。
が、
補助でファイルコンバーター(AVI以外のファイルをAVI形式に変換)を使います。
それと、「Giam」(GIF制作ソフト)を使っています。
それでは始めましょうか。
![](https://blogimg.goo.ne.jp/user_image/02/b8/ae337f24349355add075cc72b74d9cf2.png)
いきなりですが、既に編集した画面になってます。
VirtualDubにAVIファイルを読み込ませたら、まず必要なシーンを残し不要部を切り捨てる「編集」をして下さい。
編集が終わりましたら、映像→フィルターとクリック
![](https://blogimg.goo.ne.jp/user_image/26/d6/d7f7b07caf2f208c58c78a34e2e6b84a.png)
ポップアップから更に追加をクリック
![](https://blogimg.goo.ne.jp/user_image/15/87/7693f25d7a536ed1066033589a608137.png)
そこからresizeを選択→OKをクリック
![](https://blogimg.goo.ne.jp/user_image/2f/5c/b8ba5867674420f9487b1ee61d32d612.png)
現在の画面サイズが入っています
そのままOKをクリック
![](https://blogimg.goo.ne.jp/user_image/17/0b/de83e7f95863f6c56a347c851dd952f1.png)
現在の画面サイズが表示されてます
切り出しをクリック
![](https://blogimg.goo.ne.jp/user_image/73/64/304274968c2f95aea5b8792f60eab450.png)
今回は、1024×768の画面から縦横比1:1の画面を切り出すので
左右合計256ピクセル分カットします
フレームが決まったらOKをクリックです
![](https://blogimg.goo.ne.jp/user_image/5f/7d/ba8b8bd76b2c71403f0fbc1eb1d9ba0f.png)
新しいフレームサイズが表示されてます
こんどは設定をクリック
![](https://blogimg.goo.ne.jp/user_image/4c/dc/2dfdab2a5de0e5d945f7f2f65cfba715.png)
ここで100×100ピクセルのフレームサイズでGIFファイルを作ってみましょう
新規設定で絶対指定を選択しサイズを100ピクセルに書き換えて下さい
そうしたらOKをクリック
![](https://blogimg.goo.ne.jp/user_image/6c/94/d542567eadd1a6c5d70bbc6405bcc964.png)
右側に新しいサイズ
OKをクリック
![](https://blogimg.goo.ne.jp/user_image/76/80/7ac7027a71f3798eb4291b142ed40106.png)
左上のちっちゃいのがリサイズ後のフレームです
![](https://blogimg.goo.ne.jp/user_image/5e/d5/9fcc65823319a41cae8c77c6f2ed1f83.png)
とりあえず、AVIファイルのままちっちゃくしたファイルを保存しておきましょう
これは「保険」みたいな物です
![](https://blogimg.goo.ne.jp/user_image/25/28/000c432827a16e9cb8664a370f3ef8e8.png)
いよいよ本番
エクスポート→アニメーションGIFを選択クリック
![](https://blogimg.goo.ne.jp/user_image/4d/ed/ef0d8638a4157aac5c4746d180cda9bb.png)
ファイルネームの入力ダイアログを開きます
![](https://blogimg.goo.ne.jp/user_image/6f/3e/63e3d1bfe10be4604f61dd3ffe95e63d.png)
ファイル名を入力して保存をクリック
これで100×100のサイズでGIFファイルが出来上がっています
![](https://blogimg.goo.ne.jp/user_image/20/45/6dcbd1ae7d816093acb990e863bacf12.png)
再度、映像→フィルターをクリック
![](https://blogimg.goo.ne.jp/user_image/06/bf/8b24e144335abcc942a73fd05cea0a58.png)
項目(リサイズ)を選択(クリック)→設定をクリック
![](https://blogimg.goo.ne.jp/user_image/7c/fa/b9572ec2eb541fae02b95182737de82f.png)
絶対指定のピクセル数を32に書き換えてOKをクリック
![](https://blogimg.goo.ne.jp/user_image/4d/0d/70e7795bc6def3771754d8388179801e.png)
新しいサイズが表示されてます
そのままOKをクリック
![](https://blogimg.goo.ne.jp/user_image/3f/8e/3b32ffd7587c9e3009d1ffae1555fc56.png)
はい、更にちっちゃくなってますね
![](https://blogimg.goo.ne.jp/user_image/21/3f/fec5b75f41ef373a69ff7647f56536da.png)
先ほどと同じ様にAVIファイルで一旦保存してからGIFファイルとしても保存します
![](https://blogimg.goo.ne.jp/user_image/5c/28/8664ffa3d24b5d039091747acea7b1b7.png)
ダイアログを開き・・・
![](https://blogimg.goo.ne.jp/user_image/34/dc/878cf97e8ed3a892842519ae8aaee3ae.png)
ファイル名を入力します
保存をクリックで32×32ピクセルのGIFファイルが出来上がります
これで一応出来上がりなんですが、某サイトで使うにはファイルサイズを150kb未満にする必要があります
ここで作ったファイルは約600フレームで900kb程度になってます
ファイルサイズを小さくする為にフレーム数を落とします
![](https://blogimg.goo.ne.jp/user_image/17/35/0386bd8101c679f180d9f94bd8791258.png)
映像→フレームレートを選択クリックします
![](https://blogimg.goo.ne.jp/user_image/42/e2/4e634e84576077897d98636f3bc0bdc5.png)
フレームレート変換から数値を指定するを選択
現在約30fps(上の囲み)なので10を指定する(この辺は適当)
指定したらOKをクリック
![](https://blogimg.goo.ne.jp/user_image/07/aa/71dd2f81a68bd5cc2a1b0e823f026977.png)
後はさっきと同じ様にGIF保存する
この結果、約200フレーム250kb程度まで小さくなった
これでも未だサイズが大きいが、
fpsを落とし過ぎると動きがカクカクしてしまうので、後はGiamにバトンタッチ
その為に
10fpsで作ったファイルをAVIファイルとして保存しておく
GiamでAVIファイルを読み込むとGIFに変換され編集が出来ます。
手動でコマ抜きやシーンカット及び保存時の減色などでファイルサイズを調整して下さい。
今回、動画形式の変換とVirtualDubの編集とGiamでの編集は端折りましたが、
動画変換から完成まで画面キャプチャしてスライドショーにしてみました
余分なコマも混ざってるかもですが
行程順にキャプチャしてるので、流れは分かって頂けるかと思います。
最後に完成品を貼り付けておきます
![](https://blogimg.goo.ne.jp/user_image/24/ce/5406ea23d64d10911edbdd0431614ed5.gif)
![](/images/clear.gif)
![](/images/clear.gif)