Webサイトを作成する時などに、簡単なアニメーションがあると良いですよね。

GIMPでも、とっても簡単にGIFアニメーションが作れます。

本記事では、アニメーションの作り方から、アニメーションをブラウザで確認する方法までご紹介します。

とても簡単で、初心者でも3分で作れます。

1.GIFアニメーションとは?

GIMPのGIFアニメーションでは、1レイヤーを1コマとして、下のレイヤーから順に表示して動いているように見せます。

つまり、レイヤーのパラパラマンガのようなものです。

今回は、このような簡単なアニメーションを作ってみましょう。

2.GIFアニメーションを作る

1.まず、「ファイル」→「新しい画像」をクリックして、

  • gimp アニメーション, gimp gifアニメ

表示されたウィンドウで、画像サイズを入力し、「OK」をクリックします。
今回は幅:280ピクセル、高さ:160ピクセルで作成しました。

  • gimp アニメーション, gimp gifアニメ

2.「新規レイヤーの追加」gimp アニメーション, gimp gifアニメをクリックして、

  • gimp アニメーション, gimp gifアニメ

レイヤーの塗りつぶし方法で「透明」を選択し、「OK」をクリックします。

  • gimp アニメーション, gimp gifアニメ

3.追加されたレイヤーに、アニメーションの絵を作成します。

今回は、グラデーションがかかった円を作ります。

まず、「楕円選択ツール」gimp アニメーション, gimp gifアニメを選択し、画像上をドラッグして円の選択範囲を作成します。

  • gimp アニメーション, gimp gifアニメ

次に、「描画色」の色が表示されている所をクリックして、

  • gimp アニメーション, gimp gifアニメ

青色を選択し、「OK」をクリックします。
※ 色の調整方法は、別記事の「色の調整方法」で詳しく説明しているので参考にしてください。

  • gimp アニメーション, gimp gifアニメ

同じように、「背景色」の色が表示されている所をクリックして、

  • gimp アニメーション, gimp gifアニメ

黒を選択し、「OK」をクリックします。

  • gimp アニメーション, gimp gifアニメ

次に、「グラデーションツール」gimp アニメーション, gimp gifアニメを選択し、円の選択範囲内をドラッグします。

  • gimp アニメーション, gimp gifアニメ

すると、青と黒のグラデーションがかかった円になります。

  • gimp アニメーション, gimp gifアニメ

※GIMPのグラデーションをかける方法は、別記事の「GIMPでグラデーションをかける方法:基本から応用まで解説」で詳しく説明しているので参考にしてください。

4.円が描かれたレイヤーを、レイヤーダイアログ上で右クリックして「レイヤーの複製」をクリックし、

  • gimp アニメーション, gimp gifアニメ

レイヤーを複製します。

  • gimp アニメーション, gimp gifアニメ

5.GIMPのアニメーションは、下のレイヤーから1コマずつ表示されていきます。

ここでは、円が左下から右上へ移動するアニメーションを作るので、複製したレイヤーを選択し、「移動ツール」gimp アニメーション, gimp gifアニメを使って、円を右上に移動します。

  • gimp アニメーション, gimp gifアニメ

6.同じ作業(レイヤーの複製と、円の移動)を繰り返し、円を並べます。

  • gimp アニメーション, gimp gifアニメ

わかりやすいように、レイヤー名も下から1,2,3,4,5と変えておきます。

  • gimp アニメーション, gimp gifアニメ

そして、背景レイヤーは今回は不要なので、「レイヤーを削除」gimp アニメーション, gimp gifアニメをクリックして削除します。

  • gimp アニメーション, gimp gifアニメ

7.「フィルター」→「アニメーション」→「GIF用最適化」をクリックします。

  • gimp アニメーション, gimp gifアニメ

8.すると、新たに画像が作成され、レイヤー名に下図のように「(100ms)(combine)」と追記されます。

  • gimp アニメーション, gimp gifアニメ

(100ms)(combine)には、以下の意味があります。

100ms

