教程概覽

本教程分享一枚寫實風格唱機（唱片機）圖標的設計全過程思路。作者耗時 3-4 小時，核心技巧集中在：草圖構思立體盒子透視 → 矢量形狀建模 → 圖層樣式堆疊材質（黑膠紋理、金屬拉絲、木紋） → 光影邏輯統一（投影、高光、反射、環境光） → 圖層結構有序管理。適合 UI 圖標設計師、產品設計師掌握「從草圖到寫實圖標」的專業決策流程。

步驟 01：草圖構思——從平面到立體的概念突破

手繪草圖（紙筆或數位板）確立核心創意：將唱機設計為「打開的盒子」透視，而非平面正視圖。草圖包含：黑膠唱片、轉盤、唱臂、唱針、調速旋鈕、電源鍵、防塵蓋折邊。透過圓角矩形暗示盒子厚度，讓圖標具備空間感。

圖 1：草圖構思——打開的盒子透視

步驟 02：文件建立與基礎框架搭建

• 畫布：512×512 px（標準圖標源尺寸）、72 dpi、RGB。
• 背景：漸變工具（G），徑向漸變，中心淺灰 #e0e0e0 → 邊緣深灰 #888888，營造舞台光環境。
• 基礎形狀：圓角矩形工具（U），半徑 90px，畫 512×512 px 圓角正方形，按 Alt 點擊形狀縮略圖載入選區，新建圖層組「Icon」，為組添加矢量蒙版（自動裁切超出圓角矩形的內容）。

圖 2：基礎框架與圖層組蒙版

步驟 03：色彩策略——克制與精準

確立核心配色表（建議存入色板庫）：

• 黑膠唱片：深棕 #1a120a（非純黑，保留色相溫度）
• 轉盤/金屬件：亮棕/古銅 #b8860b、#cd953c、#8b6914
• 木質底座/蓋：紅木色系 #5d2b1a、#8b4513、#c89868
• 唱針/指示燈：鉻鋼 #c0c0c0、紅 #cc0000、綠 #00cc66
• 環境反光色：淡藍 #a8d0e8、暖灰 #e8e0d8

原則：色相統一（暖色系主導）、明度層次分明、飽和度克制，避免圖標在小尺寸下顏色糊成一團。

圖 3：核心配色表

步驟 04：黑膠唱片材質——圖層樣式疊加還原真實

在「Icon」組內新建組「Turntable」。矢量橢圓工具按 Alt+Shift 拉正圓（唱片），填充深棕基色。圖層樣式堆疊：

• 漸變疊加：線性 -45°，色標：#1a120a → #2a1a0a → #1a120a，模式「正常」，不透明度 80%。模擬黑膠表面細微反光條紋。
• 雜色：在漸變疊加中勾選「雜色」3%~5%，模擬黑膠壓片顆粒感。
• 複製圖層（Ctrl+J），改漸變模式為「徑向」，色標：中心透明 → 邊緣 #332211 30%，模擬光反射高光環。

圖 4：黑膠唱片雙層漸變疊加（紋理+高光環）

步驟 05：陰影與光影邏輯統一

• 旋鈕/唱針投影/高光：各構件圖層添加「投影」（距離 2px、大小 3px、黑 30%）+「內發光/斜面浮雕」製造微觀立體。
• 色彩/線性加深混合模式：用於繪製接觸陰影（唱臂投影在唱片上、唱針尖端壓痕），顏色取環境暗部色，不透明度 20%~40%。

圖 5：陰影與光反射細節

步驟 06：進階陰影——灰色矩形+外發光模擬接觸陰影漸變

在唱片上方新建圖層，矩形工具拉扁平橢圓（唱臂投影形狀），填中性灰 #888888。圖層樣式：外發光，模式「線性加深」，顏色 #332211，大小 15px，不透明度 50%。再降低圖層不透明度至 40%。此法比單純投影更自然地模擬「接觸陰影由內而外柔和擴散」的物理特性。

圖 6：進階接觸陰影技法

步驟 07：材質飽和度與蒙版融合

為木質底座/蓋圖層添加「色相/飽和度」調整層（剪貼），飽和度 -15，亮度 +5，使木色更內斂。再添加圖層蒙版，黑色筆刷擦除高光區保留原色，混合模式「疊加」，讓木紋在光影變化中若隱若現。

圖 7：木質材質飽和度與蒙版融合

步驟 08：圖層結構有序管理——專業工作流標配

圖層面板自下而上組織：

背景組
Icon組（矢量蒙版裁切圓角方框）
  ├─ 底座組（木質底座、腳墊、金屬飾條）
  ├─ 轉盤組（黑膠唱片、轉盤盤面、軸心、調速旋鈕）
  ├─ 唱臂組（唱臂管、配重、升降桿、唱頭、唱針）
  ├─ 防塵蓋組（蓋體、鉸鏈、把手）
  ├─ 控制面板組（電源鍵、指示燈、功能鍵）
  └─ 環境光組（頂部高光層、地面投影層、反光卡層）

圖 8：圖層結構有序排布

步驟 09：細節迭代——樣式參數微調至滿意

反覆進入各圖層「混合選項」，調整：斜面深度/大小、漸變色標位置/顏色、投影距離/大小/不透明度、內發光顏色/大小/雜色。每次微調後縮放畫布至 100%、64px、32px、16px 檢視，確保各尺寸下細節可辨、材質可讀、無雜訊。此過程最耗時、最考驗耐心，也是寫實圖標成敗關鍵。

圖 9：細節迭代微調

步驟 10：頂層統一光澤——大氣感一鍵生成

新建圖層「全局光澤」置於「Icon」組頂端（但仍在組內，受蒙版裁切）。橢圓選區畫大橢圓覆蓋左上 1/3 區域，羽化 80px，填白。添加「內發光」（螢幕、#fff8dc、大小 100px）+「光澤」（內部、螢幕、白、不透明度 15%、大小 200px、輪廓「圓錐」）。此層為整個圖標統一色調、增加大氣通透感、模擬環境光包裹。

圖 10：全局光澤層參數與效果

寫實圖標設計方法論總結

1. 草圖決定上限：草圖階段解決透視、構圖、構件關係、光源方向等宏觀決策，PS 中只執行不猶豫。
2. 矢量形狀為骨，圖層樣式為肉：形狀保證縮放不失真、邊緣銳利；樣式非破壞疊加材質光影，參數可隨時微調。
3. 色彩策略先行：建立配色表、鎖定色相溫度、控制飽和度範圍，避免後期調色混亂。
4. 光影邏輯統一：全圖單一主光源（本案左上 45°），所有高光、投影、接觸陰影、環境反光、菲涅爾反射嚴格遵循。
5. 圖層結構即設計文檔：清晰的組織結構、命名規範、顏色標籤，是團隊協作、版本迭代、資產復用的基礎設施。
6. 多尺寸驗證：1024→512→256→128→64→32→16 px 全尺寸預覽，確保圖標在所有目標平台清晰可識別。

此工作流可直接遷移至：音響設備、相機、錶、燈具、家電等「有明確材質、結構、光影邏輯」的產品圖標設計。