從基礎幾何體到完成度極高的 IP 形象圖標

小黃人作為極簡幾何體與豐富表情結合的經典 IP，是 UI 圖標繪製的絕佳練習題材。本教程以分層拆解、逐步逼近的方式，從眼鏡、眼睛、嘴巴、身體、手腳、工裝褲、手套、鞋子八大模塊，展示矢量形狀工具、路徑操作、圖層樣式、蒙版羽化的綜合運用，適合 UI 設計師進階矢量描繪技能。

分模塊構建過程展示

眼鏡：圓角矩形+路徑布爾運算


眼睛：橢圓疊加、內發光模擬濕潤感


嘴巴：路徑變形構建多種表情


身體：圓角矩形+錨點微調比例


手部：簡化幾何體組合


工裝褲：路徑剪裁+縫線裝飾


手套：圓角矩形+高光陰影


鞋子：橢圓扭曲+底紋紋理


合成完整效果

核心技法總結

• 幾何體優先：所有複雜形狀拆解為矩形、橢圓、圓角矩形組合，保證矢量可縮放無損。
• 布爾運算：合併、減前、相交、排除，構建眼鏡框、工裝褲口袋等複雜輪廓。
• 圖層樣式非破壞：內發光(眼球濕潤)、投影(立體厚度)、漸變疊加(材質色彩)，隨時可調。
• 智能物件封裝：各部件轉為智能物件，便於整體縮放、複製變體。
• 像素對齊：開啟「對齊像素網格」，確保導出 SVG/PNG 無模糊邊緣。

進階練習方向

1. 嘗試繪製不同表情變體（驚訝、壞笑、哭泣），僅調整嘴巴/眉毛路徑。
2. 制作動態表情包：導出各部件圖層至 After Effects 綁定關鍵幀動畫。
3. 風格遷移：同邏輯繪製「大白」、「哆啦A夢」等極簡幾何 IP，建立個人矢量描繪元件庫。

矢量描繪的核心是「幾何分解→布爾重組→樣式賦質→智能封裝」四步走。以小黃人為切入點練習，能快速建立起標準化、可復用的 UI 圖標制作肌肉記憶。