早期 Windows Media Player、MSN Messenger、QQ 瀏覽器等軟體常採用獨特的「啞鈴形」導航按鈕（兩側圓形中間收窄）。本教學將示範如何在 Fireworks MX 2004 中利用基本形狀工具、路徑布林運算與即時濾鏡，快速繪製出極具質感的啞鈴按鈕。

最終效果

製作步驟

1. 繪製啞鈴基礎輪廓

• 新建 300px 白色畫布。按住 Shift 繪製正圓，複製並縮小，靠齊放置形成啞鈴雙球雛形（可開啟標尺 Ctrl+Alt+R 拖出輔助線對齊）。
• 選中兩圓，執行 修改 > 組合路徑 > 聯合，合併為單一路徑。

2. 修飾連接處過渡

使用「部分選取工具」（白箭頭）調整雙圓交界處的錨點與控制桿，使過渡曲線平滑自然。

3. 切割取上半部

選取「刀子工具」，沿水平輔助線切開路徑，刪除下半部（因未修飾下半部錨點）。

4. 鏡像完成閉合形狀

複製上半部，垂直翻轉，對齊輔助線，再次執行「聯合」合併，得到完整啞鈴閉合路徑。

5. 套用質感填充與濾鏡

• 填充： 線性漸變（上 #CBDCED → 下 #FFFFFF）。
• 內側陰影： 距離 4、不透明度 65%、柔化 3、角度 315°、顏色 #4775A3。

6. 繪製前後導航圓鈕

• 繪製正圓，放射漸變填充（同按鈕主色），邊框深藍。
• 雙重「投影」濾鏡製造凸起感：
  ① 距離 2、不透明度 100%、柔化 1、角度 135°、白色（高光）
  ② 距離 2、不透明度 100%、柔化 1、角度 315°、黑色（陰影）
• 繪製箭頭形狀，套用內側陰影與投影，複製翻轉縮小做另一側。

7. 整體融合背景

為啞鈴按鈕群組添加雙層投影（白色高光邊 + 藍色陰影邊），使其與背景完美融合。

源文件下載

色彩參數僅供參考，實際專案請依設計規範調整。此教學完整展示了從基礎路徑構建到濾鏡質感營造的完整 UI 圖標工作流。