教程緣起與特色

作者臨摹一款計算器，發現流程相對簡單且極具代表性，特分享給大家。本教程最大亮點：全程使用「形狀工具」繪製矢量圖層，配合圖層樣式，實現非破壞性編輯——任意階段均可調整形狀、大小、樣式而不失真，極適合 UI 圖標設計工作流。

最終效果

詳細步驟

1. 背景與基調

新建文檔，放入木紋素材。新建圖層填充黑色徑向漸變，模式調整疊加於木紋之上，營造陰沉基調。

2. 機身主體：三層圓角矩形疊加

全用「圓角矩形工具」（形狀圖層）繪製，便於後期修改圓角半徑與尺寸。

• 底層：最大圓角矩形，套用「斜面與浮雕」、「描邊」、「內陰影」、「漸變疊加」、「投影」等完整樣式，建立機身厚度與材質（參考多張參數圖）。
• 中層：略短的圓角矩形蓋在底層上，樣式參數微調（參考圖）。
• 頂層：更小的長方形作為顯示屏區域，同樣套用樣式（參考多張參數圖）。

3. 關鍵細節：轉折處高光線

在機身轉折處畫一根灰色細線（形狀圖層或畫筆），瞬間提升立體轉折感。

4. 按鍵區製作

繪製按鍵基礎形狀（圓角矩形/圓形），套用統一樣式組（斜面浮雕、內陰影、漸變疊加等），參數詳見圖示。輸入數字字符。

4. 陰影系統：多層次真實投影

• 側向投影：複製最底層機身形狀，置於機身下方、木紋上方，填充深色，高斯模糊，變換透視。
• 向下投影：再複製底層形狀置最底（木紋之上），同樣模糊變換。

5. 桌面反光（鏡面效果）

複製木紋與紙片圖層 → Ctrl+T 垂直翻轉 → 對齊計算器底部 → 載入計算器輪廓選區 → 添加圖層蒙版 → 圖層模式調整（如「柔光」/「疊加」）→ 降低不透明度。瞬間獲得逼真倒影。

工作流優勢總結

• 全矢量形狀圖層：隨時可改圓角、尺寸、位置，零鋸齒
• 圖層樣式非破壞：參數即時可調，風格統一易管理
• 陰影/倒影分離圖層：真實度高且獨立可控
• 適合圖標/UI 組件標準化生產