成品展示

一組擁有真實斜角倒角、金屬/塑膠材質、內發光高光、邊緣陰影、文字投影、箭頭裝飾、底部投影的專業級網頁按鈕，全流程非破壞可編輯，配色一鍵切換。

核心優勢：3D 效果替代手繪高光陰影

傳統做法需手繪高光、陰影、倒角，極難統一光源與透視。3D 擠出與斜角一步解決：幾何體積、斜角曲面、環境光源、材質著色自動計算，後續僅需在外觀面板疊加材質細節。

詳細製作流程

步驟 1：基礎按鈕形狀

圓角矩形工具，畫布單擊輸入：寬 200px、高 50px、圓角半徑 8px，填淺灰 #CCCCCC。

步驟 2：3D 擠出與斜角設定

1. 選取圓角矩形，效果 → 3D → 擠出與斜角。
2. 位置：等軸測左面；繞 X 軸旋轉 -18°（或自訂）。
3. 斜角：選圓角 (Round)，高度 6 pt（邊緣圓潤度）。
4. 更多選項：光源拖至左上方（模擬左上打光），環境光 30%，啟用陰影。

步驟 3：擴展外觀並為內部面填色

1. 選取 3D 物件，物件 → 擴展外觀，獲得可編輯群組。
2. 直接選取工具 (A) 選中內部頂面圓角矩形，填線性漸層 90°（上淺下深），外觀面板雙擊「內容」查看屬性。
3. 添加內發光效果：模式螢幕、顏色白、不透明度 50%、模糊 3pt、邊緣。

步驟 4：疊加多層發光材質（外觀面板核心技巧）

1. 外觀面板複製現有填色項 → 修改為黑白線性漸層 50°，混合模式螢幕、不透明度 75%。
2. 再複製一次 → 同漸層、角度 140°、不透明度 75-90%。
3. 三層填色疊加：基礎漸層建立體積、兩層螢幕漸層模擬多方向高光掃過。

步驟 5：藝術筆刷繪製邊緣高光線

1. 複製內部頂面矩形，拖出群組、移除外觀屬性，添加黑色描邊。
2. 物件 → 路徑 → 添加錨點 兩次，剪刀工具 (C) 切開底部兩點，刪除底部路徑段，保留頂部及側邊「ㄑ」形路徑。
3. 製作藝術筆刷：100×3px 橢圓 → 筆刷面板新建藝術筆刷（拉伸貼合、色相轉換）。
4. 將筆刷套用至「ㄑ」形路徑，描邊粗細 2pt，形成銳利邊緣高光線。

步驟 6：底部陰影線（減去頂層法）

1. 再複製內部頂面矩形拖出群組前，填黑色。
2. 複製該黑矩形，填紅色區分，向上移動 2px（鍵盤增量 1px）。
3. 選取紅+黑兩矩形，路徑查找器 → 減去頂層 → 擴展，獲得 2px 高薄黑條。
4. 混合模式正片疊底、不透明度 20%，形成細緻底部陰影線。

步驟 7：頂面高光面（分割路徑法）

1. 鋼筆繪製頂面中央曲線路徑。
2. 複製內部頂面矩形，加黑色描邊，與曲線同選 → 路徑查找器 → 分割。
3. 取消群組，刪除底部部分，保留頂部高光區。
4. 填黑白線性漸層 -90°，混合模式螢幕、不透明度 30%。

步驟 8：文字與箭頭裝飾

1. 文字工具輸入 "TRY NOW"（Anja Eliane 35pt），建立輪廓，填線性漸層 -45°，添加投影效果。
2. 文字 "30 DAY TRIAL"（Arial Bold 15pt），建立輪廓，填白色，添加投影。
3. 符號面板 → 箭頭類別 → 箭頭 24，拖出 → 斷開符號鏈接 → 取消群組兩次 → 圓角 3px → 線性漸層填色 + 0.5pt 描邊 → 投影效果。
4. 箭頭縮放 80% 複製、鏡像垂直/水平，四向排列對齊。

步驟 9：底部投影混合（軟陰影）

1. 橢圓工具繪製扁平黑色橢圓置於按鈕之後。
2. 物件 → 路徑 → 偏移路徑 -7px 獲得內縮小橢圓。
3. 外大橢圓不透明度 0%，內小保持 100%，兩者選取 → 物件 → 混合 → 混合選項 → 指定步數 25 → 建立混合。
4. 混合群組不透明度 75%，混合模式正片疊底（深色背景下可改疊加）。

多色系變化與設計系統化

將完整按鈕群組存為圖形樣式或動態符號。配合全域色板定義主色、輔助色、強調色，修改全域色板色值即可全套按鈕一鍵換膚，構建可維護的設計系統元件庫。