GIMPアニメーションGIFチュートリアル

GIMPでアニメーションGIFを作成する方法

GIMPは、それが無料であると考えると、非常に強力なソフトウェアです。 特にWebデザイナーは 、単純なアニメーションGIFを作成する能力に感謝するかもしれません。

アニメーションGIFは、多くのWebページに表示されるシンプルなアニメーションですが、 Flashアニメーションよりもはるかに洗練されていませんが、GIMPを基本的に理解している人なら誰でも簡単に作成できます。

次の手順では、基本的なグラフィックス、テキスト、ロゴを使用して、単純なWebバナーサイズのアニメーションを表示します。

01の09

新しい文書を開く

この例では、GIMPを使用して、非常に基本的なアニメーションGIF Webバナーを作成します。 Web banner common 468x60のプリセットテンプレートを選択しました。 アニメーションでは、最終的なアニメーションの使用方法に応じて、プリセットサイズを選択するか、カスタムディメンションを設定することができます。

私のアニメーションは7つのフレームで構成され、各フレームは個々のレイヤーで表現されます。つまり、最終的なGIMPファイルには背景を含む7つのレイヤーがあります。

02の09

フレーム1を設定

空の領域からアニメーションを開始したいので、実際の背景レイヤーを変更しないでください。

しかし、 レイヤーパレットでレイヤーの名前を変更する必要があります。 パレットの背景レイヤーを右クリックし、 レイヤー属性の編集を選択します。 表示されたEdit Layer Attributesダイアログでは、レイヤー名の最後に(250ms)を追加します。 これは、このフレームがアニメーションに表示される時間を設定します。 msはミリ秒を表し、各ミリ秒は1000分の1秒です。 この最初のフレームは、4分の1秒間表示されます。

03の09

フレーム2を設定

このフレームにフットプリントグラフィックを使用したいので、「 ファイル」 > 「レイヤーとして開く 」でグラフィックファイルを選択します。 これにより、 移動ツールを使用して必要に応じて配置できる新しいレイヤーにフットプリントが配置されます。 背景レイヤと同様に、レイヤの名前を変更してフレームの表示時間を割り当てる必要があります。 この場合、私は750msを選択しました。

注: レイヤーパレットでは、新しいレイヤープレビューがグラフィックの周りに黒い背景を表示するように見えますが、実際にはこの領域は透明です。

04/09

セットフレーム3,4,5

次の3つのフレームは、バナーを横断して歩く足跡です。 これらは、フレーム2と同じ方法で挿入されます。同じグラフィックを使用し、もう一方のグラフィックを他のフィートに使用します。 前のように、時間はフレームごとに750msに設定されます。

各フットプリントレイヤーは白い背景を必要とするので、1つのフレームのみが見えるようになります。現在は、それぞれ背景が透明です。 フットプリントレイヤのすぐ下に新しいレイヤを作成し、 新しいレイヤに白を塗りつぶして、フットプリントレイヤを右クリックし、[ マージダウン ]をクリックすることで、これを行うことができます。

05の09

セットフレーム6

このフレームは白で塗りつぶされた空白のフレームで、最終フレームが現れる前に最終的なフットプリントが消えてしまいます。 私はこのレイヤーの名前をIntervalと命名し、250msの間だけこのディスプレイを持つことを選択しました。 レイヤーに名前を付ける必要はありませんが、階層化されたファイルをより使いやすくすることができます。

06の06

フレーム7を設定

これは最終フレームで、About.comのロゴとともにテキストが表示されます。 ここでの最初のステップは、白い背景の別のレイヤーを追加することです。

次に、 テキストツールを使用してテキストを追加します。 これは新しいレイヤーに適用されますが、ロゴを追加するとそれに対処します。これは前回のフットプリントグラフィックを追加したのと同じ方法で行うことができます。 これらを必要に応じて配置したら、 Merge Downを使ってロゴとテキストレイヤーを結合し、その結合レイヤーを以前に追加されたホワイトレイヤーとマージすることができます。 これは、最終フレームを形成する単一のレイヤーを生成し、これを4000msの間表示することを選択しました。

07の09

アニメーションのプレビュー

アニメーションGIFを保存する前に、GIMPはFilters > Animation > Playbackの順に選択してプレビューすることができます。 アニメーションを再生するために、わかりやすいボタン付きのプレビューダイアログが開きます。

何かが正しく見えない場合は、この時点で修正することができます。 それ以外の場合は、アニメーションGIFとして保存することができます。

注:アニメーションシーケンスは、 レイヤーパレットでレイヤーがスタックされた順序で設定され、バックグラウンドレイヤーまたは最下位レイヤーから順に設定されます。 アニメーションが順不同で再生されている場合は、レイヤーをクリックして選択し、 レイヤーパレットの下のバーで上下の矢印を使用してレイヤーの順序を変更する必要があります。

08の09

アニメーションGIFを保存する

アニメーションGIFを保存するのはかなり簡単です。 まず、 ファイル」 > 「コピー保存」に進み、ファイルに関連する名前を付け、ファイルを保存する場所を選択します。 「保存」を押す前に、左下にある「 ファイルタイプの選択(拡張子別) をクリックし、表示されたリストから「 GIFイメージ 」を選択します。 ファイルエクスポートダイアログが開き、[ アニメーションとして保存 ]ラジオボタンをクリックし、[ エクスポート ]ボタンをクリックします。 画像の実際の罫線を超えるレイヤーに関する警告が表示されたら、[ トリミング ]ボタンをクリックします。

これで、[ GIFとして保存 ]ダイアログにアニメーションGIFオプションのセクションが表示されます 。 これらをデフォルトのままにしておくことはできますが、アニメーションを一度しか再生しない場合は、 Loop foreverをオフにする必要があります

09 09

結論

ここに示す手順は、異なるグラフィックスやドキュメントサイズを使用して、簡単なアニメーションを作成するための基本的なツールを提供します。 最終結果はアニメーションの点では基本的なものですが、GIMPの基本知識を持つ人なら誰でも達成できる非常に簡単なプロセスです。 アニメーションGIFは、おそらく今やプライムを過ぎているかもしれませんが、少しの考えと慎重な計画でも、効果的なアニメーション要素を素早く作成するために使用できます。