相機圖標是 UI 設計經典練習題，考驗圓角矩形透視、鏡頭組結構、材質分區渲染能力。本教程採用「矢量形狀建模 + 圖層樣式疊加 + 手繪高光細節」混合工作流，在保持可編輯性的前提下實現高質感輸出。

最終效果

分層建模邏輯

1. 機身基礎：圓角矩形工具 512×512px、圓角 90px → 深灰填充。
   
2. 機身配色條：新建圖層矩形選區填紅/黃/藍三色條 → 合併 → Ctrl+Alt+G 剪貼蒙版至機身 → 自由變換調整大小位置。
   
3. 機身質感增強：複製機身基礎層 → 底層添加「漸變疊加」控制高光範圍 → 副本添加「內陰影」(模式「疊加」、白色) → 向上微移 1-2px 產生頂部高光邊 → 合併組。
   
4. 鏡頭組 (最耗時)：同心圓環疊加 → 每環圖層樣式：「倒角浮雕」(內斜面/平滑) + 「描邊」(1px 深灰) + 「內陰影/投影」→ 白線/黑線內陰影距離/大小設 0 產生銳利邊緣 → 透明度分層控制虛實。
   
5. 照片輸出口/閃光燈/按鈕：圓角矩形/橢圓形狀層 → 圖層樣式賦予凹陷/凸起質感 → 位置微調。
   
6. 整體潤色：底部投影接地 → 邊緣高光修飾 → 合併輸出多尺寸。
   

進階建議

• 將鏡頭組、機身組、按鈕組分別建立圖層組，便於後續調整。
• 關鍵尺寸 (鏡頭直徑、按鈕間距) 記錄於筆記圖層，便於團隊協作。
• 導出時使用「導出為」功能一次性生成 @1x/@2x/@3x 多規格。