切片工具是 Photoshop 內建的網頁設計稿輸出利器。本教學示範規則網格切片流程：開啟設計稿 → 切片工具選「劃分切片」設定水平/垂直分割數 → 進入 ImageReady（或 PS 存儲為 Web）優化各切片 → 輸出 HTML 與 Images 資料夾 → 切片圖片轉 RGB 模式供後續處理。實際專案中複雜版面需手動劃分切片區塊。

素材與流程圖解

素材設計稿：

1. 規則劃分切片

選擇切片工具 → 切片選擇工具 → 「劃分切片」：水平 4、垂直 3，得 12 等分切片。

2. 進入優化狀態並輸出 HTML

點擊工具欄最下方圖示進入 ImageReady（或直接在 PS【存儲為 Web 所用格式】）。【檔案】→【儲存優化結果為 HTML】。

3. 獲得輸出成果

輸出資料夾包含：HTML 網頁檔、Images 資料夾（內含 12 張切片圖）。切片預設為索引色模式，後續編輯需【影像】→【模式】→【RGB 色彩】轉換。

現代前端開發多採用切圖標註工具（Zeplin、Figma、蓝湖）直接輸出切圖與標註，PS 切片工具漸少用於實戰，但理解其原理有助於掌握網頁圖片優化邏輯。