運用圖層樣式非破壞編輯特性，結合漸變疊加、斜面浮雕、描邊、內陰影等效果組合，快速構建擁有立體質感、可無限縮放修改的網頁圖標/按鈕。教學展示圓形按鈕與星形徽章兩種形狀的完整製作流程，並揭示「複製圖層樣式」跨形狀復用的高效技巧。

最終效果

核心製作邏輯：圖層樣式疊加組合

所有立體效果均通過單一圖層的圖層樣式實現，無需多圖層疊加，優勢在於：

• 參數即時可調，所見即所得。
• 形狀可任意編輯（路徑/向量），不失真。
• 樣式可一鍵複製套用至任意其他形狀圖層。

案例一：圓形 3D 按鈕

步驟 1：基礎形狀

• 新建文件，橢圓形工具 (U) Shift 拉正圓，任意填充色（將被樣式覆蓋）。

步驟 2：主體立體樣式（關鍵步驟）

• 雙擊圖層開啟圖層樣式：
  1. 漸變疊加：藍色系（深藍→淺藍），樣式徑向，角度調整使高光位於球體頂部（視覺光源方向）。
     技巧：在圖層樣式對話框中選中「漸變疊加」項，直接在畫布上拖動漸變中心點定位高光位置。
  2. 斜面與浮雕：風格「內部斜面」、技法「平滑」、深度 100%+、方向「上」、大小匹配圓半徑、勾選「全域光光源」取消（獨立光源），高光/陰影模式/不透明度微調至自然金屬/塑膠質感。

步驟 3：內縮高光邊框（第二圖層）

• 複製圓形圖層 (Ctrl+J)，Ctrl+T 縮小至適當比例（如 85%），置中對齊。
• 清除所有樣式，僅添加：
  • 描邊：位置「內部」，填充類型「漸變」，漸變：白色 (100% 不透明度) → 透明 (0%)，角度 90°（頂部亮、底部透），大小 1-2px。

步驟 4：文字標籤

• 橫排文字工具輸入文字，置於最頂層。
• 文字圖層樣式：顏色疊加 白色 + 內部陰影（距離 1px、大小 0、不透明度 50% 黑色），形成凸起字體效果。

步驟 5：合併與命名

• 選中三圖層 Ctrl+E 合併，命名「Blue Circle」。

案例二：星形徽章 —— 樣式復用實戰

步驟 1：建立星形

• 多邊形工具 (U)，選項欄：邊數 5、星形勾選、縮進 50% 左右，繪製星形路徑/形狀圖層。
• 同樣複製一層縮小置中（內框）。

步驟 2：一鍵套用樣式

• 右鍵「Blue Circle」圖層 → 複製圖層樣式。
• 右鍵星形外框圖層 → 貼上圖層樣式。
• 同法貼上至內框圖層。

步驟 3：微調色相適配新形狀

• 雙擊星形外框圖層，修改漸變疊加色標顏色（如改為紅/金/綠系），其餘參數（斜面浮雕、描邊等）保持不變，瞬間獲得同質感新配色按鈕。

總結與延伸

• 樣式庫建立：將常用按鈕樣式存入「樣式」面板（面板選單 → 新建樣式），跨文件一鍵調用。
• 智慧物件封裝：將按鈕群組轉為智慧物件，實現「一次編輯，處處更新」的元件化工作流。
• 狀態變體：複製按鈕圖層組，修改漸變疊加顏色/不透明度、斜面浮雕深度，快速產出 Normal/Hover/Active/Disabled 四狀態組件庫。
• 向量優勢：所有形狀為向量路徑，無限縮放銳利，完美適配 Retina/高 DPI 輸出。

此「形狀圖層 + 完整圖層樣式 + 樣式復用」工作流，是專業 UI 設計師批量產出高質感圖標按鈕的標準化高效範式。