Relaxing cafe

ＧＩＦアニメーション作成方法

■はじめに

　　「GIFアニメ」とは何枚かのGIF画像を連続して再生させることで出来るアニメーションのことを言います。
　　「GIFアニメ」を作るには画像をGIF形式に変換したりアニメーション化するために画像編集ソフトが
　　必要になりますのでご用意下さい。画像編集ソフトは各々、作成方法や手順が大きく異なります。
　　私は「Animation Shop 2」というソフトを使用していますが、ネット上にはフリーシェアでダウンロードできる
　　ものがありますので、そちらを利用しても良いと思います。凝ったものを作りたい方は購入をお勧めします。

■ソフトウェアを入手する

　　ソフトはネット上でもいろいろなところから入手可能です。主だったところを紹介している
　　ページをお知らせします。ご自分の意向にあったものを入手して下さいね。

Yahoo!コンピュータ

goo ダウンロード

fresh EYE

GIF Animation on the WWW JAPAN

■制作してみよう

　　アニメーションGIFは、いくつかの絵を組み合わせて作ります。

sampleアニメ

　上のようなアニメーションGIFをつくるには、下のように少しずつ動かせた絵を描くのです。

(1)	sample 01.gif
(2)	sample 02.gif
(3)	sample 03.gif
(4)	sample 04.gif
(5)	sample 05.gif
(6)	sample 06.gif

GIFでは、一色を透明色に指定することができます。sampleアニメは背景色を透過させています。

コマ数を増やせば動きは滑らかになりますが、ファイルサイズが大きくなり、表示までに時間がかかります。
コマ数を減らせば動きは荒くなりますが、ファイルサイズが小さくなり、表示までに時間がかかりません。

違和感の無い程度に極力コマ数は減らします。

自然な動きとなるように、それぞれのコマに表示時間を設定します。

　　　　□製作の流れ□

　　　　　　　1. 画像編集ソフトを使ってオリジナル画像を取込みます。(gif形式)

　　　　　　　2. 画像を端末のサイズに合わせてトリミング（切抜き）します。

　　　　　　　3. それぞれをどのくらいの時間表示させるのかを決めます。（例えば１枚目は２秒、２枚目は３秒等）

　　　　　　　4. 編集した画像をアニメーションGIF形式（.gif）で保存します。

　　これがGIFアニメの基本です。パラパラとめくる漫画と同じ仕組みです。上記の例では数枚の画像を使っていますが、
　　私が作っている簡単なものは２コマで作られています。

■容量を軽くする

　　容量が軽ければ軽いほど表示させるためにかかる時間が少なく、楽天の画像倉庫に保存できるサイズ（50KB）の
　　中で出来ることが多くなります。そこで容量を軽くするための方法をいくつかご紹介します。

　　　　□色数を減らす□

　　　　　　　　　色数が多いほど容量は重くなります。また、全てのコマの元画像が同じ色数である必要もありません。
　　　　　　　　　文字だけしかないコマはモノクロ（白と黒の2色）にしてみたりといった工夫をしてみて下さい。

　　　　□コマ数を減らす□

　　　　　　　　　1コマ=1枚の画像ですのでコマを削ればかなり軽くすることが出来ます。
　　　　　　　　　不要なコマは極力カットしていくと軽くなります。

　　　　□透過GIFを使う□

　　　　　　　　　特定の色を抜いたGIFを透過GIFと言います。表示させる背景色と画像の背景色や
　　　　　　　　　使われている範囲の多い色が同じ場合、透過GIFにしてしまえばさらに軽くすることが出来ます。

■表示させよう

　　GIFアニメをブラウザ上に表示させるには、まずは画像同様、出来上がったGIFアニメを画像倉庫もしくは
　　ご自身のプロバイダ等で契約者に提供しているホームページ領域へ、画像をアップロードして下さい。
　　そして、下記のタグを表記します。（＜＞は全角で表記していますが、実際は半角で）

　　　　　　　　＜IMG SRC="GIFアニメのURL" width="200" height="200" alt="sample"＞

　　　　　　　　　　　　　　　　　　　　　*width="画像の横幅"
　　　　　　　　　　　　　　　　　　　　　*height="画像の縦幅"
　　　　　　　　　　　　　　　　　　　　　*alt="画像にマウスを重ねた時に出る表示名"

******************************************************************************

以上ですが簡単に説明させてもらいました。
使用するソフトによって、画像処理（フレームの設定や秒数の設定等）の仕方が違ってきますが、
基本的な考えは同じです。（・・・のはず(^^ゞ）

結構皆様からのご質問が多かったので、GIFアニメーション作成方法のページを頑張って作ってみました。
簡単なものは、デジカメの画像ですぐに作れると思います。
わかりにくい表現もあると思いますが、ご了承下さい。
読んでもどうしても分からない場合、ご質問いただければ分かる範囲でお答え致します。
ただし、お使いのソフトに関しての質問は分かりかねますのでご了承下さいね。
(^0^)/~~see you again！

ジャンル別一覧