DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks打造熱力四射手機廣告
Fireworks打造熱力四射手機廣告
編輯:Fireworks基礎     

現在先看看完成後的作品:

Fireworks打造熱力四射手機廣告

  下面是制作過程:

  1、首先建立600x600像素的畫布,各位也可以設置其他適合的尺寸。設置底色黑色。在畫面中間畫一個300x200像素的矩形,並在屬性面板設置Feather羽化值為100。

Fireworks打造熱力四射手機廣告

圖1

  2、設置填充,點擊GradIEnt/漸變-->Folds/折疊漸變,漸變色由紅到白。點擊圖形上的漸變控點拉成水平狀,整個圖案現在看起來類似一張羽化過的條形碼。

Fireworks打造熱力四射手機廣告

圖2

  3、現在把漸變色改為由黑到白,並轉為點陣圖。

Fireworks打造熱力四射手機廣告

圖3

  4、直接在點陣圖上右鍵調出彈出菜單,選擇Transform/變形-->Skew/斜切,選中底邊的控點向外拉伸到近屏幕邊緣。現在你有個很大的梯形已經遠遠超出畫布范圍,橫跨屏幕。不必擔心,直接到屬性面板把圖形寬度改成60像素,再把它拖到畫布中間來,這就是我們要的第一束光的原型。

Fireworks打造熱力四射手機廣告

圖4

  5、點擊Edit/編輯-->Clone/克隆或快捷鍵Ctrl+Shift+D原位克隆一份,右鍵選擇Transform/變形-->Rotate 180°/旋轉180度。把兩束光沿相反方向擺成一線,對齊。點擊Modify/修改-->Symbol/元件-->Convert to Symbol.../轉化成元件,或快捷鍵F8直接將這兩個組合圖建立成圖形元件。

Fireworks打造熱力四射手機廣告

圖5

  6、Ctrl+Shift+D原位克隆這份元件,並在克隆出來的元件上點擊右鍵,選擇Transform/變形-->Rotate 180°/旋轉180度。目前雖然看不出有什麼明顯變化,這是為下一步的旋轉補間作准備。選中這兩個元件,點擊Modify/修改-->Symbol/元件-->Tween Instances.../補間實例,在彈出的窗口設置步數值21,並取消勾選Distribute to frames/分散到幀。實現的效果就如同這個蒲公英的樣子。如果你的電腦配置低些,完成這一步會多需要幾秒鐘時間。

Fireworks打造熱力四射手機廣告

圖6

  7、因為這個旋轉補間的最上層是重合的,所以可以把最上層的元件刪除。點擊Select/選擇-->Select All/全選,或者直接快捷鍵Ctrl+A,把所有補間的元件都選起來。點擊Modify/修改-->Symbol/元件-->Break Apart/打散,或者使用快捷鍵Ctrl+Shift+B。把蒲公英變成每一分支都可以單獨移動的點陣圖。

Fireworks打造熱力四射手機廣告

圖7

  8、因為這朵蒲公英的形狀太圓了,要做成所需要的爆炸樣式還需要個別調整每個分支的位置。這是個需要點耐心,憑感覺的活。調整的宗旨是讓發散的光束有參差不齊的層次。總之沿著每個光束的方向向內或向外移動。注意光束的指向始終對准蒲公英的中心。

Fireworks打造熱力四射手機廣告

圖8

  9、幾分鐘後,整個迸發的光球打底已經完成。確定不需要再修改後,把分散在各層的點陣圖再Ctrl+G/群組起來。然後我們把這一組在層面板上點掉眼睛圖示,將這層隱藏起來。接下來開始為光球賦予五彩光環。在畫布上畫出與畫布同等大小的方形,填充漸變方式為Cone錐形,點擊色彩圖示,調出填充漸變色面板。在預設選項下,色彩選擇Spectrum/光譜。

Fireworks打造熱力四射手機廣告

圖9

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