在 Figma/Sketch/Adobe XD 成為主流前，Illustrator 憑藉強大的矢量編輯、精準切片系統、原生 HTML/CSS 輸出，曾是網頁視覺設計主力工具。雖然時代變遷，但 AI 的「物件切片」「切片選擇工具」「存儲為 Web (舊版)」工作流仍具備獨特優勢：矢量無損縮放、切片自動適應物件邊界、Rollover 狀態原生支援、代碼輸出可控性強。本教程完整重現這一經典工作流，對維護舊專案、理解切片原理、跨工具遷移極具參考價值。

核心工作流 10 步走

步驟 1：佈局設計與物件化思維

不同於 PS 的像素圖層，AI 強制要求「一切皆物件」：

• 導航欄：每個按鈕 = 獨立矩形/圓角矩形 + 文字物件 → 編組
• Hero 區：背景圖 = 置入嵌入圖片 / 矢量插畫，CTA 按鈕 = 獨立物件
• 內容區：卡片 = 矩形容器 + 圖片佔位 + 文字框 + 圖標 → 符號化
• 頁腳：版權/導航/社交圖標 = 獨立物件編組

關鍵原則：每個交互元素 = 獨立物件/群組，便於後續切片映射。

佈局草圖：所有交互元素物件化、群組化、命名規範

步驟 2：物件切片——一鍵生成自適應切片

1. 選中導航按鈕群組（或任意交互物件）
2. 執行 Object > Slice > Make (物件 > 切片 > 建立) 或右鍵選單「建立切片」
3. AI 自動生成緊貼物件邊界的切片，編號自動遞增
4. 優勢：物件移動/縮放/變形 → 切片自動跟隨更新，零維護成本

物件切片：綠色切片線自動貼合按鈕邊界

步驟 3：手動切片——處理文字/複雜區域

小字體文字直接輸出圖片易模糊，採用「切片工具」(K) 手動繪製切片區域：

• 劃選文字區域建立切片（編號如 #15）
• 導出時選擇「不輸出圖片，保留 HTML 文字」
• 後續在 Dreamweaver/代碼編輯器中替換為真實文字 + Web Font

手動切片：藍色切片框標註文字區域，預留代碼編輯空間

步驟 4：切片選擇工具微調

切片選擇工具 (Shift+K) 功能：

• 點擊切片 → 拖動調整位置/大小
• Shift+點擊多選 → 對齊/分佈切片
• 右鍵 > 切片選項：命名、URL、Alt 文本、目標框架、背景色
• 關鍵：為 Rollover 狀態切片命名規範：btn_home_normal、btn_home_over

步驟 5：存儲為 Web (舊版) 面板深度操作

File > Export > Save for Web (Legacy) (Ctrl+Alt+Shift+S)

面板核心操作區：

1. 切片選擇：左側工具列「切片選擇工具」點選單個/Shift 多選
2. 格式優化：右側預設下拉選單：
   • 照片/漸變區域 → JPEG High (60-80%) / Progressive
   • 純色/文字/透明區域 → PNG-24 / PNG-8 (自適應/選擇性/擴散)
   • 簡單動畫 → GIF (選擇性/擴散/無抖動)
   • 現代首選 → WebP (有損/無損) *需 AI 2022+ 或外掛
3. 圖像尺寸：勾選「剪裁到畫板」，設定輸出尺寸（1x/2x/3x @2x @3x 後綴自動生成）
4. 預覽：右下角瀏覽器圖標 → 真實瀏覽器渲染預覽

步驟 6：首次導出——基礎狀態

• 儲存類型：「HTML 和圖片」
• 切片：「所有切片」
• 輸出：生成 index.html + images/ 目錄
• HTML 結構：<table> 佈局（舊版特徵），切片映射為 <td><img></td>

步驟 7：Rollover 狀態製作——變色法

1. 返回 AI 畫布，選中按鈕物件
2. 修改填色/描邊/效果產生 Hover 狀態視覺差異
3. 關鍵：切片不動，只變物件外觀，物件切片自動跟隨更新

步驟 8：二次導出——Rollover 狀態圖片

1. 再次開啟 Save for Web 面板
2. 關鍵：圖像尺寸必須與首次導出完全一致
3. 切片選擇工具 Shift+點擊選中所有按鈕切片
4. 優化設定同首次

步驟 9：導出設定區分狀態

• 檔案名：index_over（區別於首次 index）
• 儲存類型：「僅圖片」
• 切片：「選定切片」
• 輸出：images/btn_home_over.gif 等僅狀態圖片

步驟 10：前端整合——從表格佈局到現代 CSS

AI 輸出的 HTML 為表格佈局，現代前端需重構：

1. 提取切片圖片至 /assets/img/slices/
2. 編寫語義化 HTML：<nav><ul><li><a><img></a></li></ul></nav>
3. CSS Sprite 合併：將所有切片圖片合併為單張 Sprite 圖，CSS background-position 定位
4. Rollover 實現：:hover 偽類切換 background-position 或 opacity/transform 動畫
5. 響應式：@media 切換 @2x/@3x 圖片或 SVG 矢量版本

現代化改造建議

傳統 AI 工作流	現代替代方案	遷移策略
物件切片自動適應	Figma 切片導出 / Sketch 導出	AI 佈局 → 複製貼上至 Figma → 重建切片
Rollover 雙狀態導出	Figma 變體/原型 / CSS :hover	AI 狀態圖片 → Figma 變體組件 / 直接寫 CSS
HTML 表格佈局輸出	語義化 HTML + Flex/Grid	廢棄 AI HTML，僅取圖片資產
切片命名映射	Figma 導出命名規則 / Token 系統	AI 切片命名 → 設計 Token 映射表

遺產價值：為什麼 2024 年仍值得學習

• 理解切片本質：矩形映射、座標計算、狀態管理，通用於所有設計工具
• 矢量優勢場景：圖標系統、插畫系統、圖表組件 → AI 繪製 → SVG 導出 → 前端內聯
• 舊專案維護：大量存量 AI 源檔需迭代，掌握原生工作流零成本修改
• 特殊輸出需求：HTML Email 切片圖片、AMP 頁面圖片、舊版 CMS 靜態頁生成

Illustrator 網頁切片工作流是「設計工程化」思想的早期實踐：將視覺設計拆解為可計算、可映射、可自動化的離散單元。雖然工具迭代，但「物件化設計 → 切片映射 → 狀態管理 → 代碼生成」的工程化邏輯永不過時。