製作流程概覽

本教學將引導你利用 Fireworks 的矢量工具與濾鏡效果，從零開始繪製一個具備立體感、高光與投影的專業級按鈕。全程採用非破壞性編輯，方便後續調整顏色與尺寸。

步驟 1：繪製基礎形狀

選取「矢量工具」中的「圓角矩形工具」，按住 Shift 鍵拖曳繪製一個 90px × 40px 的正圓角矩形，作為按鈕主體。

步驟 2：套用橢圓漸變填充

在屬性面板將填充模式改為「橢圓形漸變」，調整漸變控制點位置，使亮部集中於左上角，模擬光源照射效果。

步驟 3：添加外部投影

開啟「濾鏤」面板，選擇「陰影與光暈」→「投影」，設定距離 3、不透明度 50%、柔化 4，角度 135°，瞬間賦予按鈕懸浮感。

步驟 4：建立高光面

再繪製一個 84px × 22px 的較小圓角矩形，使用「扭曲工具」微調頂部弧度，使其貼合主體曲面，形成頂部高光區塊。

步驟 5：設定高光透明度

將高光面填充改為白色橢圓漸變，並將圖層不透明度降至 50%，讓高光自然融入主體。

步驟 6：製作內凹邊緣

1. 繪製 90px × 37px 白色圓角矩形
2. 複製一份改為藍色，向下移動 1px
3. 選取兩者，執行「修改」→「組合路徑」→「打孔」
4. 套用條狀漸變，營造內凹立體邊框

步驟 7：疊加細微光澤

複製步驟 2 的橢圓漸變矩形置於最上層，不透明度設 30%，增強表面質感層次。

步驟 8：添加按鈕文字

使用文字工具輸入標籤，字體選「Abadi MT Condensed Light」，16pt 粗體，並加上外部投影（距離 1、不透明度 30%、角度 135°），確保文字清晰可讀。

成品展示

完成所有圖層疊加後，即可得到一顆具備完整視覺層次的立體按鈕，可直接匯出 PNG 或作為元件複用。

小技巧：將按鈕存為「元件」，即可在「文件庫」中重複使用，並透過「9 宮格縮放」保持圓角不變形。