3：超簡単GIFアニメ！ ◆◇基礎の基礎という簡単アニメを作ってみよう！◇◆
3：超簡単GIFアニメ！ |
|
 |
バナーを作ろう！ |
あなたはパラパラマンガを作ったことありますか？ 私は授業中に教科書の端っこに描くのが大好きでした。
糸人間が歩いたり（
)、雪玉が転がったり（
) 単純ですが、自分で描いた絵が動くのは楽しいもの。 そんな子どもの頃の楽しさを思い出すことができるのがGIFアニメです。今回は単純なアニメを題材に、ImageReadyの基本を学んでいきましょう。
Windowsの方は右クリックで Macintoshの方はドラッグ＆ドロップでデスクトップにダウンロードして下さい。それぞれ透過処理済みです。
| 材料1 （1.5kb) | 材料2 （300b） | 材料3 （300b） |
 |
 |
 |
レイヤーパレット
ImageReadyを開いて、上の材料をそれぞれ別のレイヤーに、コピー＆ペーストします。
背景となる「黄色い画像」と、「立っている人間」、「滑っている人間」の位置を調節してください。 レイヤーパレットは左のようになっていますね。
ビュー画面
ImageReadyのビュー画面を2アップにすると、このように見えます。 左は元画像、右は最適化画像です。
アニメーションパレット
アニメーションパレットを見てください。赤い□の部分をクリックします。
アニメーションパレット
すると右に同じ画像が作られました。 この1コマがパラパラマンガの1ページにあたります。
レイヤーパレットとアニメーションパレット
アニメーションパレットの2コマ目がアクティブな状態で、レイヤーパレットの表示を指定します。
赤い□の部分を見てください。このレイヤー3を「表示」（目のマークがつきます）に、レイヤー2を「非表示」にします。
すると2コマ目の絵が変わって、「階段で滑っている人の絵」になりましたね。
時間・繰り返し設定
左下の赤い□は、アニメーションを「何回繰り返して表示させるか」を設定する部分です。今回は無限に繰り返すモードを選びました。
また「それぞれのコマを何秒表示させるか」を設定しましょう。今回は1秒ずつに設定しました。
では、再生スイッチを押して動きを確認しましょう。
カラーテーブルと最適化
動いていますか？ この瞬間がGIFアニメで最も楽しいんですよ。
最適化パレットを見てください。なるべくアニメが軽くなるように、カラーの設定などをします。 今回は8色で作りました。
カラーテーブルはこんな感じ。黄色（＃FFFF00）をロックしておきました。 「透明部分」というところにチェックを入れておくと、透明化してくれます。
あとは【ファイル→最適化ファイルを保存】を選んで保存すれば完成です。
おっと！階段に気を付けて！
GIFアニメ作りは楽しいので、ついサイトにたくさんはりつけてしまったりしまいがち。でもチカチカしたアニメが満載のサイトは見にくいですよね。あっちこっちでバナーが光っていたり、そこら中に「NEW」がまたたいていたら、読む方が疲れてしまうからです。
今回は分かり易くするために大きくてチカチカするアニメを作りましたが、ご自分で作る場合は、なるべくさりげないアニメ、目にやさしいアニメにしましょう。
たくさん作っていくうちに、コツがつかめてきますから、まずは一つ作ってみることから始めましょう！
|
|
|
バナーを作ろう！ |
「幻想画廊」 (c) Maria Garcia, 2002-2008
