複古相機圖標是 UI 設計、品牌插畫、印刷品裝飾中的常青題材。本教程以一組高密度步驟圖 (14 張過程圖) 展示如何用 Photoshop 矢量形狀工具 (矩形、圓角矩形、橢圓、多邊形) 結合圖層樣式 (斜面與浮雕、內陰影、外發光、漸變疊加、描邊、投影) 快速構建一枚擁有豐富材質細節 (皮革包裹、金屬鏡頭框、玻璃鏡片、紅色快門鈕、皮質提把) 的老式卡通相機圖標。全程保持向量可編輯性，適合多尺寸導出與風格快速變體。

最終效果

核心構建邏輯：模組化零件庫組裝

教程雖無文字說明，但過程圖清晰揭示了「零件化建模 → 樣式賦質 → 空間組裝 → 細節點綴」的標準化流程：

零件拆解與圖層結構 (推測重構)

零件名稱	構建工具	核心圖層樣式	材質隱喻
機身主體	圓角矩形 (大圓角)	斜面與浮雕 (內斜面/深度大/柔化) + 漸變疊加 (深灰→淺灰→深灰) + 內陰影 (頂部/底部)	黑色烤漆/塑膠機身
皮革包裹	圓角矩形 (稍小) + 路徑減去鏡頭窗口	圖案疊加 (皮革紋理) + 斜面與浮雕 (淺浮雕/光澤輪廓) + 顏色疊加 (棕/紅褐)	真皮/仿皮材質
鏡頭框	橢圓工具 (多個同心圓環)	斜面與浮雕 (外斜面/鏡面高光) + 漸變疊加 (金屬漸變: 深灰→亮銀→深灰) + 描邊 (1px 深灰)	陽極氧化鋁/鍍鉻金屬
鏡片玻璃	橢圓工具 (最內圈)	漸變疊加 (徑向: 透明→淺藍→透明) + 內發光 (青藍/篩色) + 外發光 (微弱)	多層鍍膜光學玻璃
快門鈕	圓角矩形/橢圓 (小)	斜面與浮雕 (外斜面/高光銳利) + 顏色疊加 (醒目紅) + 投影	紅色陽極氧化鋁/塑膠
提把/側把	圓角矩形/路徑描邊	皮革包裹同樣式 + 內陰影 (懸空感)	皮質手柄
細節裝飾	矩形/圓形/多邊形/文字工具	品牌 Logo、型號文字、指示燈、閃光燈座、取景器窗口	功能性細節點綴

關鍵技術點提煉

1. 形狀圖層非破壞工作流

• 所有零件均為「形狀圖層」 (向量)，可隨時用路徑選擇工具 (黑箭頭/白箭頭) 修改錨點、控制柄、圓角半徑、尺寸
• 圖層面板右鍵 → 「合併形狀」/「減去前面形狀」/「相交形狀區域」/「排除重疊區域」 進行布爾運算，構建複雜幾何 (如鏡頭窗口挖空)

2. 圖層樣式「材質預設」化

• 將上表各材質對應的圖層樣式配置存為「樣式預設」 (Styles 面板 → 新建樣式)
• 命名規範：`Mat_Leather_Brown`、`Mat_Metal_Chrome`、`Mat_Glass_Lens`、`Mat_Plastic_Red`…
• 新零件建立後，一鍵點擊樣式預設 → 瞬間賦質 → 僅微調「斜面深度/光澤大小/漸變角度」適配幾何尺寸

3. 空間關係由圖層順序決定

• 圖層面板上下順序 = 畫面前後遮擋關係
• 群組管理：`G_Body` (機身組) → `G_Lens` (鏡頭組) → `G_Controls` (控制件組) → `G_Details` (細節組) → `G_Straps` (提把組)
• 組內層序：基礎色層 → 紋理/漸變層 → 高光/陰影層 → 細節裝飾層

4. 光源統一與參數聯動

• 全局光源設定：圖層樣式對話框左下角「使用全局光」✓ → 角度 120°/高度 30° (標準左上光源)
• 所有「斜面與浮雕」「投影」「內陰影」「光澤」自動同步光源角度
• 需局部特殊光源時：取消「使用全局光」單獨設置

從教程到設計系統：圖標組件化交付清單

• 源文件：分層 .psd (含所有形狀圖層、樣式、調整層、路徑)
• 規格表：Markdown 文檔記錄：畫布尺寸、網格系統、圓角半徑標準、描邊寬度標準、色彩 Token、陰影 Token、圖案庫路徑
• 狀態變體：默認/懸停/按下/禁用/聚焦 — 各自對應圖層組可見性/樣式覆蓋
• 多尺寸導出：動作/腳本批量導出 16/24/32/48/64/128/256/512/1024px @1x/2x/3x PNG + SVG (形狀圖層匯出路徑)
• 開發交付包：Figma/Sketch/Adobe XD 元件庫同步版本 + Storybook 文檔 + React/Vue/Flutter 代碼片段

舉一反三：複古產品圖標系列化策略

• 同構建邏輯快速衍生：收音機、打字機、電報機、黑膠唱片機、複古麥克風、舊電視機、燈泡、指南針、懷錶……
• 建立「複古材質包」：皮革 (3色)、氧化金屬 (銅/鐵/鋼/鋁)、裂紋漆面、黃銅絲網、老化紙質、氈布……存為 .pat/.asl/.aco 庫文件
• 設計語言統一：統一圓角半徑 (8px/12px/16px)、統一描邊風格 (單線/雙線/虛線)、統一高光邏輯 (左上光源/環境反光色/邊緒銳度)

14 張密集過程圖，無一字贅語，卻完整呈現了「向量幾何建模 → 參數化材質賦質 → 空間邏輯組裝 → 設計系統交付就緒」的專業圖標製作全鏈路。這才是 PS 做圖標的正確打開方式：不畫像素，畫參數；不做一次性圖，做可復用組件。