GIFアニメを作る　（GIMP）

無料のフリーソフト

フォトレタッチ画像加工ソフト【ＧＩＭＰ】

----------------------------------------------

今回はGIFアニメーションの作り方を紹介します

GIFアニメメーションは
GIF画像を順に表示していくことで
動いているように見せるGIFファイルです

まぁ、パラパラアニメ見たいのもんです。
下の画像は9枚の画像を順に表示して走ってるように見せてます

今回はこの↑GIFアニメで紹介します

↓二枚の画像を使って作ります

GIMPを立ち上げ背景の画像とキャラクターの画像を開きます
レイヤーはこんな感じです↓

ツールボックスの移動ツールを使ってキャラクターを
右のほうに動かします

メニューの【レイヤー】→【可視部分をレイヤーに】を選ぶと、、、

今、キャンバスに表示されてる画像が
コピーされレイヤーになります↓

これで1枚目が完成しました

2枚目の画像を作ります
↑目のマークを押してコピーされたレイヤーを見えなくしてください

先ほどのと同じようにして

ツールボックス内の移動ツールで
キャラクターを少し動かします

そして同じように
メニューの【レイヤー】→【可視部分をレイヤーに】を選ぶと、、、

キャンバスに表示されてる画像がコピーされレイヤーになります↓

2枚目の画像が完成しました

3枚目の画像を作りますので、、同じように
目のマークを押して先ほどコピーされたレイヤーを見えなくし、、

移動ツールを使ってキャラクターを少し動かして、、、

そして同じように
メニューの【レイヤー】→【可視部分をレイヤーに】を選ぶと、、、

これで3枚目の画像が出来ました

同じように繰り返し作業をして
4枚目、5枚目・・・・・・・・と作ります
基本パラパラアニメみたいのものですので地道な作業ですが(;^_^A
↓のように仕上がりました

GIFアニメにしたい画像がすべて完成しました
赤で囲った元の画像はいらなくなりましたので
この赤で囲ったレイヤーは削除してください

メニューの【レイヤー】→【レイヤーを削除】で
選んだレイヤーを削除出来ます
または、
レイヤーウインドウの右下のゴミ箱を押すと
選んだレイヤーが削除できますよ

さて完成された画像がどのように動くのか見てみましょう

メニューの【フィルタ】→【アニメーーション】→【再生】を選ぶと・・

動画再生の別画面が開きます
この画面の演奏を押すと先ほど作ったレイヤーが
下から順に表示されていきます

GIFアニメにした時に、このように表示されます

一応、
これでGIFのアニメーションで保存すればGIFアニメは完成です

保存の仕方はこちらを参考にして下さい

ここから、応用です
上のGIFアニメは先ほど作った段階でGIFで保存したものです

画像のファイルサイズが121KBです
上のGIFアニメと↓のGIFアニメを見比べてください

同じように動いているGIFアニメなのに

ファイルサイズが1/4くらいになりました！

極端な例ですが、
キャラクターが動いていますが
背景があまり変わらないようなアニメーションでしたら
多少ファイルサイズを減らすことが出来ます

先ほど作った段階で、または、作ったGIFファイル画像に
メニューの【ファイル】→【アニメーション】→【GIF用最適化】
を選ぶと・・・・

別ウインドウが開き、自動で背景や要らない部分をカットした
レイヤーを作成してくれます

これでGIF保存すると最適化前に比べて
ファイルサイズを減らすことが出来ます

GIF用最適化は必ずしもいい結果が出るとはかぎりませんので
最適化する前の段階も一応保存していた方がいいですよ

さて、最適化すると各にレイヤーごとに数字が表示されてます

この数字は表示速度です
フレーム5の100の数字を2000に変えてみます

100を2000に変えました

メニューの【フィルタ】→【アニメーーション】→【再生】を選び
動画の確認をすると↓

先ほど数字の変えたフレームが長く教示されるようになりました
このように表示速度を変えることが出来ます

この動画画面を出しながら表示速度の編集も出来ますよ♪

------------------------------------------------

GIFアニメは一枚一枚作る、少し根気のいる作業ですが
アイデアと作り方次第でいろんなGIFアニメが作れます