【使用Fireworks製作Apple果凍風格按鈕】

基本上，在台灣使用Fireworks 軟體的人並不多，但一旦體會過它與Dreamweaver 與Flash 之結合是如此地好用，再加上它的介面跟Photoshop, PhotoImpact等美工軟體並無大異，讓人很容易地愛上它，而且，它可是唯一在同一個軟體中就處理好網頁／動畫／影像，這可是其它軟體難以做到的呢！不多說了，本期小撇步就教您兩三下就做出專業水準的果凍風格按鈕，您就會知道這軟體有多好用啦！

 

第一步：

開啟一個 120 x 80，背景為白色的新文件， 利用矩形工具畫出一個 120 x80 的矩形當作背景，填色設定如下： (可任意設定背景樣式)

第二步：

利用圓角矩形工具畫出 100 x 60，點選黃色菱形鈕，可以調整圓角的角度。

第三步：

將填色類別改為線性，按一下填色的色塊，按下圖之設定值修改：

第四步：

新增效果：陰影和光暈 -> 內側陰影

第五步：

新增效果：陰影和光暈 -> 陰影

第六步：

點選 "按鈕" 圖層，按一下 CTRL + C 複製圖層，再按一下 CTRL + V 貼上圖層，並將複製的圖層名稱改為"亮部"。點選 "亮部" 的圖層，先將填色類別改為實心，顏色填入 #FFFFFF，取消內側陰影和陰影的效果，
按一下 CTRL + SHIFT + T ( 數值變形 )，設定值如下：

　



第七步：

點選工具列中的選取細部工具，按下 CTRL + SHIFT + G 解散群組，然後將矩形下面的 4 個節點選取

第八步：

再來利用鍵盤上方向鍵的 "↑"，調整成如下圖的樣子：

第九步：

再來將填色類別改為線性，按一下填色的色塊，按下圖之設定值修改

第十步：

完成後看起來應該是像這樣：



第十一步：

利用文字工具輸入文字，可將文字圖層移到 "亮部" 和 "Button" 圖層之間




第十二步：

輸入文字後，可加入陰影效果加強文字的立體感


第十三步：

輸入文字後，可加入陰影效果加強文字的立體感


第十四步：

調整Button圖層中，圓角矩型的漸層顏色，就變成是：

內容來源：翻譯至http://www.solardreamstudios.com/tutorials/fw/mx_aqua/



財團法人中華民國電腦技能基金會
 TEL：02-2577-8806•FAX：02-2577-8135
服務信箱：[email protected]