設計一個既科學準確又具備圖標識別度的大腦圖標，需要在解剖結構與視覺簡化之間找到平衡。本教程展示從參考資料蒐集、手繪草稿、矢量線條構建、實時上色填充，到光影高光塑造的完整專業流程，適合 UI 圖標設計、醫療視覺傳達、科普插畫等領域參考。

最終效果

設計前的思考框架

1. 觀點選擇

大腦側視圖能同時呈現大腦半球、小腦、腦幹等關鍵結構，識別度最高。建議採用側視角度，展示兩半球溝回特徵。

2. 結構簡化策略

• 誇大特徵：強化溝回彎曲節奏，使用 S 型、M 型、十字交叉等基礎曲線單元重複組合。
• 刪減細節：省略小腦、腦幹等次要結構；減少溝回數量，保留核心節奏。
• 尺度適配：考慮小尺寸下的可讀性，線條粗細統一，避免過細筆畫在 16px 以下失真。
• 風格一致：線條粗細、彎曲半徑、間距保持系統性，構建視覺語言統一性。

矢量化製作流程

步驟 1：建立畫布與導入草稿

• 新建 512×512px 畫布（標準圖標尺寸）。
• 置入手繪草稿，降低不透明度，鎖定圖層。

步驟 2：鋼筆工具構建線條骨架

• 新建圖層「linework」，用鋼筆工具描繪大腦外輪廓與主要溝回線條。
• 線條端點保持尖銳，曲線控制桿調整流暢。
• 所有線條合併為單一複合路徑（`Ctrl+8` 或路徑查找器「聯集」）。

步驟 3：實時上色工具快速填充基礎色

• 選取線條骨架，執行「物件 > 實時上色 > 建立」。
• 選取「實時上色桶工具 (K)」，點擊封閉區域填充基礎膚色（粉紅系）。
• 完成後執行「物件 > 實時上色 > 擴展」，獲得常規群組物件。
• 將填充色塊分離至獨立圖層「base」，線條保留於「linework」層。

步驟 4：高光與陰影塑造立體感

• 確定光源方向（標準左上 45°）。
• 新建「highlights」層，鋼筆工具繪製高光形狀，填充比基礎色亮 10-15% 的顏色，形狀圓潤跟隨溝回走向。
• 新建「shadows」層，繪製陰影形狀，填充較暗顏色，位於溝回重疊、投影區域。
• 高光陰影形狀保持簡潔，避免過度碎片化。

步驟 5：漸變映射豐富色彩層次

• 複製「linework」層，合併為單一輪廓形狀，命名「gradient」。
• 填充線性/徑向漸變（如橙粉色系），混合模式設「顏色」，置於最上層。
• 此層統一色調氛圍，賦予大腦有機溫潤質感。

圖標化輸出規範

• 導出多尺寸：16, 24, 32, 48, 64, 128, 256, 512px（PNG 透明背景）。
• SVG 版本保留矢量優勢，適用響應式網頁。
• 建立設計系統元件：定義命名規範、色彩 Token、尺寸變體、狀態變體（hover/active/disabled）。

設計師心得

「圖標設計的本質不是畫得多像真實物體，而是在極小尺度下傳達最核心的識別特徵。大腦圖標的靈魂在於『雙半球+溝回節奏』這兩個視覺符號，其餘皆可捨。」

這套「參考→簡化→矢量化→分層著色→光影塑造→漸變統一」的工作流，不僅適用於大腦圖標，更能推廣至所有器官、器械、生物結構類圖標設計，是醫療科學視覺傳達的標準化方法論。