GIMPで簡単なGIFアニメーションを作る方法

Pocket

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

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

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

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

目次

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

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

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

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

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

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

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

gimpgifアニメーション

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

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

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

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

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

gimpgifアニメーション

レイヤーを複製します。

gimpgifアニメーション

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

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

100ms

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

combine

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

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

  • 例えば、すべてのレイヤーで(100ms)(combine)にすると、

gimpgifアニメーション

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

gimpgifアニメーション

  • 例えば、すべてのレイヤーで(600ms)(combine)にすると、

gimpgifアニメーション

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

gimpgifアニメーション

  • 例えば、すべてのレイヤーで(600ms)(replace)にすると、

gimpgifアニメーション

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

 gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

gimpgifアニメーション

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

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

gimpgifアニメーション

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

gimpgifアニメーション

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

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

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

gimpgifアニメーション

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

gimpgifアニメーション

まとめ

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

作成手順

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

是非活用してください。

Pocket

Synclogueの最新情報はFBとTwitterで!