|
★ Animation GIF MakerでアニメーションGIFを作ろう♪ ★
|
|
|
| ■使用ソフト
|
 |
▼Animation GIF Maker（服部宣広さんのフリーソフト）
・わかりやすい操作で、アニメーションGIFが作ることができます。
残念ながら、現在は配布中止です。
|
|
|
|
■アニメーションGIFを作ろう♪（同じ大きさの画像で作る♪）
動くGIF画像のことをアニメーションGIFといいます。
まずは、わかりやすく同じ大きさのGIF形式の画像を使って説明します。
今回は、私の姉妹サイト（ieLinks）で使っているバナーを使って説明します。
それでは早速アニメーションバナーを作ってみましょう。
|
１．GIF形式の同じ大きさのファイルを用意します。あまりファイルを増やすと重くなりますので、ほどほどにする
ようにしてください。今回は、この４枚を使用します。
|
|
|
|
|
| ２．「Animation GIF Maker」を起動します。
|
|
|
| ３．画面の左側の「ファイル」タブから画像が存在するフォルダを指定します。
|
|
|
| ４．ファイルを選び「追加」ボタンを押して右側の画面に追加します。
|
|
|
５．右側の画面のファイルを選んで（１つでも、全部でも選べます）から、画面の左側の「パラメータ」タブの「ディ
レイ」に数字を入れて「更新」ボタンを押します。ディレイの単位は1/100秒ですが、必ずしも正確ではなく、
ブラウザにより動作速度に差があります。したがって、動きを見ながらおおまかに指定すればＯＫです。
|
|
|
６．「作成」ボタンを押します。「ファイル作成」の画面がでますので、ファイル名をいれて「保存」ボタンを押して
ください。
|
|
|
７．画面の左側の「その他」タブから「作成画像確認（ブラウザ）」を押してください。動作を確認してみてくださ
い。ＯＫならば、これでおしまいですが、動きが早すぎたり、遅すぎたりする場合は、再度、ディレイの数字を
変えて「更新」ボタンを押して「作成」ボタンを押してファイルを保存します。
|
８．動きを確認します。ファイル名を同じにした場合は先程起動したブラウザで、「更新」ボタンを押せば新しい
画像の動きを確認できます。「作成画像確認(ブラウザ)」でも、もちろん確認できますが、ブラウザの起動に
時間がかかります。
|
| ９．完成したアニメーションバナーです。
|
|
|
|
■アニメーションGIFを作ろう♪（大きさの異なる画像で作る♪）
今度は、画像の中にある一部の画像を変更する場合について説明します。
まず２つのアニメーションバナーを見てください。全く同じに見えますが、ファイルサイズに注目してください。
左側は基本編で説明したように同じ大きさのGIF画像を４枚使用して作っていますが、右側のものは
違う作り方をしています。このファイルサイズの小さなアニメーションGIFの作り方を説明します。
(6.24KB) |
(5.03KB) |
|
|
※お家の画像は、そざいの広場さんの作品を使用しています♪
|
| では、なぜファイルサイズが小さいのでしょう？この画像をよく見ていただくとアニメーションしているのは、画面の右の方だけです。今回はこの動いている部分の画像でアニメーションGIFを作ります。今回の例ですと、約８０％のファイル容量で作ることができましたが、色数などによっては、だいぶファイル容量が変わりますので、お試しあれ〜♪ちなみに、ファイルの大きい方で使用した画像は次の画像です。基本編での作り方です。
|
１．基本編で作成したバナーでもOKですが、画像サイズを少しでも少なくする為に、画像一部のみを動かす
場合の作り方を説明します。GIF形式の次の画像ファイルを用意します。
|
|
|
|
|
| ２．「Animation GIF Maker」を起動します。
|
|
|
| ３．画面の左側の「ファイル」タブから画像が存在するフォルダを指定します。
|
|
|
| ４．ファイルを選び「追加」ボタンを押して右側の画面に追加します。
|
|
|
５．右側の画面のファイルを選んで（１つでも、全部でも選べます）から、画面の左側の「パラメータ」タブの「ディ
レイ」に数字を入れて「更新」ボタンを押します。ディレイの単位は1/100秒ですが、必ずしも正確ではなく、
ブラウザにより動作速度に差があります。したがって、動きを見ながらおおまかに指定すればＯＫです。
基本編と異なるところですが、位置に数字をいれているところがポイントです。この例ですと、横５８×縦３の
位置に２枚目の画像を表示するように位置を指定してます。つまりアニメーションする画像の左上の位置を
指定している訳です。基本編との違いはここだけです。
|
|
|
|
|
６．「作成」ボタンを押します。「ファイル作成」の画面がでますので、ファイル名をいれて「保存」ボタンを押して
ください。
|
|
|
７．画面の左側の「その他」タブから「作成画像確認（ブラウザ）」を押してください。動作を確認してみてくださ
い。ＯＫならば、これでおしまいですが、動きが早すぎたり、遅すぎたりする場合は、再度、ディレイの数字を
変えて「更新」ボタンを押して「作成」ボタンを押してファイルを保存します。
|
８．動きを確認します。ファイル名を同じにした場合は先程起動したブラウザで、「更新」ボタンを押せば新しい
画像の動きを確認できます。「作成画像確認(ブラウザ)」でも、もちろん確認できますが、ブラウザの起動に
時間がかかります。
|
| ９．完成したアニメーションバナーです。ファイルサイズは、5.03KBです。
|
|
|
|
|
| |
