為什麼選擇 3D 效果製作按鈕？

傳統繪製立體按鈕需手動繪製高光、陰影、倒角，耗時且難統一。Illustrator 3D > 擠出與斜角 效果能一鍵生成精準的光影、倒角與透視，且保持矢量可編輯性，修改顏色、尺寸、透視角度極為靈活，是 UI 設計師的效率利器。

最終效果預覽

制作步驟詳解

步驟 1：繪製基礎按鈕形狀

1. 選取圓角矩形工具，點擊畫板彈出對話框。
2. 設定：寬 200 px、高 50 px、圓角半徑 8 px（可依需求調整）。
3. 填充顏色設為淺灰色 (K=20%)，描邊無。

步驟 2：套用 3D 擠出與斜角

1. 選中矩形，執行 效果 > 3D > 擠出與斜角。
2. 在對話框中勾選預覽，觀察即時效果。
3. 關鍵設置：
   • 位置：等軸測法 - 上方（或手動調整 X/Y/Z 旋轉）。
   • 擠出深度：6 pt（原 4 pt 加厚，邊緣更圓潤）。
   • 斜角：選擇圓形，高度 6 pt，形成柔和倒角。
   • 表面：塑膠著色，光源拖至左上方，模擬左上光源。
4. 點擊更多選項，微調光源位置與強度，確保高光自然。

步驟 3：確認 3D 參數並擴展外觀

最終參數參考圖：X 軸旋轉 -18°，Y 軸 -26°，Z 軸 8°，擠出深度 6 pt，圓形斜角高度 6 pt。確認無誤後點擊確定。隨即執行 對象 > 擴展外觀，將 3D 效果轉為可編輯的矢量組群。

步驟 4：給按鈕上色與內發光

1. 用直接選取工具 (A) 選中內部的圓角矩形（按鈕正面）。
2. 填充線性漸變：角度 90°，從深色到淺色（如 #2C3E50 → #3498DB），營造凹陷感。
3. 在外觀面板雙擊「內容」進入隔離模式，添加效果 > 風格化 > 內發光：模式正常，顏色白色，不透明度 50%，模糊 3 px，邊緣。此舉強化邊緣高光。

步驟 5：疊加多層發光效果，豐富質感

在外觀面板中對現有填色點擊複製所選項目圖標，疊加三層漸變填色：

層級	漸變類型	角度	混合模式	不透明度	用途
第 1 層（基礎）	線性（深→淺）	90°	正常	100%	主體色調
第 2 層	黑白線性	50°	濾色	75%	左上高光增強
第 3 層	黑白線性	140°	濾色	75%-90%	右下反射光

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

1. 複製內部矩形，拖出按鈕群組，移除外觀屬性，僅保留黑色描邊 1 pt。
2. 對象 > 路徑 > 添加錨點 執行兩次，增加頂部邊緣錨點。
3. 用剪刀工具 (C) 點擊左右兩側新增錨點，刪除底部路徑，僅保留頂部弧線。
4. 製作藝術筆刷：繪製 100×3 px 橢圓，拖入筆刷面板選「藝術筆刷」，拉伸方法選「拉伸以適應」。
5. 將筆刷套用至頂部弧線，描邊粗細 2 pt，顏色白色，不透明度 60%。

步驟 7：製作底部陰影，增強著地感

1. 再次複製內部矩形，拖至群組最底層，填充黑色。
2. 複製該黑色矩形，填充紅色（區分用），向上移動 2 px（鍵盤增量設 1 px）。
3. 選中兩形狀，路徑查找器 > 減去頂層 > 展開，得到 2 px 高的薄長條。
4. 填充黑色，混合模式正片疊底，不透明度 20%。

步驟 8：添加頂部光澤帶

1. 用鋼筆工具 (P) 繪製一條貼合按鈕頂部曲率的路徑。
2. 複製內部矩形，移除外觀，添加黑色描邊，與路徑同選，路徑查找器 > 分割。
3. 取消群組，刪除下半部，保留上方光澤帶。
4. 填充黑→白線性漸變，角度 -90°，混合模式濾色，不透明度 30%。

步驟 9：排版文字與投影

• 主標題 "TRY NOW"：字體 Anja Eliane（或同風格襯線體），35 pt，擴展為輪廓，填充線性漸變 -45°，添加投影：X 偏移 1 px，Y 偏移 1 px，模糊 2 px，顏色深灰，不透明度 60%。
• 副標題 "30 DAY TRIAL"：Arial Bold，15 pt，擴展輪廓，填充白色，同樣添加投影但數值減半。

步驟 10：繪製箭頭裝飾

1. 開啟符號面板 > 符號庫 > 箭頭 > 箭頭 24，拖入畫板並斷開符號連結。
2. 取消群組兩次，套用效果 > 風格化 > 圓角 3 px。
3. 填充線性漸變（金屬感），描邊 0.5 px 深灰。
4. 添加投影效果，再擴展外觀。
5. 對象 > 變換 > 縮放 80% > 複製，獲得小一號箭頭，左右對稱排列。

步驟 11：按鈕底部柔和投影（混合法）

1. 橢圓工具繪製扁平橢圓，填充黑色，置於按鈕之後。
2. 複製橢圓，對象 > 路徑 > 偏移路徑 -7 px，得到內縮橢圓。
3. 外橢圓不透明度 0%，內橢圓保持 100%。
4. 兩者全選，對象 > 混合 > 混合選項 > 指定步數 25 步，再建立混合。
5. 混合群組不透明度 75%，混合模式正片疊底（如置於深色背景）。

實戰應用建議

• 建立圖形樣式：將完整按鈕外觀存為圖形樣式，一鍵套用至任意形狀。
• 狀態擴展：懸停、按下、禁用狀態只需調整漸變色相、擠出深度、高光強度。
• 響應式導出：配合 SVG 導出，CSS 控制 hover/active 狀態切換，極輕量。

結語

善用 Illustrator 3D 效果，不僅能高效產出質感按鈕，更能建立可複用的設計系統組件。掌握「擠出深度 + 斜角形狀 + 光源控制 + 多層外觀疊加」這套邏輯，你就擁有了隨心所欲塑造矢量立體介面的能力。立刻動手，為你的介面設計注入真實的觸感吧！