教學目標

運用圖層樣式與鋼筆工具，從零繪製擁有金屬邊框、玻璃面板、立體氣泡圖標的 iOS 風格短信 App 圖標。全向量可縮放，適合 UI 圖標設計練習。

效果展示

最終圖標

圖層結構邏輯

1. 背景底色：漸變疊加模擬金屬底座。
2. 外框圓角矩形：斜面與浮雕（外部凸起）+ 描邊（金屬邊框）+ 投影。
3. 玻璃面板：內發光（邊緣透光）+ 漸變疊加（玻璃高光掃過）+ 描邊（細邊）。
4. 對話氣泡：鋼筆繪製路徑，填充綠色，斜面與浮雕（內部平滑）+ 內陰影（凹陷感）+ 外發光（發光邊緣）。
5. 高光細節：橢圓選區白→透明漸變，模式「疊加」，模擬玻璃表面反射。
6. 文字/圖示：白色文字加外發光，或向量圖示套用相同玻璃樣式。

關鍵圖層樣式參數速查

元素	樣式	核心參數
外框	斜面與浮雕	外部凸起、深度 200%、大小 10px、光源角度 120°、高光模式「螢幕」不透明度 75%、陰影模式「正片疊底」不透明度 50%
外框	描邊	1px、位置內部、漸變填充（金屬漸變）
玻璃面板	內發光	螢幕模式、白色、不透明度 30%、大小 15px
玻璃面板	漸變疊加	線性、角度 -90°、白→透明→白，不透明度 40%
氣泡	斜面與浮雕	內部平滑、深度 100%、大小 5px
氣泡	內陰影	正常模式、深綠、距離 3px、大小 5px
氣泡	外發光	螢幕模式、淺綠、大小 8px

工作流建議

• 每個邏輯部件建立獨立群組（外框組、面板組、氣泡組），便於整體移動縮放。
• 將常用樣式存入「圖層樣式庫」，新建圖標時雙擊套用。
• 使用智能對象封裝整個圖標，雙擊進入編輯，外部保持非破壞縮放。
• 導出時：Ctrl+Alt+Shift+S 存儲為 Web 格式，輸出 1024×1024、512×512、120×120 等多尺寸 PNG。

舉一反三

同套「金屬框+玻璃面+內容凸起」邏輯，可快速產出：電話、郵件、相機、設定等全套系統圖標風格統一的 UI 圖標集。