お客様と共に創り、育て、稼ぐホームページ制作
WithStyle(ウィズスタイル)

猫のGIFアニメーション作ってみた!

2015年09月16日
ISOKI
未分類
にほんブログ村 デザインブログ Webデザインへ

こんにちは。
今週は先週予告したとおりにgifアニメーションを制作したいと思います。
制作方法はいろいろあると思うのですが、今回はAdobe Fireworksを使用して簡単なgifアニメーションを制作していきます。

早速ですが今回制作した作品をご覧ください。

 

ぐはははははは。

まるで生きているようだ。
というわけで制作方法です。

GIFアニメーションつくる!!

まずはillustratorで制作したファイルをCS6のverで保存します。Fireworksとの互換性があるのがCS6までなので、、、、。Fireworksで作ればいいんですがイラレのファイルがあるのでここは時間短縮します。弊社デザイナーnakayaが制作したファイルをこっそりいただきます。ささっ!!

ファイルをFireworksに読みこみます。

読み込み

 

しっかりとパスを認識しています。やほう!!

Fireworksのステートという機能を使用してアニメーションを作成していきます。
ステートはボタンのロールオーバー等を作るときに使用することがありますが、アニメーションにも活用できます。最近ではラインスタンプの作成にもこのステート機能をしようしている方もいるようです。確かに使えそう。
オブジェクトをシンボル化してトゥイーンという方法もあるのですが、ちょっと分かりずらかったので、アナログな方法でいきたいと思います。

まずはステートを複製しておまねこを量産します。

複製

無限ループしているほうが印象的なので元になる画像をマスターステートとして残しておきます。
一旦書き出し時に含めないようにチェックを入れて作業をします。

書き出しに含めない

おまねこくんの顔の傾きを変えて少し動かしてみましょう。
Fireworksの選択ツールでは拡大縮小や傾きの変更はできないので、その下にある拡大縮小ツールを使います。
各ステートのおまねこの顔の傾きをすこしずつ変化させていきます。

傾き

 

 

書き出してみる!!

一旦テストで書き出してみましょう。
ファイル→画像プレビュー を選択してみましょう。

画像プレビュー 書き出し

左側のアニメーションタブを選択すると、各ステートが見れます。
画像のループの設定や各ステートの表示秒数が設定できたり、実際の実行時間やファイルサイズも確認できます。
画像下の再生ボタンを押すと実際の動きが確認できます。

 

いざ!書き出し!

 

顔の傾の動き

 

キュン!すでにかわいい。

このような操作を繰り返してパラパラ漫画のように作成していきます。
動きを細かくしたりスピードを調整することで動画のように見せることも可能だと思います。
ステート間でのオブジェクトのコピーは、同じ位置にペーストできますのでとても便利です。

最後に

今回はFireworksを使用しての制作でしたが、Photoshopでのgifアニメ制作も可能ですので、いろいろお試しください。
今回はかなりアナログな方法でのgifアニメ制作でした。

最後にもう一度おまねこちゃんを見て今日は終わりにします。

 

ねこアニメ
にほんブログ村 デザインブログ Webデザインへ
トップページへのバナー
この記事を書いた人
ISOKI

ホームページを作る仕事をしています。主にコーディング担当。 CSSが好きです。