漢堡包作為快餐文化符號，其層次豐富的結構（麵包、肉餅、芝士、生菜、番茄、醬料）是練習矢量質感表現的絕佳題材。本教程示範如何在 Illustrator 中運用 漸變網格 渲染麵包多孔質感、外觀面板多重填充 製作芝士融化流動感、散點筆刷 模擬芝麻顆粒、路徑查找器 構建食材層疊關係，完成一張商業級美食插畫海報。

成品展示

食材層級拆解與製作順序 (自下而上)

1. 底麵包 — 多孔鬆軟質感

1. 形狀：橢圓 + 底部平切，直接選擇工具 微調側面微鼓。
2. 漸變網格 節點佈局：
   - 頂部隆起：高光暖黃 #FFF3B0
   - 側面陰影：暖棕 #C9A86C
   - 多孔紋理：網格節點呈不規則三角網分佈，手動拉動節點形成凹凸光影
   - 底部接觸面：深棕 #8B6B4A，加重陰影
3. 芝麻筆刷： 橢圓 2×1px → 定義 散點筆刷 (大小隨機 80-120%，間距隨機，旋轉隨機，色相化)。沿頂部曲線描繪，描邊深褐 #5D3A1A。

2. 生菜 — 皺褶邊緣與脈絡

1. 基礎形：鋼筆勾勒波浪邊緣閉合路徑。
2. 填色：徑向漸變 中心亮綠 #8FBC8F → 邊緣深綠 #2E8B57。
3. 葉脈：筆刷工具 繪製分支線條，描邊 0.5pt 深綠，端點圓頂，寬度工具 根部粗尖端細。
4. 邊緣皺褶：效果 → 扭曲變形 → 粗糙化 (大小 2%、細節 8、平滑點) 僅套用於邊緣路徑段 (用外觀面板限制效果範圍)。

3. 番茄片 — 多汁透明感

1. 形狀：橢圓壓扁，邊緣微帶鋸齒 (效果 → 扭曲變形 → 鋸齒，極小參數)。
2. 填色：漸變網格 模擬果肉纖維：
   - 中心：亮紅 #FF3333 (果漿)
   - 中環：橙紅 #FF6347 (果肉纖維)
   - 邊緣：深紅 #CC0000 + 透明漸變 (果皮)
3. 高光：微小白橢圓 (螢幕模式 60%) 疊加 2-3 個，模擬水分反光。

4. 芝士片 — 融化流動感 (重點難點)

1. 基礎形：圓角矩形，四角圓角半徑差異化 (模擬融化下垂)。
2. 外觀面板多重填充 (自下而上)：
   - 填充 1：基底黃 #FFD700 → #FFA500 線性漸變 (-90°)
   - 填充 2：漸變網格 手動添加「流動高光」節點 (淡黃 #FFFFE0)，沿邊緣下垂方向分佈
   - 填充 3：效果 → 路徑 → 偏移路徑 -2px，填充深橙 #E67E22，模式 正片疊底，模擬邊緣焦化/乾燥
   - 描邊：0.5pt 深橙 #B85C00，內部對齊
3. 氣孔： 散點筆刷噴灑微小白圓 (螢幕 40%)，模擬發酵氣泡。

5. 肉餅 — 炭烤焦痕與油脂光澤

• 形狀：橢圓壓扁，邊緣 粗糙化 (大小 3%、細節 10)。
• 填色：徑向漸變 邊緣焦黑 #3D2B1F → 中心深褐 #8B4513。
• 焦痕紋理：散點筆刷 (不規則深褐斑點，正片疊底 30%) 疊加。
• 油脂高光：彎曲細線 (白/淡黃，螢幕 50%) 沿表面曲率分佈。

6. 番茄醬/蛋黃醬 — 流體質感

• 鋼筆勾勒自然流淌/滴落形狀 (頂部寬、底部尖、側面凹凸)。
• 醬料：線性漸變 深紅 #8B0000 → 亮紅 #FF3333，添加 內發光 (正片疊底、深紅、3px)。
• 蛋黃醬：線性漸變 奶黃 #FFF8DC → 亮黃 #FFEB3B，外發光 (螢幕、淡黃、2px)。

7. 頂麵包 — 鏡像底麵包並微調

• 複製底麵包，垂直翻轉，高度壓縮 80% (頂麵包通常較薄)。
• 芝麻分佈更稀疏，頂部中央添加一道「切口」高光 (白色弧線，螢幕 40%)。

場景化佈局與字體設計

• 俯視/45°仰視 兩種視角版本：俯視適合外送 App 封面，仰視適合戶外廣告牌。
• 標題字體： 圓體粗黑 (如 源柔黑/庞门正道标题体)，字距緊湊，套用 麵包同色系漸變 + 描邊 2pt 深色 + 長投影 (45°、15px、正片疊底 20%)。
• 營養標籤/促銷標籤： 圓角矩形 + 圖標 + 簡潔文案，色彩從漢堡配色中抽取。

動態化延伸 (After Effects / Lottie)

1. 分層命名規範：Bun_Top, Cheese_Melt, Patty_Sizzle, Lettuce_Fresh, Sauce_Drip。
2. 關鍵幀動畫：芝士融化 (路徑變形)、醬料滴落 (路徑修剪動畫)、蒸氣上升 (粒子系統)、漢堡輕彈 (位置/縮放彈性)。
3. 導出 Lottie JSON (Bodymovin 外掛)，嵌入 App/網頁/數字菜單板。

這套「食材模組化 → 質感標準化 → 圖層語義化 → 動態就緒」的製作方法論，不僅適用於漢堡，同樣可延展至三明治、壽司、披薩、飲品等全品類美食插畫體系構建。