DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks設計案例 >> 用Fireworks制作漂亮按扭
用Fireworks制作漂亮按扭
編輯:Fireworks設計案例     
用Fireworks制作漂亮按扭

  如左圖所示,在經典論壇看到這款按鈕,覺得極為漂亮,忍不住動手試了試,覺得制作難度不算太高,所以在此做篇教程,有興趣的朋友可以看看…… :)

  制作步驟:

  一、打開fireworks,新建一圖,背景為白色。按住shift畫一個圓,顏色為藍色。RGB值分別為51,153,255。

  在effect面板中,選擇shadow and glow->drop shadow增加陰影,其中distance(距離)為8,opacity(透明度)為60%,softness(柔和)為20。柔和度設置得大點,挺重要。

  二、把上面這個圓進行復制,(點住圓,按住alt鍵,拖到空白處即可。)去掉陰影。RGB值改

  為:51,51,204。再作同樣方法復制一個圓,顏色為白色。用變形工具,把白色的圓稍稍拉小一點。放上藍球的上面。如左圖所示位置。把二個圓一起選中,菜單modify->combine->punch.就出來一個月牙形的形狀 :)。接著對這個月牙形進行設置。fill面板中edge->feather:19;object面板中:stroke選擇路徑的外部,混合模式選darken。第一個深顏色的月牙形就OK了。

  三、把上面所做的月牙形進行復制,填充顏色的RGB改為:102,255,255。其objet面板的選項分別是:透明度為84,混合模式為lighten,stroke選擇路徑中央。fill面板中:feather為18。此時月牙形為透明,按CTRL+G ,就能看到原來的顏色了。

  四、再接著做二個相同的月牙形,顏色為白色。其中object面板同綠色的那個月牙形,fill面板一個feather為30,另一個為17。

  五、再做二個小的月牙形,用上面的方法,顏色為白色,圓的半徑大至為52px。object面板中模式模式為正常,stroke選擇路徑中央,透明度為100。fill面板中其中一個feather為2,另一個為8。

  六、至此,做這個按扭所有的零件全部完成,所剩下的就是拼起來了。大家自己看吧。我簡單地派個流水帳:

  從最底層開始:有陰影的圓形->深藍色的月牙形->淺綠色的月牙形-> feather為30的白色月牙形->feather為17的月牙形->再是兩個小的月牙形,如果大家位置排得正確的話,這個按鈕就已經成功地做出來。

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