切片工具 是 Photoshop 內建的網頁圖片切割輸出功能，適合結構規則、模組化的網頁設計稿快速導出 HTML 與圖片資源。本教學演示基於網格的規則切片流程，並說明實際項目中手動切片的靈活策略。

最終輸出效果

規則網格切片標準流程

1. 打開設計稿 PSD，選取切片工具 (C) (工具欄裁剪工具組下)。
2. 選項欄點擊「劃分」按鈕 → 設定水平劃分數 (如 4)、垂直劃分數 (如 3) → 確定，畫布自動生成 12 個等大小切片（藍色編號標籤）。
3. 切片選擇工具 (Shift+C) 可單獨選中切片，調整位置/大小/命名/URL/目標等屬性（右鍵選單/選項欄）。

導出為網頁格式

4. 點擊工具欄最下方「在 ImageReady 中編輯」圖示 (CS6 以前) 或直接執行 檔案 > 匯出 > 存檔為 Web 所用格式 (舊版) / 檔案 > 匯出 > 存檔為 Web (舊版) (CC 版本)。
5. 在優化面板中：

• 整體/單一切片設定優化格式 (JPEG/PNG-8/PNG-24/GIF)、品質、透明度、插值算法等。
• 切片可分組批量設定相同參數。

5. 點擊「儲存」 → 對話框中：
   • 格式選 「HTML 和圖片」。
   • 設定輸出資料夾 (如桌面新建資料夾)。
   • 圖片輸出設定：通常選「所有切片」或「選定切片」。
   • HTML 設定：可選「生成 CSS」而非表格佈局 (舊版選項)。
6. 確定後，輸出資料夾包含：index.html (或同名 .html) 與 images/ 目錄 (含所有切片圖片)。

後續處理關鍵步驟

• 輸出圖片預設為索引色模式 (GIF/PNG-8) 或 RGB (JPEG/PNG-24)。若需進一步編輯切片圖片 (如調色、銳化)，務必先執行 影像 > 模式 > RGB 色彩 轉換模式。
• HTML 代碼為表格/舊式 CSS 佈局，現代前端開發不直接使用，僅作視覺參考與切片圖片素材來源。實際重構時，前端工程師會根據設計稿語義化編寫 HTML/CSS，引用導出的圖片資源。

實戰進階：手動切片策略 (現代工作流核心)

實際專案中，設計稿極少完美符合規則網格。專業切片工作流為：

1. 圖層/群組命名規範：如 btn_login_normal, icon_user@2x, bg_header_repeat-x，包含語義、狀態、倍率、平鋪屬性。
2. 圖層導出替代切片：右鍵圖層/群組 → 「快速匯出為 PNG」 / 「匯出為...」 (CC 2015+)，直接輸出單個圖層/群組為圖片，無需手動劃切片，支援多倍率 (1x/2x/3x) 一鍵導出。
3. 手動切片輔助：僅對無法單圖層導出的複雜合成區域 (如大背景圖、拼接區) 使用切片工具手動繪製/調整切片範圍。
4. 切片命名與元數據：雙擊切片編輯名稱/URL/Alt 文字，導出 HTML 時保留，便於前端對應。
5. 設計規範/標註輸出：配合 Zeplin/Figma/Sketch/Adobe XD 等協作工具輸出標註、色值、字體、間距、切片資源，而非依賴 PS 生成 HTML。

切片工具 vs 圖層導出 對比

維度	切片工具 (傳統)	圖層/群組導出 (現代)
適用場景	規則網格、整頁導出、舊版工作流	組件化設計、響應式多倍率、元件庫、現代協作流
靈活度	手動調整繁瑣、難維護	圖層結構即切片結構、自動同步更新
多倍率輸出	不支援 (需手動縮放文件重複導出)	原生支援 1x/2x/3x/@2x/@3x 後綴自動導出
前端對接	產出表格 HTML、需人工重構	產出標準圖片資源、配合標註工具直接開發
版本控制	切片資訊存 PSD、難追蹤	圖層命名即語義、Git 友好

結語

理解切片工具傳統網格流程有助於掌握網頁圖片切割本質，但現代專業工作流核心是「圖層/群組語義化命名 + 一鍵多倍率導出 + 標註工具協作」。建議以本教學理解基本概念，實際項目中全面擁抱圖層導出與設計交付平台。