GIFアニメ講座03──超簡単GIFアニメ!(シンプルなアニメを作ってみよう)

もうこれ以上カ簡単に出来ないという、超簡単アニメです。あなたもGIFアニメ作りで遊んでみませんか?

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

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

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

材料

デスクトップに以下の画像をダウンロードして下さい。それぞれ透過処理済みです。
材料1 (1.5kb)


材料2 (300b)


材料3 (300b)

完成作品



作り方

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

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


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


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


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


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

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

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


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

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

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


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

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

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

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

完成作品

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

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

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

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

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

このブログは2001年07月23日開設のサイト「幻想画廊」を2019年にWordpressで移築したものです。この記事は17年前の、2006年05月16日に書かれました。文章の内容を変えずにそのまま転載してあります。リンク切れなど不備もありますが、どうぞご了承くださいませ。

元サイト「幻想画廊」はこちらです。