切片工具是網頁設計、UI 切圖、郵件模板製作的標配技能。本教程演示標準化流程：開啟設計稿 → 選取切片工具（C）→ 右鍵「劃分切片」輸入行列數 → 「存儲為 Web 所用格式」→ 輸出 images 資料夾含所有切片與 HTML。附帶切片命名規範、導出格式選擇（PNG24 透明 / JPEG 高質 / GIF 動圖）、自動生成 CSS 背景定位代碼等工程化技巧。

標準化切片輸出 SOP

1. PS 開啟設計稿（建議 2x/3x 視網膜圖）
2. 工具欄選「切片工具」（或 C 循環切換）
3. 畫布右鍵 → 「劃分切片」→ 輸入水平/垂直分割數，或手動拖拽切片邊界
4. 雙擊切片可命名（建議：模塊_狀態_尺寸，如 btn_hover_80x40）
5. Ctrl+Alt+Shift+S 開啟「存儲為 Web 所用格式」
6. 全選切片 → 統一設置格式/質量 → 「儲存」→ 選擇「所有切片」→ 輸出

工程化輸出清單

• images/ 資料夾：所有切片圖片
• index.html：切片定位表格代碼（舊版輸出）
• 現代工作流建議：僅導出圖片，配合 CSS Grid/Flex 佈局，棄用表格切片