ホーム ⇒ フォトショップ講座  ⇒ GIFアニメ講座3

  3:超簡単GIFアニメ! 
◆◇基礎の基礎という簡単アニメを作ってみよう!◇◆

もうこれ以上カ簡単に出来ないという、簡単アニメです。
あなたもGIFアニメ作りで遊んでみませんか?
2006年07月27日更新

前画像の種類と減色・透過を学ぼう!

戻る

バナーを作ろう!次

GIFアニメはパラパラマンガ

あなたはパラパラマンガを作ったことありますか? 私は授業中に教科書の端っこに描くのが大好きでした。

糸人間が歩いたり(糸人間ウォーク)、雪玉が転がったり(雪だるま) 単純ですが、自分で描いた絵が動くのは楽しいもの。 そんな子どもの頃の楽しさを思い出すことができるのがGIFアニメです。今回は単純なアニメを題材に、ImageReadyの基本を学んでいきましょう。

材料

Windowsの方は右クリックで Macintoshの方はドラッグ&ドロップでデスクトップにダウンロードして下さい。それぞれ透過処理済みです。

材料1 (1.5kb) 材料2 (300b) 材料3 (300b)
背景 立っている人 滑っている人

完成作品

Watch your step


作り方

レイヤーパレットレイヤーパレット

ImageReadyを開いて、上の材料をそれぞれ別のレイヤーに、コピー&ペーストします。

背景となる「黄色い画像」と、「立っている人間」、「滑っている人間」の位置を調節してください。 レイヤーパレットは左のようになっていますね。

ビュー画面ビュー画面

ImageReadyのビュー画面を2アップにすると、このように見えます。 左は元画像、右は最適化画像です。

アニメーションパレットアニメーションパレット

アニメーションパレットを見てください。赤い□の部分をクリックします。

アニメーションパレットアニメーションパレット

すると右に同じ画像が作られました。 この1コマがパラパラマンガの1ページにあたります。

レイヤーパレットとアニメーションパレットレイヤーパレットとアニメーションパレット

アニメーションパレットの2コマ目がアクティブな状態で、レイヤーパレットの表示を指定します。

赤い□の部分を見てください。このレイヤー3を「表示」(目のマークがつきます)に、レイヤー2を「非表示」にします。

すると2コマ目の絵が変わって、「階段で滑っている人の絵」になりましたね。

時間設定など時間・繰り返し設定

左下の赤い□は、アニメーションを「何回繰り返して表示させるか」を設定する部分です。今回は無限に繰り返すモードを選びました。

また「それぞれのコマを何秒表示させるか」を設定しましょう。今回は1秒ずつに設定しました。

では、再生スイッチを押して動きを確認しましょう。

カラーテーブルと最適化カラーテーブルと最適化

動いていますか? この瞬間がGIFアニメで最も楽しいんですよ。

最適化パレットを見てください。なるべくアニメが軽くなるように、カラーの設定などをします。 今回は8色で作りました。

カラーテーブルはこんな感じ。黄色(#FFFF00)をロックしておきました。 「透明部分」というところにチェックを入れておくと、透明化してくれます。

あとは【ファイル→最適化ファイルを保存】を選んで保存すれば完成です。

完成作品

Watch your step

おっと!階段に気を付けて!

GIFアニメについてちょっとだけご注意

GIFアニメ作りは楽しいので、ついサイトにたくさんはりつけてしまったりしまいがち。でもチカチカしたアニメが満載のサイトは見にくいですよね。あっちこっちでバナーが光っていたり、そこら中に「NEW」がまたたいていたら、読む方が疲れてしまうからです。

今回は分かり易くするために大きくてチカチカするアニメを作りましたが、ご自分で作る場合は、なるべくさりげないアニメ、目にやさしいアニメにしましょう。

たくさん作っていくうちに、コツがつかめてきますから、まずは一つ作ってみることから始めましょう!

前画像の種類と減色・透過を学ぼう!

戻る

バナーを作ろう!次

幻想画廊」 (c) Maria Garcia, 2002-2008

ホーム ⇒ フォトショップ講座  ⇒ GIFアニメ講座3