アニメーションの作り方

ネガ

以前に作ったアニメーションがありますので
わかりやすいのでそのアニメーションとともに
説明をしていきたいと思います

調査ロゴ

アニメーションは
コマめくりなので
そのための画像を用意します

このがぞうでは単純なので
一枚の画像を12枚に複製しただけです

拡張子は.gifがおすすめです

f013

この画像は説明のために拡張子のgif画像をpngに変えてしまったので色落ちしてしまい緑がかってしまいましたが
本来はグレーですので
変化するわけでわありません

複製した12枚の画像を
コマめくりのように作るために
色付けを行ないました

f014

この12枚の画像を
インターネットでgifアニメを作成してくれる
サイトにアップロードして
出来上がったら画像をダウンロードするかたちになります

その際に秒数が指定できますので
替えるスピードを調整できます

今回の画像は
単純でしたが

複雑なものだと苦労します

以前砂時計を作ったさいは
きめ細かくするために
かなりの画像を使いました

砂時計

物知りサーチ

砂時計をイメージしたイラストです。

他で作ったものですが、意外に良くできたので、
メインで使う事にしました。

アニメーションでは、21枚の画像を使って1枚、1枚に砂が落ちるイメージで作り上げました。
確認をしながら行いましたので、結構に時間もかかりました

c140

リンゴを転がすイメージ

りんごの木のアニメ

ジフアニ

アニメーション作り

今回はGIF(ジフ)アニメを使ってアニメーションを作ってみたいと思います。

まずはリンゴの画像をペイントで作りそれを保存する時にgif形式で保存します。

アニメーション作り5

そのリンゴの画像を角度を90度ずつ変えた物を合計で四枚用意します。
そうすると一周を回るように出来ます。

それをすこしずつずらしながら
転がるイメージの間隔で置いていきそれを一枚ずつ保存していきます。

アニメーション作り2

これは90度変えたものです

それともう少し細かく角度を変えてやれば綺麗に転がっているようにみえるのですが

今回は4枚とかなり転がり方が荒いです。もう少し手間をかければより綺麗に出来上がると思います

例えば90度を45度にした8枚を用意すればもう少しきれいに仕上がると思います。

さらにもう少し細かくしたければ時計のように5分おきの間隔の画像を用意するとかなりきめ細かくなると思います

アニメーション作り3

これは180度変えたものです

アニメーション作り4

これは270度変えたものです
これをGIFアニメーションを使って、一枚ずつすり替えていきます。

ウェブ上でもその加工を行ってくれるサイトがあります。

今回はすり替える画像の早さは0.3秒ずつ切り替えています。

アニメーション作り7

アニメーションとしてすり替えますので同じ大きさの画像を用意した方が良い事になります。
まずは転がるイメージとしてリンゴを4個並べます。
そこで位置づけを決めて良いのであれば、一個ずつ保存する形になります。
3個切り取り保存を繰り返します。
具体的には3個を切り取ったら保存して、また4個に戻し、
次の三個を切りって保存してを繰り返して作ります。
そうすると楽に仕上がります。
なるべくつづり番号で保存するとわかりやすいです。(1,2,3,4)

アレンジ

リンゴの色を変えてなしにしてもよいとおもいます

梨のイラスト

木の描き方

gif画像を使ってアニメーションを作る

ジフ
アニメーションとは、
いわゆるパラパラ漫画です。

使い方次第では、とてもインパクトのある作品が出来上がると思います
ウェブ上で作る事も出来ますし、
自分でソフトをダンロードして使う事も出来ます。

ウェブ上では
バナー工房(bannerkoubou)さんで簡単にアニメーションgifを作る事が出来ます。

バナー工房

同じ大きさの画像をパラパラ漫画風に画像をセットして、
どれぐらいのスピードで入れ替えるのか
それを、永遠と回すのか、それとも一往復だけにするのかを決めます

このエントリーをはてなブックマークに追加


スポンサード リンク

 

↑このページの先頭へ