圖標雖小，卻是交互體驗的關鍵觸點。本教學以「下載資料夾」圖標為例，系統講解如何在 Photoshop 中運用鋼筆工具精確建模、圖層樣式賦質感、手繪反射與邊緣高光強化立體感、投影落地，最終產出可直接用於 UI 的高質感圖標。

文件設置與鋼筆建模基礎

新建 600×600 px、72 dpi、RGB 文件。鋼筆工具（P）依序繪製 5 個獨立形狀圖層：資料夾背板、資料夾前蓋、藍色條紋、文件頁、下載箭頭。每形狀獨立圖層並命名（Folder_Back, Folder_Front, Stripe, Paper, Arrow），便於後續樣式管理。

圖層樣式賦予材質

為每個形狀圖層添加定制樣式，核心邏輯：光源來自左上，高光在左上、陰影在右下。

• 資料夾前蓋：倒角與浮雕（內部倒角、大小 8px）、漸變疊加（線性、#4A90E2→#2E6BB8、不透明度 90%）、內陰影（距離 2px、大小 3px）、描邊（1px、深藍）。
• 文件頁：漸變疊加（白→淡灰、90% 不透明度）、內陰影、描邊（1px、淡灰）。
• 藍色條紋：漸變疊加（亮藍→深藍）、內發光（白、疊加）。
• 資料夾背板：漸變疊加（深灰→黑）、內陰影（增厚感）。
• 下載箭頭：色彩疊加（白）、倒角與浮雕（外部倒角、大小 5px）、投影（分離感）。

手繪反射與邊緣高光（關鍵提升質感步驟）

1. 主反射：新建組「Refs」。鋼筆繪製流線型反射路徑（右側彎曲帶）→ 右鍵「建立選區」→ 大柔邊筆刷（直徑 470px、硬度 0%）沿選區右半部繪白 → 圖層模式「疊加」、不透明度 63%。
2. 邊緣高光：新建組「Margins」。鋼筆沿折角、邊緣繪路徑 → 右鍵「描邊路徑」→ 筆刷 8px、硬度 0% → 模式「疊加」、不透明度 55%。

投影與文字

1. 接地投影：新建組「Shadow」。橢圓工具拉扁橢圓填黑 → 「濾鏡＞模糊＞動感模糊」（角度 0°、距離 30px）→ 不透明度 40%。
2. 文字標籤：字體 Agency FB、40pt、白色、不透明度 75%，置於資料夾前蓋下方。

補充反射與最終微調

• 為文件頁添加額外反射（同主反射法），增強紙張厚度感。
• 整體檢查：光源一致性、邊緣銳度、色彩飽和度、像素對齊。

延伸變體與輸出

同一結構替換顏色（綠/紅/橙）、圖示（上傳/刪除/設定）、尺寸（16/24/32/64/128 px），輸出 PNG/SVG 套件，構建完整圖標系統。

核心心法

「優秀圖標 = 精確幾何結構 + 真實材質邏輯 + 克制的裝飾細節」。鋼筆建模定骨架，圖層樣式賦肌理，手繪反射添神韻，三者缺一不可。