使用Fireworks製作水晶按鈕

來源:互聯網
上載者:User
按鈕

案例欣賞
對於水晶按鈕的效果,大家應該見得很多了,我們使用Fireworks軟體可以製作各種各樣的立體水晶效果,但是不管什麼樣的水晶立體效果,都有一個共同的特點,為了能夠實現按鈕的立體效果,我們可以通過漸層色和製作高光效果來實現。效果如圖1.1所示。


圖 1.1卡通表情表徵圖效果

思路分析
我們首先來看看按鈕的構成圖,如圖1.2所示:


圖 1.2按鈕構成圖

1、任何光滑的東西都會產生鏡面反射,水晶按鈕當然不會例外。
2、要讓按鈕浮出畫布,陰影是少不了的。有了正確的陰影,人們感覺才會更逼真。
3、這個水晶按鈕是有顏色的,但不是平板、呆板的顏色,而是一個從一個顏色過度到淺色的漸層色,為什麼會這樣?因為它是透明的,光線從上到下投射下來的時候,由於下部的角度問題,產生的反射越來越多(這部分可參考物理學知識),所以下面的顏色會較淺。(註:我們假設光源在正上方)
4、按鈕是扁圓的,到了邊緣,這個曲度發生較大的變化(大家可以想象一下這裡的橫截面),因此邊緣會變暗,於是會有這一點點的陰影。如圖1.3所示


圖 1.3按鈕橫截面光線圖

實現步驟
1、建立一個Fireworks檔案。
2、在彈出的【建立文檔】對話方塊中設定畫布的寬度和高度為300像素,背景顏色為白色。如圖1.4所示。


圖 1.4建立文檔對話方塊

3、選擇工具箱中的矩形工具,在畫布中繪製一個和畫布一樣大小的矩形。
4、給這個矩形添加一個深灰到淺灰色的漸層色,作為畫布的背景。效果如圖1.5所示。


圖 1.5製作畫布背景

5、選擇工具箱中的橢圓工具,在舞台中繪製一個100X100像素的正圓。
6、給這個正圓填充深灰色,在屬性面板中設定填充的邊緣效果為“羽化”,值為“15”。效果如圖1.6所示。


圖 1.6從尺規中拖拽垂直引導線

說明:這裡,最下方的正圓是用來實現按鈕的陰影製作效果。
7、複製這個正圓,在屬性面板中設定填充的邊緣效果為“消除鋸齒”,並且填充放射狀漸層色,中間為淺灰色,外部為深灰色,而且淺灰色的範圍要適當大一些。效果如圖1.7所示。


圖 1.7設定第二個正圓的屬性

提示:第二個正圓的作用是用來實現按鈕的邊緣效果。
8、複製第二個正圓,選擇【修改】@@【變形】@@【數值變形】(快速鍵:【Ctrl+Shift+T】)命令。把這個正圓縮小到原來的80%。
9、給第三個正圓填充線性漸層色。選擇【修改】@@【變形】@@【旋轉90°順時針】命令。把這個正圓上的水平漸層色旋轉為垂直漸層色。效果如圖1.8所示。


圖 1.8改變線性漸層色的方向

10、在屬性面板中設定第三個正圓的填充邊緣效果為“羽化”,值為“15”。效果如圖1.9所示。


圖 1.9設定第填充邊緣效果為“羽化”

提示:第三個正圓的作用是用來實現按鈕整體的色彩坡形效果。
11、最後來繪製按鈕的高光,選擇工具箱中的“橢圓”工具,在畫布中繪製一個橢圓。效果如圖1.10所示。


圖 1.10繪製按鈕的高光效果

12、給這個橢圓填充線性漸層。同樣要把漸層色的方向調整為垂直。如圖1.11所示。


圖 1.11填充線性漸層色

13、調整橢圓的漸層色,兩端都為白色。然後把一邊漸層色的透明度調整為0。效果如圖1.12所示。


圖 1.12調整橢圓的線性漸層色

14、調整後的效果如圖1.13所示。


圖 1.13製作高光效果

提示:高光的漸層色是白色過度到透明,上方為白色,底端為透明。
15、然後可以在按鈕上繪製一些圖形做修飾,效果如圖1.14所示。


圖 1.14按鈕完成效果

16、那麼如何製作多彩的按鈕呢?是不是不同的顏色就必須重新製作一遍呢?其實我們使用Fireworks中的濾鏡就可以輕鬆解決這個問題。
17、把整個按鈕組合起來,複製多個。選擇其中的一個按鈕,在屬性面板中點擊濾鏡面板中的“+”號,選擇【調整顏色】@@【色相/飽和度/亮度】命令。效果如圖1.15所示。


圖 1.15“色相/飽和度/亮度”濾鏡設定

18、在彈出的“色相/飽和度/亮度”濾鏡設定視窗中,選中“彩色化”複選框,然後適當增加“飽和度”,改變“色相”的值,就可以得到不同的彩色按鈕了。效果如圖1.1所示。

操作技巧
1、繪製正圓的時候可以按住【Shift】鍵,或者直接在屬性面板中更改選擇對象的尺寸。
2、所有的線性漸層色預設都是水平方向的,可以使用【修改】@@【變形】@@【旋轉90°順時針】命令調整為垂直方向的。
3、需要改變對象的顏色,可以使用“色相/飽和度/亮度”濾鏡命令快速完成。



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。