お話歳時記 お話を見て書いて創るサイト お話歳時記
お話歳時記創作情報デジタルコンテンツメルマガwww.pleasuremind.jp TOP
◆ 渚物語の作り方。 ◆
 ←BACK      ◆ GIFアニメをつくってみよう。 ◆


  インターネット・携帯両方で、一番簡単に出来るアニメーションは、GIFアニメです。 FLASHアニメーションより手軽に出来て、FLASHプラグインが無くても表示出来るため、WEBページや、携帯のTOPページのポイント、動くバナー等も、GIFアニメの場合がよくあります。

  GIFアニメは、連続した画像を順番に表示して、画像が動いているように見せるもので、欠点としてはファイルサイズが大きくなりやすく、大きな画面には向かない事です。

  今回はこのGIFアニメをadobe photoshop Elementsで制作してみます。

  まず連続した画像を用意します。
  GIFアニメの場合は、背景、人物、前景(効果)と分けるのではなく、すこしづつ違う一枚絵が連続して表示されて、アニメーションになるので、キャラクターが動いているなら、動いた分だけ画像が必要になります。


このような四枚のCGを用意します。

 

  photoshop Elementsでは一つのレイヤーを、一つのフレームとします。
  GIFアニメにするには、まず連続した画像をレイヤー毎に配置します。


  下のファイルをダウンロードして、photoshop Elementsで開いてください。
  PSDアニメーション
ファイル ファイルを解凍する。

  photoshop Elements2の起動画面(MAC)。



  ファイルを開くには、一番上のバーの「ファイル」をクリックします。
  またレイヤーパレットはバーの右端にあります。
  クリックして開いた状態で、ドラッグすると、画面上に移動出来ます。





レイヤー「03」を複製します。
 ◇ツールバーの「移動ツール」を選択しておきます。
 ◇レイヤー「03」をクリックして選択。
 ◇上部バーのレイヤーをクリック。
  「03」レイヤーを複製します。
 ◇するとファイル名を変更するダイアログが出てきますから、ファイル名を「05」に変更します。

  




◆「05」ファイルが「03」ファイルの上に複製されます。
 次に「05」ファイルをドラッグして一番上に持っていきます。



◆同じようにして「02」ファイルを複製、「06」ファイルにし、
 一番上にドラッグします。



レイヤー「01」「02」「03」「04」から、
 レイヤー「01」「02」「03」「04」「05」「06」と、
 
ループするファイルが出来ます。

※photoshop Elementsではアニメーションになった時、一番下のレイヤーから表示されます。
 レイヤーは上に、上にと重ねていきましょう。



◆次にこのファイルをWEB用に保存します。
(またはツールバーのWEB用に保存アイコンをクリックします。)
 すると下の画像を最適化するダイアログが出てきます。


 ◇最初にGIF形式で画像を最適化します。
  GIFアニメですから「GIF」に設定。
  今回は割り付け、ディザなし、カラーを128にしました。
  最適化はそれぞれ画面を見ながら、変えてみてください



 ◇アニメーションを選択します。
  すると、一番下のアニメーションを設定する場所が有効になります。
  


 ◇アニメーションオプションを選択します。
  ○「繰り返し」を選択すると、繰り返しアニメーションが再生されます。
  ○「フレームディレイ」は個々のレイヤー、つまり一つの画像が表示される秒数です。


  ○秒数を設定します。
(1/6はレイヤー六枚のうち、一枚目が表示されていますよ、という案内です。)

 ◇OKをクリックするとファイル名と保存先を指定すダイアログが出てきます。
  ファイル名を変更したり、保存先を指定します。




 ◇アニメーションのプレビューは、お手持ちのブラウザのアイコンにドラッグすると再生されます。
 「フレームディレイ」の数値を変えたりして、どう変化するか確認してみましょう。

  GIFアニメーションは出来上がりましたか?
  WEBページのある方ならタイトルバナーや、ポイントになるようなものを作って見られたらいかがでしょうか?