扁平風格插畫以簡潔形狀、豐富色塊、細膩光影細節著稱，是商業插畫、UI 空狀態、品牌吉祥物的主流風格。本教程完整拆解從 PS 線稿整理、AI 鋼筆描摹、色塊鋪底、漸變與陰影高光塑造、細節紋理豐富、外發光統一風格到裝飾邊框收尾的全流程，助你掌握商業級扁平插畫製作標準。

最終效果

製作全流程

步驟 1：PS 線稿整理（奠基關鍵）

• 紙本/數位板繪製線稿，線條閉合、無斷點、層次清晰
• PS 中圖層分離：輪廓線/五官/髮絲/服裝紋理/背景元素
• 存為 PSD 置入 AI，或直接在 AI 中用鋼筆重繪（推薦：複雜線稿用 PS 整理，簡單直接 AI 繪）

步驟 2：AI 鋼筆描摹與色塊建立

• 置入線稿 → 透明度面板設「正片疊底」、透明度 50% → 鎖定圖層
• 新建「色塊圖層」，鋼筆工具 (P) 勾勒閉合路徑
• 分層策略：膚色/髮色/服裝主色/服裝副色/背景色/裝飾色 → 各自獨立圖層/群組
• 膚色塊、髮色塊優先閉合；服裝分主體/袖口/領口/花紋區
• 完成後隱藏線稿圖層（後續僅作對比參考）

步驟 3：漸變賦予色塊體積感

• 直接選擇工具 (A) 選中色塊 → 漸變面板 (Ctrl+F9) 應用線性/徑向漸變
• 漸變邏輯：受光面亮、背光面暗、轉折處過渡
• 臉部：徑向漸變中心臉頰高光 → 邊緣膚色深調
• 髮絲：線性漸變順髮流方向，深發色→高光色→深發色
• 服裝：按結構走向（垂直/水平/徑向）拉漸變
• 漸變工具 (G) 現場微調角度、位置、範圍

步驟 4：邊緣陰影強化立體切面

• 複製色塊路徑 → Ctrl+F 置前 → 填深色漸變 (基底色→深 30% 黑)
• 白箭頭調整路徑邊緣內縮 1-2px，形成邊緣陰影帶
• 混合模式「正片疊底」，不透明度 30-50%
• 關鍵部位：下巴頸部、髮際線、衣領、袖口、褶皺轉折

步驟 5：邊緣高光勾勒形式轉折

• 同法複製路徑置前 → 填淺色/白色漸變 → 內縮 0.5-1px
• 混合模式「螢幕/濾色」，不透明度 40-70%
• 位置：鼻梁、額頭、下巴尖、臉頰高點、衣褶隆起邊緣
• 高光寬度：窄於陰影帶，銳利度更高

步驟 6：細節紋理與材質表現（靈魂所在）

• 臉頰紅暈：橢圓工具繪製橢圓，徑向漸變 (粉紅→透明)，混合模式「柔光/正片疊底」，不透明度 30%
• 布料花紋：繪製單元圖案 → 拖入色板成圖案填充 → 套用至服裝色塊 → 物件 > 變換 > 縮放 只縮放圖案不縮放物件
• 蕾絲/邊緣裝飾：畫筆工具 + 藝術畫筆 (蕾絲/邊框類) 繪製
• 透明度混合模式組合拳：正片疊底(陰影)、螢幕(高光)、柔光(質感)、疊加(對比)

步驟 7：外發光統一風格與背景呼應

• 人物主群組 → 效果 > 風格化 > 外發光：模式「正片疊底」、顏色深藍/紫、不透明度 40%、模糊 8-12px
• 背景小樹/白雲同樣套用「正片疊底外發光」，統一視覺語言
• 此技法比單純描邊更柔和、更融合背景

步驟 8：裝飾邊框與底紋收尾

• 矩形/橢圓/多邊形繪製裝飾邊框，描邊虛線/圖案畫筆
• 底紋：簡單幾何圖案 (點/線/小圖標) 低透明度鋪滿
• 整體檢查：圖層命名、群組邏輯、色板整理、多餘點清理

商業級扁平插畫 6 大品質標準

維度	標準	檢查方法
路徑品質	錨點最少化、手柄流暢、無多餘點	外框模式 (Ctrl+Y) 檢視
圖層結構	語義化命名、邏輯群組、無空圖層	圖層面板審視
色彩管理	全局色板、色值規範、無雜色	色板面板「選擇所有未使用」刪除
效果可編輯	外觀面板非破壞、無擴展外觀	外觀面板檢查每個物件
輸出就緒	文字外框化、圖片嵌入、超印檢查	分色預覽/預覽分色
風格一致	圓角半徑統一、描邊粗細統一、光影邏輯統一	並排對比多角色/多場景

進階延伸方向

• 動態插畫：導入 After Effects，利用「波浪扭曲」、「木偶扭曲」實現眨眼、呼吸、髮絲飄動
• 插畫系統：提取膚色/髮色/服裝色板、筆刷/圖案/符號庫，構建品牌插畫設計系統
• 3D 擬態風：結合 Illustrator 3D 效果/Blender 擬態材質，升級為 2.5D 風格

扁平插畫的高級感不在於複雜，而在於每一個色塊的漸變方向都服從光源邏輯，每一條陰影高光都精準落在結構轉折處，每一處細節都經過克制的設計決策。這才是商業級作品與業餘練習的本質區別。