Webサイトデザイン制作Tips|Webあんぎゃ

Webサイトデザイン制作における基礎知識を中心に記載しています。
内容は2013/6/7より受講している求職者支援訓練「Webサイト制作科」の授業に基づいています。

2013-07-12

Fireworksで作る簡単なGifアニメーション制作

Fireworksで簡単なGifアニメーションの制作方法を紹介する。

制作手順
  1. アニメーションさせたいベクター画像を用意する(フリーで商用可のものが多い)。
  2. Fireworksで画像のサイズに合う新規ファイルを作成し、画像を貼り付ける(初期の段階で画像に変更を加えたい場合はその変更を加える)。
  3. ステートパネルを表示して、ステートを複製する(現在のステートの後に挿入)。
  4. ステートパネルにて複製したステート(ステート2)を選択した状態で、画像(オブジェ)に変更(コマ撮りのワンシーンの動き)を加える。
  5. 必要に応じてステートを複製して画像(オブジェ)を動かすという作業を繰り返す。
  6. 一連の動き(コマ撮りシーン)ができたら、メニューの「ファイル」→「画像プレビュー」で表示される「オプション」タグにて、「形式」を「アニメーションGIF」に変更して、「アニメーション」タブで「ステートディレイ」及び「繰り返し回数」を調整する。
  7. 右下にある「書き出し」ボタンを押して書き出す(拡張子は“.gif")。
  8. 書き出したGifデータをブラウザドラッグ&ドロップすると、アニメーションが確認できる。

f:id:porco_webangya:20130713014308j:image:medium←クリックで拡大表示
f:id:porco_webangya:20130713014616j:image:medium←クリックで拡大表示

制作時の注意
  • メニューの「変更」→「変形」→「自由変形」で左右対称に変形する場合は、Shift+alt+マウス操作。
  • バナーを制作するときは、42kbyteあたりが上限と考えて制作する。
  • アニメーションは、上下方向の動きより左右方向の動きの方がデータが軽くなる。
  • グラデーション適用していた場合、書き出しのプレビューグラデーションが段状に見えていたら、“ディザ”にチェックを入れて100%にしてから書き出す(グラデーションがキレイになる)。

制作例

・女性シルエット
f:id:porco_webangya:20130713015321g:image:medium

・鍋でお料理
f:id:porco_webangya:20130713015507g:image