レイヤー間の再生時間です。(単位:ミリ秒)
ここを大きい数字に変えるほど、次のレイヤーが表示されるまでの時間が長くなります。

combine

すべてのレイヤーが消去されずに、次のレイヤーが表示されて蓄積されていく表示方法です。
“ combine” から “ replace” に書き換えると、次のレイヤーが表示される直前に、前のレイヤーが消去されます。

書き換えた内容によって、アニメーションの見た目が変化します。

  • 例えば、すべてのレイヤーで(100ms)(combine)にすると、
  • gimp アニメーション, gimp gifアニメ

このようなアニメーションになります。

  • gimp アニメーション, gimp gifアニメ
  • 例えば、すべてのレイヤーで(600ms)(combine)にすると、
  • gimp アニメーション, gimp gifアニメ

このように、100ms より、次のレイヤーが表示されるまでの時間が長くなります。

  • gimp アニメーション, gimp gifアニメ
  • 例えば、すべてのレイヤーで(600ms)(replace)にすると、
  • gimp アニメーション, gimp gifアニメ

このように combine とは違い、次のレイヤーが表示される直前に、前のレイヤーが消去されます。

  • gimp アニメーション, gimp gifアニメ

例えば、1つのレイヤーだけ (100ms)(replace) で、他のレイヤーは (600ms)(replace) にすると、

  • gimp アニメーション, gimp gifアニメ

このように、100msにした3つ目の円だけ、レイヤーの表示時間が短くなります。

  • gimp アニメーション, gimp gifアニメ

9.今回は (600ms)(replace) でアニメーションを作成します。

レイヤー名をダブルクリックして、

  • gimp アニメーション, gimp gifアニメ

(600ms)(replace) に変更し、「Enter キー」をクリックします。

  • gimp アニメーション, gimp gifアニメ

すべてのレイヤー名を (600ms)(replace) に変更します。

  • gimp アニメーション, gimp gifアニメ

※補足:「フィルター」→「アニメーション」→「再生」で、どのようなアニメーションになっているかを確認できます。

10.「ファイル」→「エクスポート」をクリックし、

  • gimp アニメーション, gimp gifアニメ

表示された画面で、アニメーションを保存する場所を選びます。
今回はデスクトップにしました。

  • gimp アニメーション, gimp gifアニメ

次に、アニメーションの名前を入力します。
今回は「円アニメーション」にしました。

  • gimp アニメーション, gimp gifアニメ

そして、「ファイル形式の選択」の左側にある「+」をクリックし、

  • gimp アニメーション, gimp gifアニメ

表示されるメニューから、「GIF画像」を選択し、「エクスポート」をクリックします。

  • gimp アニメーション, gimp gifアニメ

次に表示されるウィンドウで、まず「アニメーションとしてエクスポート」にチェックを入れ、次に「無限ループ」にチェックを入れ、「エクスポート」をクリックします。

※「無限ループ」を選択すると、アニメーションを繰り返し再生します。(一番上のレイヤーまで再生したら一番下のレイヤーに戻ります。)

  • gimp アニメーション, gimp gifアニメ

11.これで、デスクトップにアニメーションが保存されました。

  • gimp アニメーション, gimp gifアニメ

3.GIFアニメーションをブラウザで確認する

アニメーションが保存出来たら、アニメーションをブラウザで確認してみましょう。

1.デスクトップに保存されたアニメーションを、Webブラウザ(Internet Explorer や Firefox や Google Chrome など)の現在表示されているタブの隣にドラッグします。

  • gimp アニメーション, gimp gifアニメ

すると、新たなタブが開き、アニメーションをブラウザ上で再生できます。

  • gimp アニメーション, gimp gifアニメ

まとめ

アニメーションは一見難しそうですが、作ってみるととても簡単ですよね。

作成手順

  1. アニメーションにするレイヤーを作成する
  2. 「フィルター」→「アニメーション」→「GIF用最適化」
  3. (100ms)(combine) を書き換えて再生方法を調整する
  4. 「ファイル」→「エクスポート」

是非活用してください。