DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks制作光澤按鈕一例
Fireworks制作光澤按鈕一例
編輯:Fireworks基礎     
第一步,建立新文件,利用“圓角矩形工具”畫出一個四個角有一定弧度的矩形,大小即為你想做的按鈕的大小,其填充采用單色填充,選擇你想要得按鈕顏色。


      第二步,將該矩形復制一個,新復制的矩形將成為我們所看到的光澤部分,首先,將其填充改為線性填充,顏色取白色到白色漸變,不錯,您沒有看錯,是白色到白色漸變,因為我們需要的效果並不在顏色上體現,而是在透明度上體現,那麼下一步我們在線性填充屬性框中顏色設置中色塊而上面的黑色的小三角即為設置透明度的,其中的一個取默認值100%,而另一個取0%,我們看到的矩形就成為一個透明漸變的色塊兒。

      第三步,將顏色填充的方向從默認的左右漸變改為上下漸變,方法是當鼠標為選取工具是,色塊兒上有一個橫向的輔助線,用於表示其漸變的方向,把它改成一條豎線就可以了。注意豎線一定要直,否則你的效果一定要大打折扣。

      第四步,修改白色漸變矩形的大小,原則是與原來的單色矩形相比,寬度比原來略小,左右只露出一條線即可;高度取原來的一半兒,將其放在單色矩形上面頂端也留出一條線的距離,這樣看到的效果最佳。


      以上就是這個簡單的光澤按鈕的做法,如果還想加個陰影,在單色矩形上加或者另復制圖層做高斯模糊後置於底層做陰影都可。不過筆者認為取後一種方法比較好,並非不信任Firewroks模糊功能,只是這樣一來對效果的表達更有發揮的余地。個中奧妙大家慢慢體會吧
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved