DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks設計案例 >> Fireworks教程:精美橫向閃圖漂亮動畫
Fireworks教程:精美橫向閃圖漂亮動畫
編輯:Fireworks設計案例     

  漂亮的閃圖動畫應用范圍非常廣,不僅可以在相冊、動態表情裡使用,還可以在QQ空間、論壇簽名、各類回貼和博客中使用。

  學習要點:本例中我們主要學習Fireworks導入閃底素材、將閃底素材粘貼於圖像內部的制作方法。

  我們先來欣賞一下漂亮的閃圖。

Fireworks教程:精美橫向閃圖漂亮動畫    Fireworks教程:精美橫向閃圖漂亮動畫    
  Fireworks教程:精美橫向閃圖漂亮動畫Fireworks教程:精美橫向閃圖漂亮動畫
Fireworks教程:精美橫向閃圖漂亮動畫Fireworks教程:精美橫向閃圖漂亮動畫

 

  制作步驟:

  1.用Fireworks軟件打開一個漂亮的圖片,利用左邊“工具箱”中的Fireworks教程:精美橫向閃圖漂亮動畫“魔棒工具”點選白色背景處,使白色的背景被全選出來。

Fireworks教程:精美橫向閃圖漂亮動畫

  2.按下鍵盤上的Delete刪除鍵,刪除選區中的內容,使這個圖片背景擁有透明背景,按Ctrl+D取消選區。

Fireworks教程:精美橫向閃圖漂亮動畫

  3.接下來在“幀”面板中將第1幀拖到“新建/重制幀”按鈕上Fireworks教程:精美橫向閃圖漂亮動畫2次,如下圖所示,共制作成3幀。(一般是看閃底素材有多少幀,然後就復制幾幀)。

Fireworks教程:精美橫向閃圖漂亮動畫Fireworks教程:精美橫向閃圖漂亮動畫

  4.回到第1幀,再次利用“工具箱”中的Fireworks教程:精美橫向閃圖漂亮動畫“魔棒工具”點圖片中MM的頭發,選中大片的頭發黑色,然後選擇菜單中的“選擇”—“將選取框轉換為路徑”命令。

Fireworks教程:精美橫向閃圖漂亮動畫

    5.將頭發選區轉換為路徑,然後利用相同的方法,用魔棒將衣服和褲子都選中來轉化為路徑,如下圖所示:

Fireworks教程:精美橫向閃圖漂亮動畫 Fireworks教程:精美橫向閃圖漂亮動畫 

  6.單擊第1幀,然後選擇菜單中“文件”—“導入”(Ctrl+R),選擇導入幾張閃底素材圖,分別對應頭發/衣服/褲子的顏色。

Fireworks教程:精美橫向閃圖漂亮動畫

  7.我們先來制作頭發的閃動效果,分別單擊“背景圖層”上紅色和黑色閃底層前的Fireworks教程:精美橫向閃圖漂亮動畫,隱藏這二層。因為用來制作頭發的閃底是橫向的,不能完全覆蓋頭發,所以我們利用菜單“修改”—“變形”—“旋轉90度”將其旋轉覆蓋頭發。

Fireworks教程:精美橫向閃圖漂亮動畫

   8.選中用於制作頭發的閃圖對象,按下Ctrl+X剪切下來,點選頭發的路徑,選擇菜單中“編輯”—“粘貼於內部”(Ctrl+Shift+V)命令,將其動畫效果粘於頭發路徑中。

Fireworks教程:精美橫向閃圖漂亮動畫

   效果如下圖所示:

Fireworks教程:精美橫向閃圖漂亮動畫

   9.再利用剛才的方法分別將衣服路徑和褲子路徑都填充相應的閃圖,如下圖所示:

Fireworks教程:精美橫向閃圖漂亮動畫  Fireworks教程:精美橫向閃圖漂亮動畫

   (用這種導入閃底素材+粘貼於內部的制作方法,可以省去相當大的工作量,是一種別出心裁的方法喲!)

  10.圖是制作完成了,現在是最關鍵的保存工作,為什麼說保存工作比較重要呢?這是因為保存時會有些屬性需要選擇,如果直接保存有可能得不到gif背景透明的動態效果。保存的方法是選擇菜單中“文件”—“圖像預覽”命令,在“圖像預覽”窗口中選擇其“格式”為gif動畫,再設置調色板最下方的透明度為“Alpha透明度”,然後再點擊預覽圖標Fireworks教程:精美橫向閃圖漂亮動畫預覽看一下動畫效果,滿意後再單擊“導出”按鈕導出gif圖像。

點擊放大此圖片

  到此,閃圖就制作完成了,來看一下原圖和完成效果的對比吧!!

Fireworks教程:精美橫向閃圖漂亮動畫  Fireworks教程:精美橫向閃圖漂亮動畫

  最後送給大家一些閃底素材。

  閃底素材如下。朋友們單擊圖片另存即可:

 

Fireworks教程:精美橫向閃圖漂亮動畫


Fireworks教程:精美橫向閃圖漂亮動畫


Fireworks教程:精美橫向閃圖漂亮動畫

Fireworks教程:精美橫向閃圖漂亮動畫


Fireworks教程:精美橫向閃圖漂亮動畫

Fireworks教程:精美橫向閃圖漂亮動畫

Fireworks教程:精美橫向閃圖漂亮動畫

Fireworks教程:精美橫向閃圖漂亮動畫


Fireworks教程:精美橫向閃圖漂亮動畫


Fireworks教程:精美橫向閃圖漂亮動畫

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved