|
★ GiamでアニメーションGIFを作ろう ★
|
|
|
| ■使用ソフト
|
 |
▼Giam（古溝
剛さんのフリーソフト）
・アニメーションGIFを作成するソフトです。
授業中に教科書の脇に描いたパラパラ漫画のイメージでアニメーションする画像が
作れます。直感的に使えるので、すぐ使いこなせると思います。 |
|
|
|
■アニメーションGIFを作ろう♪（同じ大きさの画像で作る♪）
動くGIF画像のことをアニメーションGIFといいます。
まずは、わかりやすく同じ大きさのGIF形式の画像を使って説明します。
今回は、私の姉妹サイト（ieLinks）で使っているバナーを使って説明します。
それでは早速アニメーションバナーを作ってみましょう。
|
１．GIF形式の同じ大きさのファイルを用意します。あまりファイル数を増やすと重くなりますので、
ほどほどにするようにしてください。今回は、この４枚を使用します。
|
|
|
|
|
| ２．「Giam」を起動します。
|
|
|
３．画像ファイルをドラッグします。まとめてでも１個づつでもOKです。
今回はファイル名が表示順になっているので、まとめてドラッグします。
ファイル名が順番になっていない場合は１個づつドラッグしましょう。
|
|
|
４．すべてのファイルのドラッグが終わったらファイルの順番が合っているか念の為確認します。
順番がちがっているようであれば「↑上移動」「↓下移動」ボタンで順番を変更します。 |
|
|
５．順番が合っていたら表示時間の調整を行っていきます。まずは全部を一括で設定しますので、
「全部選択」ボタンを押します。 |
|
|
６．右側の画面の「ウェイト[1/100s]」に数字を入れます。ウェイトの単位は1/100秒ですが、
必ずしも正確ではなくブラウザにより動作速度に差があります。したがって、動きを見ながら
おおまかに指定しましょう。今回は「50」と入力します。 |
|
|
７．「 」ボタンを押すと、View画面が表示されます。この画面で動きを確認します。 |
|
|
８．1コマ目と3コマ目の画像は強調したいので、今度は画像を１つづつ選んでいきます。
まず1コマ目を選んで、「ウェイト[1/100s]」に「200」と入力します。
3コマ目も同様に「200」と入力します。 |
|
|
|
９．「」ボタンを押して、View画面で動きを確認します。 |
|
|
１０．完成しましたのでファイルを保存します。
「ファイル」→「名前をつけて保存」で「ファイル名」を入力します。ここでは「ielinks」としています。
「ファイルの種類」は「GIF(*.GIF)」を選択して「保存」ボタンを押します。 |
|
|
１１．「書き込みオプション」画面がでてきますが、特に変更する必要はないので「OK」ボタンを押します。
※「保管時常に表示」のチェックをはずすと、この画面はでなくなります。 |
|
|
|
１２．これでアニメーションバナーが完成です。
|
|
|
|
■アニメーションGIFを作ろう♪（大きさの異なる画像で作る♪）
今度は、画像の中にある一部の画像を変更する場合について説明します。
まず２つのアニメーションバナーを見てください。全く同じに見えますが、ファイルサイズに注目してください。
左側は基本編で説明したように同じ大きさのGIF画像を４枚使用して作っていますが、右側のものは
違う作り方をしています。このファイルサイズの小さなアニメーションGIFの作り方を説明します。
(6.24KB) |
(5.03KB) |
|
|
※お家の画像は、そざいの広場さんの作品を使用しています♪
|
| では、なぜファイルサイズが小さいのでしょう？この画像をよく見ていただくとアニメーションしているのは、画面の右の方だけです。今回はこの動いている部分の画像でアニメーションGIFを作ります。今回の例ですと、約８０％のファイル容量で作ることができましたが、色数などによっては、だいぶファイル容量が変わりますので、お試しあれ〜♪ちなみに、ファイルの大きい方で使用した画像は次の画像です。基本編での作り方です。
|
１．基本編で作成したバナーでもOKですが、画像サイズを少しでも少なくする為に、画像一部のみを動かす
場合の作り方を説明します。GIF形式の次の画像ファイルを用意します。
|
|
|
|
|
| ２．「Giam」を起動します。
|
|
|
３．画像ファイルをドラッグします。まとめてでも１個づつでもOKです。
今回はファイル名が表示順になっているので、まとめてドラッグします。
ファイル名が順番になっていない場合は１個づつドラッグしましょう。
|
|
|
４．すべてのファイルのドラッグが終わったらファイルの順番が合っているか念の為確認します。
順番がちがっているようであれば「↑上移動」「↓下移動」ボタンで順番を変更します。
|
|
|
５．順番が合っていたら表示時間の調整を行っていきます。まずは全部を一括で設定しますので、
「全部選択」ボタンを押します。
|
|
|
| ６．右側の画面の「ウェイト[1/100s]」に数字を入れます。今回は「100」と入力します。
|
|
|
７．今回は、1コマ目と2コマ目〜4コマ目の画像のサイズが異なりますので、2コマ目〜4コマ目の
画像を１つづつ選んで、「左端の位置」に「58」と入力、「上端の位置」に「3」と入力していきます。
4コマ目まで終了したら「」ボタンを押して、View画面で動きを確認します。
基本編と異なるのは、画像サイズが違うので画像の左上の位置を指定している点のみです。
|
|
|
８．完成しましたのでファイルを保存します。
「ファイル」→「名前をつけて保存」で「ファイル名」を入力します。
「ファイルの種類」は「GIF(*.GIF)」を選択して「保存」ボタンを押します。
|
|
|
９．「書き込みオプション」画面がでてきますが、特に変更する必要はないので「OK」ボタンを押します。
※「保管時常に表示」のチェックをはずすと、この画面はでなくなります。
|
|
|
| １０．これでアニメーションバナーが完成です。画像サイズを少なくできますのでお試しください。
|
|
|
|
|
| |
