三角形作為最基礎的幾何元素，通過高光與陰影的精密控制，能轉化為極具視覺張力的立體圖標。本教程將詳細拆解一枚高光立體三角形圖標的創作全過程，重點講解鋼筆工具精確建模、圖層樣式組合策略、以及高光層級構建的專業技法。

最終效果預覽

完成圖呈現一枚懸浮於畫面之上的三棱錐體，邊緣鋒利、高光銳利、投影真實，適合作為 App 圖標、標識系統核心元素或插畫視覷焦點：

畫布與基礎設定

• 文檔：1280×1024 px，72 dpi，RGB，白色背景
• 參考網格：視圖 → 顯示 → 網格，網格線間距 64 px，細分 4
• 吸管取色備用：主色 #2C3E50（深藍灰）、高光色 #ECF0F1、陰影色 #1A252F

分步制作指南

步驟 1：建立底部陰影基座

1. 新建圖層「Base_Shadow」，填充純黑 #000000
2. 添加圖層樣式 → 斜面浮雕：風格「外部斜面」，技巧「鑿刻清晰」，深度 100%，方向「向上」，大小 16 px，柔化 3 px，角度 120°，高度 30°，光暈模式「線性減淡」#FFFFFF 0%，陰影模式「線性加深」#000000 60%
3. 效果：獲得一個帶有柔和倒角邊緣的深色基座，為後續主體提供著地感

步驟 2：繪製主體正面面

1. 新建圖層「Face_Front」，鋼筆工具（形狀模式）點擊繪製等腰三角形：底邊寬 400 px，高 346 px（邊長 400 px），頂點向上
2. 填充 #2C3E50，無描邊
3. 複製圖層 → 命名「Face_Front_Highlight」，填充改為 #ECF0F1
4. 選中「Face_Front_Highlight」，Ctrl+T 向左上移動 3 px（鍵盤方向鍵 ← ↑ 各 3 次）
5. 為「Face_Front_Highlight」添加圖層樣式 → 斜面浮雕：風格「內部斜面」，大小 8 px，柔化 2 px，深度 150%，高光「線性減淡」80%，陰影「線性加深」40%

步驟 3：構建側面——左側面

1. 新建圖層「Face_Left」，鋼筆工具繪製左側面四邊形（頂點與主體頂點共用，底邊向左下延伸 60 px）
2. Ctrl+T 微調透視，使側面符合三棱錐幾何
3. 添加圖層樣式 → 漸變疊加：線性漸變，角度 -60°，從 #34495E（亮面）到 #1A252F（陰面），混合模式「正常」，不透明度 100%

步驟 4：構建側面——右側面（高光面）

1. 新建圖層「Face_Right」，鋼筆繪製右側面，或複製「Face_Left」水平翻轉修改節點
2. 填充 #2C3E50
3. 新建圖層「Face_Right_Highlight」，Ctrl+點擊「Face_Right」縮略圖載入選區 → 填充白 #FFFFFF
4. 橢圓選框工具繪製橢圓選區覆蓋上半部 → Shift+Ctrl+I 反選 → Delete 刪除下半部，保留頂部高光帶
5. 圖層不透明度設為 20%，混合模式「疊加」

步驟 5：底部邊緣倒角與倒影

1. 新建圖層「Bottom_Bevel」，鋼筆繪製底部倒角三角帶（高度 12 px）
2. 填充 #1A252F，複製一層「Bottom_Bevel_Highlight」向右下移動 8 px，填充白
3. 為「Bottom_Bevel_Highlight」添加圖層樣式 → 斜面浮雕：內部斜面，大小 6 px，高光「線性減淡」60%

步驟 6：整體投影與最終融合

1. 選中步驟 1 建立的「Base_Shadow」圖層
2. 添加/調整 投影：混合模式「正片疊底」，#000000 40%，角度 120°，距離 12 px，展開 0%，大小 16 px，噪點 3%
3. 微調各面圖層不透明度與蒙版，確保邊緣銳利無虛邊（放大 400% 檢查像素對齊）
4. 可選：頂層添加 濾鏡 → 銳化 → 智慧銳化（數量 50%，半徑 0.5 px）提升銳度

核心技法總結：高光層級體系

層級	用途	關鍵參數	混合模式
環境光	大面照明基調	漸變疊加、柔光、15-25% 不透明度	疊加/柔光
面高光	定義平面朝向	斜面浮雕內部/外部、大小 3-8 px	正常/線性減淡
邊緣高光	強化棱角銳度	1-2 px 手繪/描邊、線性減淡 60-80%	線性減淡/螢幕
鏡面高光	表現材質光滑度	小範圍高對比白點、外發光/顏色減淡	顏色減淡/線性減淡

常見錯誤與修正

• ❌ 三角形邊長不等導致幾何失真 → ✅ 使用 Shift 约束或數值輸入精確繪製
• ❌ 高光方向混亂破壞立體感 → ✅ 確立單一光源（建議左上 120°/30°），全圖統一
• ❌ 邊緣虛化模糊 → ✅ 開啟「對齊像素」，關鍵邊緣用矢量形狀而非筆刷繪製
• ❌ 投影過重壓抑主體 → ✅ 投影不透明度 ≤ 40%，大小 ≤ 主體高度 1/10

擴展應用與變體設計

• 多面體系列：複製圖層組，修改鋼筆路徑節點快速生成四棱錐、六棱柱等變體
• 材質替換：將漸變疊加替換為金屬/玻璃/磨砂塑膠樣式，快速切換質感
• 動態化預留：將各面圖層轉為智能對象，配合 After Effects 實現 3D 旋轉動畫
• 圖標系統化：建立統一規格（畫布、光源、圓角、描邊寬度），批量產出幾何圖標族

練習建議：完成基礎版後，嘗試「倒置三角形」「截頭三角形」「雙色拼接三角形」等變體；收集 10+ 款優秀幾何圖標（如 Google Material Icons、Apple SF Symbols）分析其高光邏輯；嘗試用純 CSS 還原此效果，加深對光影參數的理解。