GIFアニメーションの作り方


作品例

このアニメーションは良い例とは言えませんが、GIF画像6枚を1つに加工してアニメGIF画像(私の造語)1枚をホームページに表示させたものです。紙芝居のように簡単に作れると思います。特徴は他にページを見ていて分かるとおり頻繁にアクセスするようになります。だから、なるべく容量の少ないアニメーションにすることが必要ではないかと思います。


1、必要な環境


Apple Macintosh(必須)ない人は買いにいこう
ドロー・グラフィックソフト(ここではクラリスインパクトを使用)
GifBuilder(フリーソフト)(重要)
作者のページ
http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html
Netscape2.0以降


2、元絵を描こう


私のように絵のうまくない人は、ドローソフトを使うことをお勧めします。達人は、ペイントソフトをお使いください。
なぜドローソフトかというと、動かしたい部分を描いたら位置や色の変化をいつでも自由に変えられてとても便利だからです。便利な分、なめらかなアニメーションにするには苦労すると思います。
そして元絵を描きます。下の6枚の絵は、上のアニメーションの各コマになるものです。



1)背景を用意しました。(別に必ず必要ではないですが)これを複製して同じものを用意します。



2)複製に文字を書き加えました。これをまた複製します。



3)複製の文字の色を少し変えました。ドローソフトでは簡単に変えられます。データー量を少なくするため全体をグレイスケールにしています。同様にこれも複製します。以下も同様に複製し、その複製を加工していきます。



4)



5)DTHPの影の文字を白い文字の後ろに置きました。



6)白い文字をクイックして動かしました。最後の一枚です。こうして6枚の絵が出来上がりました。

ここまで順に説明して矛盾しますが、5)か6)を始めに描いて、1)にもっていくようにすると構図としてやりやすいと思うので、もっとも絵が複雑なものから複製しつつ変化させると良いと思います。


3、GifBuilderを使おう


起動画面


1)GifBuilderを起動させました。背景がW@nd@wsみたいなのは特に関係ありません気にしないでください。




2)Fileで前に作ったGifの絵をOpenします(ここでは、dhk1.gif)。(上の図)それで、アニメーションのコマを登録した形になります。そして、順序良く他の6枚の絵を読み込みます。このページの例として出したアニメーションは、1・2・3・4・5・6・6・5・4・3・2・1と言う順序で実際は11コマでできています(下の絵)さらに背景がW@nd@ws@5みたいなのは特に関係ありません気にしないでください。。説明はしませんが、また、それぞれのコマの表示時間の設定が行えます。





3)最後に、アニメーションを保存します。保存すると、上の絵(kanbam964.gif)のようなファイルができます。このファイルを普通のgif画像と同じようにホームページに貼り付けると完成です。



今回は、ポジションの設定(2つ上の絵では、(0.0))なしのかなり効率の悪いアニメーションといえますが、その動きをドローソフトでカバーしました。次回はポジション設定を加えてみたいと思います。概略はこのような感じですが、みなさん素敵なアニメーションを作ってみてください。



目次へ戻る