一個圖層、零像素繪製、純靠圖層樣式 (Layer Styles) 疊加 即可產出擁有立體倒角、金屬質感、發光邊緣、複雜紋理、幻彩漸變的精致圓形圖標。這不僅是技法展示，更是「非破壞、可無限編輯、極易複用」的圖標設計標準化工作流典範。

畫布與背景

• 新建 800×800 px、72 dpi、RGB。
• 背景：徑向漸變 #1A1A2E (中心) → #0D0D1A (邊緣) + 雜色 2% (疊加模式) → 深邃太空感。

單圖層圖標構建：橢圓形狀層 + 10 項圖層樣式

建立基礎形狀層

• 橢圓工具 (U) + Shift 拉正圓 → 形狀層、填充 0%、描邊無 → 命名「Icon Base」。
• 核心邏輯：填充 0% 使形狀本身透明，所有視覺特徵由圖層樣式產生，隨時可改形狀 (圓→方→星) 樣式自動適配。

圖層樣式堆疊參數總表 (自下而上生效順序)

樣式項目	關鍵參數	視覺貢獻
倒角與浮雕	內部倒角、平滑、深度 1000%、方向向上、大小 38 px、軟化 0、角度 120°、高度 30°、高光模式「螢幕」#FFFFFF 75%、陰影模式「正片疊底」#000000 75%、等高線：環形/倒V型	主體立體厚度、邊緣倒角、金屬反射邏輯
描邊	大小 3 px、位置「內部」、填充類型「漸變」、漸變：#003366→#0099FF→#00FFFF→#FFFFFF→#00FFFF→#0099FF→#003366 (多色環)、角度 90°	彩虹環狀邊框、科技感邊緣
內陰影	混合模式「正片疊底」、不透明度 50%、角度 90°、距離 5 px、阻塞 0%、大小 10 px、雜色 0%	內凹陰影、增強凹陷感
內發光	混合模式「螢幕」、不透明度 50%、雜色 0%、顏色 #00CCFF、技術「精確」、來源「邊緣」、阻塞 20%、大小 15 px	內邊緣發光暈染
光澤	混合模式「疊加」、不透明度 75%、角度 120°、距離 0%、大小 100 px、輪廓「倒V型」	大面積高光掃過、金屬質感
顏色疊加	混合模式「正常」、不透明度 20%、顏色 #001133	基底冷色調染色
漸變疊加	混合模式「柔光」、不透明度 40%、漸變：#000033→#003366→#0066CC→#00CCFF、徑向、角度 90°、縮放 120%	核心幻彩漸變、色相旋轉感
圖案疊加	圖案：自製「六角網格/電路板」圖案、縮放 50%、不透明度 15%、混合模式「疊加」	微觀科技紋理
外發光	混合模式「線性減淡」、不透明度 60%、雜色 0%、顏色 #00FFFF、技術「精確」、展開 0%、大小 25 px	外邊緣光暈、懸浮感
投影	混合模式「正片疊底」、不透明度 40%、角度 120°、距離 8 px、展開 0%、大小 20 px、雜色 0%、圖層蒙版隱藏上方投影	立體落地陰影

等高線預設修復

若等高線下拉選單缺少「環形/倒V型」，點擊齒輪圖示 → 「恢復預設等高線」即可載入完整預設庫。

非破壞編輯優勢實證

• 形狀變更：直接路徑選擇工具 (A) 拖動錨點、或屬性面板改「圓角矩形/多邊形/星形」，所有樣式即時重算適配。
• 參數微調：雙擊任一樣式項目即時預覽修改，無需重做。
• 樣式儲存/複用：右鍵圖層「複製圖層樣式」→ 貼上至其他形狀層，秒級統一風格系列圖標。
• 動作記錄：將「新建形狀層填充 0% → 套用此樣式組」記錄為動作，一鍵批量產出同風格圖標集。

結語

「單圖層、填充 0%、圖層樣式全權掌控」是現代 UI/圖標設計的工業化標準。本教學展示的 10 項樣式堆疊，涵蓋結構 (倒角)、邊框 (描邊漸變)、內部光影 (內陰影/內發光/光澤)、色調 (顏色/漸變疊加)、紋理 (圖案疊加)、外部光影 (外發光/投影)完整光學模型。掌握此法，你不再畫圖標，而是「參數化定義圖標」。立即建立你的「圖標樣式庫」，開啟高效、統一、可無限迭代的圖標設計新紀元！