Webサイトを作成する時などに、簡単なアニメーションがあると良いですよね。
GIMPでも、とっても簡単にGIFアニメーションが作れます。
本記事では、アニメーションの作り方から、アニメーションをブラウザで確認する方法までご紹介します。
とても簡単で、初心者でも３分で作れます。
目次
１．GIFアニメーションとは？
GIMPのGIFアニメーションでは、１レイヤーを１コマとして、下のレイヤーから順に表示して動いているように見せます。
つまり、レイヤーのパラパラマンガのようなものです。
今回は、このような簡単なアニメーションを作ってみましょう
２．GIFアニメーションを作る
１．まず、「ファイル」→「新しい画像」をクリックして、
表示されたウィンドウで、画像サイズを入力し、「OK」をクリックします。
今回は幅：280ピクセル、高さ：160ピクセルで作成しました。
２．「新規レイヤーの追加」
をクリックして、
レイヤーの塗りつぶし方法で「透明」を選択し、「OK」をクリックします。
３．追加されたレイヤーに、アニメーションの絵を作成します。
今回は、グラデーションがかかった円を作ります。
まず、「楕円選択ツール」
を選択し、画像上をドラッグして円の選択範囲を作成します。
次に、「描画色」の色が表示されている所をクリックして、
青色を選択し、「OK」をクリックします。
※ 色の調整方法は、別記事の「色の調整方法」で詳しく説明しているので参考にしてください。
同じように、「背景色」の色が表示されている所をクリックして、
黒を選択し、「OK」をクリックします。
次に、「グラデーションツール」
を選択し、円の選択範囲内をドラッグします。
すると、青と黒のグラデーションがかかった円になります。
※GIMPのグラデーションをかける方法は、別記事の「GIMPでグラデーションをかける方法：基本から応用まで解説」で詳しく説明しているので参考にしてください。
４．円が描かれたレイヤーを、レイヤーダイアログ上で右クリックして「レイヤーの複製」をクリックし、
レイヤーを複製します。
５．GIMPのアニメーションは、下のレイヤーから１コマずつ表示されていきます。
ここでは、円が左下から右上へ移動するアニメーションを作るので、複製したレイヤーを選択し、「移動ツール」
を使って、円を右上に移動します。
６．同じ作業（レイヤーの複製と、円の移動）を繰り返し、円を並べます。
わかりやすいように、レイヤー名も下から１，２，３，４，５と変えておきます。
そして、背景レイヤーは今回は不要なので、「レイヤーを削除」
をクリックして削除します。
７．「フィルター」→「アニメーション」→「GIF用最適化」をクリックします。
８．すると、新たに画像が作成され、レイヤー名に下図のように「(100ms)(combine)」と追記されます。
(100ms)(combine)には、以下の意味があります。
100ms
レイヤー間の再生時間です。（単位：ミリ秒）
ここを大きい数字に変えるほど、次のレイヤーが表示されるまでの時間が長くなります。
combine
すべてのレイヤーが消去されずに、次のレイヤーが表示されて蓄積されていく表示方法です。
“ combine” から “ replace” に書き換えると、次のレイヤーが表示される直前に、前のレイヤーが消去されます。
書き換えた内容によって、アニメーションの見た目が変化します。
- 例えば、すべてのレイヤーで(100ms)(combine)にすると、
このようなアニメーションになります。
- 例えば、すべてのレイヤーで(600ms)(combine)にすると、
このように、100ms より、次のレイヤーが表示されるまでの時間が長くなります。
- 例えば、すべてのレイヤーで(600ms)(replace)にすると、
このように combine とは違い、次のレイヤーが表示される直前に、前のレイヤーが消去されます。
- 例えば、１つのレイヤーだけ (100ms)(replace) で、他のレイヤーは (600ms)(replace) にすると、
このように、100msにした３つ目の円だけ、レイヤーの表示時間が短くなります。
９．今回は (600ms)(replace) でアニメーションを作成します。
レイヤー名をダブルクリックして、
(600ms)(replace) に変更し、「Enter キー」をクリックします。
すべてのレイヤー名を (600ms)(replace) に変更します。
※補足：「フィルター」→「アニメーション」→「再生」で、どのようなアニメーションになっているかを確認できます。
１０．「ファイル」→「エクスポート」をクリックし、
表示された画面で、アニメーションを保存する場所を選びます。
今回はデスクトップにしました。
次に、アニメーションの名前を入力します。
今回は「円アニメーション」にしました。
そして、「ファイル形式の選択」の左側にある「＋」をクリックし、
表示されるメニューから、「GIF画像」を選択し、「エクスポート」をクリックします。
次に表示されるウィンドウで、まず「アニメーションとしてエクスポート」にチェックを入れ、次に「無限ループ」にチェックを入れ、「エクスポート」をクリックします。
※「無限ループ」を選択すると、アニメーションを繰り返し再生します。（一番上のレイヤーまで再生したら一番下のレイヤーに戻ります。）
１１．これで、デスクトップにアニメーションが保存されました。
３．GIFアニメーションをブラウザで確認する
アニメーションが保存出来たら、アニメーションをブラウザで確認してみましょう。
１．デスクトップに保存されたアニメーションを、Webブラウザ（Internet Explorer や Firefox や Google Chrome など）の現在表示されているタブの隣にドラッグします。
すると、新たなタブが開き、アニメーションをブラウザ上で再生できます。
まとめ
アニメーションは一見難しそうですが、作ってみるととても簡単ですよね。
作成手順
- アニメーションにするレイヤーを作成する
- 「フィルター」→「アニメーション」→「GIF用最適化」
- (100ms)(combine) を書き換えて再生方法を調整する
- 「ファイル」→「エクスポート」
是非活用してください。