GIFアニメーションの作成方法
当ブログのヘッダーアニメーションは、GIMPで作成しました。背景は無くし、オブジェクトとキャラクターをそれぞれ独立して配置することで奥行きのあるアニメーションになりました。

基本的に、1.空や風景などの動かない背景、2.ビルや木などのオブジェクト、3.動かしたい人や物や動物などのキャラクター等を少しずつずらして配置し、連続で表示することでアニメーションとなります。もちろんキャラクターのみでもOKです。
画像を用意する
イラストであれば、少しずつずらした画を描きます。当ブログは自作のハンドメイド作品をキャラクターとして動かしますので、各方向から写真を撮ってそれぞれ切り抜きます。切り抜きについてはこちらに記載しています。

オブジェクトの画像も用意します。こちらもハンドメイドの木彫り文字です。こちらの画像も切り抜き、400×150にサイズ変更しPNGファイルとして保存しておきます。これを前に配置したり後ろに配置したりすることによって奥行きを出します。

画像を配置する
GIMPを起動し、「ファイル」、「新しい画像」をクリックします。

キャンバスサイズの設定画面が出ますので、サイズを入力します。幅600高さ250ピクセルに設定し、「OK」をクリックします。

「ファイル」、「レイヤーとして開く」をクリックし、あらかじめ400×150ピクセルのPNGファイルとして保存しておいた先ほどのロゴ文字画像を開きます。

600×250のキャンバス中央に400×150の画像が新しいレイヤーとして表示されます。真っ白な背景レイヤーと同時に2枚のレイヤーが表示されている状態です。

再び「ファイル」、「レイヤーとして開く」をクリックし、切り抜き、PNGで保存しておいたキャラクターの画像を開きます。

サイズを調整します。「レイヤー」、「レイヤーの拡大・縮小」をクリックします。

縦横比固定(チェーンがつながった状態のアイコン)で、サイズを変更し、「拡大縮小」ボタンをクリックします。

サイズが調整されて、中央に配置された状態です。3枚のレイヤーが表示されています。

ツールボックス内「移動」ボタンをクリックし、ドラッグして位置を調整します。

「ファイル」、「レイヤーとして開く」をクリックし、次の画像を開きます。先ほどと同様に「レイヤー」、「レイヤーの拡大・縮小」をクリックしてサイズを調整、「移動」ボタンで位置を調整します。下の画像のようになります。

これを繰り返し、画像を並べていくと下の画像のようになります。奥側になる画像は、レイヤーの拡大・縮小のときに手前より少しサイズを小さく設定すると、より遠近感が出ます。

アニメーション用画像を1枚ずつレイヤーに
次は、アニメーションの1枚ずつの画像用に、表示・非表示を切り替えて設定します。レイヤーボックス内各レイヤーの目のアイコンをクリックして、1枚目のキャラクター画像と文字オブジェクト画像の2枚だけ残して後は非表示にします。背景も使いませんので非表示にします。

下の画像のようになり、これがアニメーションの1枚目の画像となります。

レイヤーボックスの中に元画像とアニメーション用の画像が混在することになりますので、分かりやすくグループ分けします。ただし最終的にはグループから出して単独レイヤーに戻さなければなりませんので、この作業は省略しても問題ありません。「レイヤー」、「新しいレイヤーグループ」をクリックします。

「レイヤー」、「可視部分をレイヤーに」をクリックします。

レイヤーボックス内に、レイヤーグループと可視部分コピーというレイヤーが追加されていますので、それぞれダブルクリックか、もしくは右クリック・「レイヤー名の変更」をクリックして分かりやすい名前を付けます。

レイヤーボックス内新しいレイヤーグループの目のアイコンをクリックして表示を消し、1番目のキャラクター画像も非表示にして2番目の画像を表示します。「レイヤー」、「可視部分をレイヤーに」をクリックしレイヤー名を変更します。これがアニメーションの2枚目の画像になります。これを繰り返していきます。

オブジェクトの背面に配置するには
下の画像中の7枚のキャラクター画像は、文字オブジェクト画像の前面に表示されていますが、これをオブジェクトの背面に配置します。

レイヤーボックス内の文字オブジェクトレイヤーを選択し、ボックス下部の移動ボタンをクリックします。クリックごとに1つずつ上に上がります。該当のキャラクター画像レイヤーの上まで移動させます。

このように、オブジェクトの背面に表示されますので、また先ほどの要領でアニメーション用の画像レイヤーを作成していきます。

アニメーション用の画像レイヤー作成が完了したら、細かい部分の修正などができるように「ファイル」、「保存」をクリックし、xcf形式で保存しておきます。この後は元画像を削除していきますので保存は必須です。
不要レイヤーの削除
アニメーション用の画像レイヤーが完成したら、元の切り抜き画像は必要ありませんのでレイヤーを削除していきます。まず背景レイヤーを選択し、レイヤーボックス下部の「削除ボタン」をクリックします。自動的に次のレイヤーが選択されますので続けて削除ボタンをクリックしていき、元画像のレイヤーをすべて削除します。

残ったアニメーション用のレイヤーは、最初は分かりやすくするために新しく作ったレイヤーグループの中に入れましたが、今度はそのグループフォルダから出して単独レイヤーにします。

すべてのアニメーション用の画像レイヤーをグループから出したら、空になったグループレイヤーを右下の「削除ボタン」をクリックして削除します。

エクスポート
これでアニメーション用画像レイヤーのみになりましたので「ファイル」、「名前を付けてエクスポート」をクリックします。

保存場所を指定し名前を入力したらファイル形式の選択の「+」をクリックし、「GIF 画像」を選択、「エクスポート」をクリックします。

設定画面が表示されます。「アニメーションとしてエクスポート」に☑を入れると、オプションが入力可能になりますので、下の画像のように入力します。ディレイとは何ミリ秒表示するか、フレーム処理とは画像を重ねるか置き換えるかの設定です。最後に「エクスポート」をクリックするとGIF画像として保存されます。

アニメーション確認
今保存したGIFファイルをGIMPで開いてみます。「ファイル」、「開く/インポート」から開きます。レイヤーボックスを確認すると、「レイヤー名(ディレイ値)(フレーム処理)」が表示されています。ここをダブルクリックすることでディレイ値・フレーム処理の変更もできます。

ちゃんと動くか確認します。「フィルター」、「アニメーション」、「再生」をクリックします。

動画再生という新しいウィンドウが開きますので「再生」ボタンをクリックしてちゃんと再生されれば完了です。

GIFファイルですが、通常のJPEG画像ファイルと同じようにサイト編集画面に挿入することができます。

ディスカッション
コメント一覧
まだ、コメントがありません