DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks MX利用噪點濾鏡制作金屬紋理
Fireworks MX利用噪點濾鏡制作金屬紋理
編輯:Fireworks基礎     
曾經在Playing with Fire網站見過這個金屬面版,詳見:http://www.playingwithfire.com/dazzle/buttons.Html
  但是那個金屬面版是制作好了的樣式,樣式下載包見此:http://www.playingwithfire.com/dazzle/styles.ZIP
  在FW內除了漸變方向之外其他都不能編輯。那麼這麼細膩的金屬面版紋理效果Fireworks本身能夠實現嗎?答案是肯定的。我們先看下這個效果圖:

  制作方法其實很簡單,新建畫布,畫個矩形。當然你愛什麼形狀都是可以的啦!再來設置填充漸變,本例用的分別是:#999999, #CCCCCC, #DBDBDB, #F8F8F8, #CCCCCC, #999999。

  接著是重頭戲了,調用Fireworks著名的外掛濾鏡Eye Candy 4000,使用HSB噪點濾鏡進行如下設置,預覽終究可以看到效果了。

  做好後再給矩形增加點效果,用內斜角體現矩形厚度,用銳利化加強金屬面版的粗糙感。

  打上粗體字,不要選圓角的字體,這樣會破壞金屬面版的硬度感。再用內陰影營造镂空的感覺。

  到此,效果已經完成了。真不好意思,又用了外掛濾鏡,沒辦法,FW本身提供的濾鏡實在有限。不過有朋友說我沒有Eye Candy 4000濾鏡怎麼辦?也不是沒可能實現效果的,我們可以用內填色模擬出來。
  第一層,模擬紋理:Satin緞帶漸變:#999999, #CCCCCC。

  原位克隆(Ctrl+Shift+D,菜單操作為Edit-->Clone)此層為第二層,內填色改為線性漸變:#999999, #FFFFFF, #CCCCCC。將層透明度改為80%,完成效果。

  最後附上源文件,兩種方法實現的效果都在裡面了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved