|
案例欣賞
對于水晶按鈕的效果，大家應該見得很多了，我們使用Fireworks軟件可以制作各種各樣的立體水晶效果，但是不管什么樣的水晶立體效果，都有一個共同的特點，為了能夠實現按鈕的立體效果，我們可以通過漸變色和制作高光效果來實現。效果如圖1.1所示。
圖 1.1卡通表情圖標效果
思路分析
我們首先來看看按鈕的構成圖，如圖1.2所示：
圖 1.2按鈕構成圖
1、任何光滑的東西都會產生鏡面反射，水晶按鈕當然不會例外。
2、要讓按鈕浮出畫布，陰影是少不了的。有了正確的陰影，人們感覺才會更逼真。
3、這個水晶按鈕是有顏色的，但不是平板、呆板的顏色，而是一個從一個顏色過度到淺色的漸變色，為什么會這樣？因為它是透明的，光線從上到下投射下來的時候，由于下部的角度問題，產生的反射越來越多（這部分可參考物理學知識），所以下面的顏色會較淺。（注：我們假設光源在正上方）
4、按鈕是扁圓的，到了邊緣，這個曲度發(fā)生較大的變化（大家可以想象一下這里的橫截面），因此邊緣會變暗，于是會有這一點點的陰影。如圖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改變線性漸變色的方向
出處：藍色理想
責任編輯：moby
上一頁 下一頁 使用Fireworks制作水晶按鈕 [2]
◎進入論壇Photoshop、Fireworks版塊參加討論
|
第 1 頁 使用Fireworks制作水晶按鈕 [1]
第 2 頁 
