GIFアニメーション



アニメーションの原理は「パラパラマンガ」



人間の視覚特性(残像)を
利用して動いているように見える仕組み。

  • 画像形式「GIF」の拡張仕様の一つで、動画を扱う形式。
  • 一つのファイルの中に複数のGIF画像を保存し、それらを順に表示していくことで動画を表現している。
  • GIF形式で圧縮しているためサイズが小さく済むことから、インターネット上でもバナー広告などに簡易な動画として利用されている。
  • その方式上音声を扱うことはできず、複雑な動画には向かない。



Flashとの違い

  • 画像のみしか扱えない。音声は扱えない。
  • ブラウズには「プラグイン」が必要ない。



GIFアニメの作成手順

(1)Illsutaratorで「パラパラマンガ」の1枚づつをレイヤーを重ねて作る。

  ※動かない部分と動く部分を区別して描く。

  ※レイヤーの複製をして、下のレイヤーをそのまま利用する。

(2)「ファイル」→「書き出し」:PSD形式

  ※「RGB」「72ppi」「レイヤーを保持」がチェックされていること。

(3)書き出された「PSD」形式ファイルを、Photoshopで開く

(4)パレットオプションで「レイヤーからフレームを作成」を選択する。

(5)各フレームの時間を設定する。

(6)ブラウザで動作確認をする。

(7)最適化ファイルを「GIF」形式で保存する。



GIFアニメ:キャラクターを動かす

  • キャラクターを動かす場合、Illustator・Photoshopともに、動きの元となる画像がレイヤー分けされていることが前提となる。