Fireworks製作GIF動畫廣告BANNER,平面廣告設計作品

設計欣賞 當前位置:設計首頁 >> 教程 >> Fireworks >> 正文 >> Fireworks製作GIF動畫廣告BANNER
Fireworks製作GIF動畫廣告BANNER

文字特效

  文/詹巍

    本小節中我們看看怎樣使用Fireworks MX 2004設計一張GIF動畫Banner,以一個宣傳天柱山的Banner為例,主要熟悉Fireworks中幀面板、動畫、元件等工具的使用方法。文章末尾提供.jpg文件供大家下載參考。

  完成效果如圖: 




  (1) 新建一個大小為468×60的文件,設置其畫布顏色為透明,並導入一幅汽車的位圖圖像,得到圖1所示的圖像。




圖1 新建文件並導入圖像


  

  (2) 選中這幅汽車圖像,單擊【修改】菜單,選擇【元件】|【轉換為元件】,這時候會跳出元件屬性對話框,將這個圖形文件命名為"汽車圖 1",如圖2所示。


圖2 將圖像轉換為圖形元件


  (3) 單擊【確定】,這時候位圖圖像就已經轉換為了圖形元件了,如圖3所示。選中這個圖形元件,單擊【修改】菜單,選擇【動畫】|【選擇動畫】,跳出動畫對話框,在其中設置幀數為10,移 動到380,如圖4所示。


圖3 位圖轉換為圖形元件

 圖4 設置動畫屬性
 

 圖5 彈出對話框

  (4) 單擊【確定】,這時候跳出圖5所示的對話框,詢問是否添加新幀,選擇【確定】,這時候在幀面板中就已經添加了新幀,得到圖6所示的動畫元件圖像。


圖6 動畫元件圖像

  (5) 默認的幀延時的時間太短,可以將前面9幀幀延時設為10,第10幀的幀延時設為35來控制汽車運動的效果。為了將第10幀的圖像始終能夠顯示在這個GIF動畫上,所以有必要將第10幀的圖像效果複製到後面的所有幀中去。設計這幅動畫共有30幀,所以後面的20幀中都需要有這個第10幀中的汽車圖像。這裡要調用庫中的圖形元件來實現所有幀中都有第一幅汽車圖的效果。打開幀面板,新建一幀,設置其幀延時為10。單擊幀面板的洋蔥皮工具,在彈出菜單中選擇【之前和之後】,這樣在編輯第11幀時就能夠看到第10幀的汽車圖像了。單擊【窗口】,選擇【庫】,打開了庫面板。發現庫面板中有一個動畫元件和開始保存的名為"汽車圖形 1"的圖形元件,如圖7所示。


圖7 庫面板
  (6) 從庫面板中拖動圖形元件到畫布之中,使其和第10幀的汽車圖形完全對齊。得到第11幀的圖像,如圖8所示。



  (7) 選中第11幀,在幀面板中單擊 按鈕,在彈出菜單中選擇【重制幀】,在彈出對話框中設置幀的數量為9,如圖9所示。


圖9 複製第11幀

  (8) 選中第11幀,導入另外一幅汽車圖像,如圖10所示。


圖10 導入另外一幅汽車圖像

  (9) 同樣單擊【修改】菜單,選擇【元件】|【轉換為元件】,在元件屬性對話框,將這個圖形文件命名為"汽車圖 2",如圖11所示。


圖11 將圖像轉換為圖形元件
  (10)單擊【確定】,這時候位圖圖像就已經轉換為了圖形元件了。選中這個圖形元件,單擊【修改】菜單,選擇【動畫】|【選擇動畫】,跳出動畫對話框,在其中設置幀數為10,移 動到290,得到圖13所示的圖像。


圖12 第二個動畫元件

  (11)設置第20幀的圖像幀延時為35,11幀到19幀幀延時為10。然後新建一幀並設置幀延時為10,從庫面板中拖動"汽車圖1"和"汽車圖2"到畫布之上,使其和第20幀中圖像完全對齊,如圖14所示。


圖13 第21幀圖像

  (12)選擇第21幀,和第7步一樣,將其重制9次。在21幀中導入第三幅汽車圖,只將車的前半部分放在畫布之中,好像車子是逐漸開進來的一樣。接下來和前面一樣,將它轉化為圖形元件,並設置動畫效果,設置其幀數為10,移 動為100即可,如圖15所示。


圖14 導入第三幅汽車圖並設置動畫

  (13)將"汽車圖 3"元件拖到第30幀中並與動畫元件對齊。接著為圖像添加兩個小圓形和一個圓角矩形,並在矩形中添加"我也要去天柱山"幾個字來增強效果,如圖16所示。


圖15 第30幀圖像

  (14)將第30幀幀延時設為200即可,讓它的顯示時間長一些。最後保存這個文件並將其導出為一個GIF文件,這樣在個人網頁中就可以使用這個GIF圖片了。 .jpg文件下載

設計

相關鏈接:平面廣告設計作品,廣告設計圖庫
Google
最 新 文 章
相 關 文 章
Michael 滑板圖案設計
靳埭強設計作品—中國銀
bekker廣告設計精選
靳埭強設計作品—Pacifi
倫敦國際書展—台灣出版
Jason Levesque 滑板圖案
HORNALL ANDERSON 設計作
美國VMP市場咨詢設計公司
朗意品牌顧問
設計·生活·創業---山東
''東方之星''大學生設計
台灣頑石設計公司書籍設
網站精彩作品圖片 levitat
站設計作品圖片 levitated
網站設計流行風格模板評析
網站設計流行風格模板評析
網站設計精彩作品圖片 Gra
系列精品網站鑒賞
2004年知名網站聖誕logo圖
優秀商業網頁圖片
世界優秀設計作品之網站設
經典商業網頁圖片
Fireworks製作GIF動畫廣告BANNER相關設計:您現在欣賞的是由artbei.com設計欣賞站為您提供的《Fireworks製作GIF動畫廣告BANNER》,謝謝您!設計師學習設計的技巧和捷徑是多看大師的作品,Fireworks製作GIF動畫廣告BANNER等設計資源欣賞,下載,圖庫,為平面廣告設計作品,設計出美觀悅目的界面,給瀏覽者以強烈的視覺衝擊力和吸引力。未來的平面設計師在須掌握日新月異的電腦硬件和軟件,才能不斷地邁向成功.我們為您提供豐富的平面設計,網站設計,廣告設計,畫冊設計,包裝設計,標誌設計,海報設計,封面設計vi設計,平面廣告設計作品,廣告設計圖庫,平面廣告設計作品等設計類欣賞,教程和學習文章.歡迎收藏本網站,並記住我們的域名:www.artbei.com,點擊此處返回設計網站首頁!
推 薦 新 聞-+平面廣告設計作品,設計欣賞,教程,技巧,ps+-
2006 第六屆上海雙年展-超設 栩栩如生的人體蠟像 國際名師的極端設計 日本漫畫家手塚治蟲作品圖片
達芬奇設計成就展--領略藝術 岡特·蘭堡作品賞析 國人創意最NB 聯想壁紙設計大 外國另類創意幽默創意圖
一組另類鬼異的視覺設計圖片 建國以來振奮人心的宣傳畫大 建國以來振奮人心的宣傳畫大 建國以來振奮人心的宣傳畫大
|畫冊設計|樣本設計|廣告設計|DM設計|展示設計|專賣店設計|標誌設計|VI設計|海報設計|LOGO設計|信封設計|設計論壇|

2007 設計圖片與設計課程