AI 做網頁設計的優勢與流程

Illustrator 強大的矢量佈局、文字排版、符號複用、即時切片功能，讓設計師能在單一環境完成從視覺設計到前端切圖的全流程。本教程示範標準網頁製作管線：佈局 → 物件切片 → 手動切片文字區 → 切片優化輸出 → 滑鼠懸停狀態製作 → 二次輸出 → Dreamweaver 組裝。

關鍵步驟

1. 佈局設計：矩形/圓角矩形/文字工具繪製頁面框架、導航欄、按鈕、內容區。建立圖層結構：Header/Nav/Content/Footer/Background。

2. 物件基礎切片：選中按鈕/圖標等矢量物件 →「對象 → 切片 → 建立」(Object/Slice/Make)。切片自動貼合物件邊界，物件縮放切片同步更新。

3. 文字區手動切片：小字體區域用「切片工具」(K) 手工拖出切片（編號 15），標記為「HTML 文字區」，後續在 DW/Golive 中以真實文字替代圖片，保證清晰度與 SEO。

4. 切片微調：「切片選擇工具」調整切片邊界、合併/分割切片、設定切片類型（圖片/無圖片）。

5. 存儲為 Web 格式（首次輸出）：File → Save for Web → 切片選擇工具逐一切片優化：照片區 JPEG 高品質、圖標/按鈕 PNG-24 透明、大面積純色 GIF/PNG-8。設定圖像尺寸 100%。IE 預覽確認 → 存儲「HTML and Images」，檔名 index。

6. 滑鼠懸停狀態製作（二次輸出）：複製按鈕圖層 → 修改顏色/發光/陰影 → 再次 Save for Web → 尺寸保持一致 → Shift+點選所有按鈕切片 → 優化 → 存儲「Images Only」，檔名 index_over，選項「Selected Slices」。

7. Dreamweaver 組裝：開啟 index.html → 將 index_over 圖片對應替換至滑鼠懸停行為 → 文字區切片替換為 HTML 文字 + CSS 樣式 → 完成動態網頁。

現代工作流建議

• 現代專案建議改用 Figma/Sketch/Adobe XD 進行 UI 設計，Illustrator 專注於插畫、圖標、Logo 等矢量資產產出。
• 若仍用 AI 做網頁，請善用「資產導出」面板批量導出 @1x/@2x/@3x PNG/SVG，配合 CSS Sprite 或 SVG Symbol 系統。
• 切片功能在 CC 2019+ 已標記為「傳統功能」，新專案請優先考慮資產導出工作流。