工具認知

切片工具 是網頁設計、UI 切圖的核心工具。它能將單一畫布劃分為多個矩形區域，每個切片可獨立設定格式、品質、命名，Ctrl+Shift+Alt+S 一鍵批次匯出為獨立圖檔，完美解決「一張設計稿產出 N 張切圖」的需求。

標準操作流程 8 步走

步驟 1：開啟素材、建立工作副本

開啟設計稿，Ctrl+J 複製背景圖層（保護原圖、便於後續調整）。

步驟 2：選取切片工具劃分區域

工具列選取「切片工具」（快捷鍵 C），在畫布上拖曳劃分所需區域。可建立多個切片，自動編號（01, 02…）。

步驟 3：開啟「存儲為 Web 所用格式」

選單「檔案」→「存儲為 Web 所用格式」（Ctrl+Shift+Alt+S）。

步驟 4：統一設定輸出格式與品質

• 格式：JPEG（照片類）或 PNG-24（需透明背景）
• 品質：高 (60-80) 平衡體積與畫質
• 勾選「優化」、「轉換為 sRGB」

步驟 5：批次匯出

點擊「存儲」→ 選擇資料夾 → 「存儲類型」選「所有切片」或「選定切片」→ 確定。PS 自動依切片編號命名輸出（如 `image_01.jpg`, `image_02.jpg`）。

進階技巧

• 基於圖層建立切片：選中圖層 → 選單「圖層」→「新建基於圖層的切片」，像素邊界自動成切片，極適合圖標、按鈕等獨立元素。
• 切片命名規則：雙擊切片編號可重命名，匯出時直接作為檔名，前端對接零成本。
• 切片組合：選中多個切片 → 右鍵「合併切片」，生成大區域切片（如整組導航欄）。
• HTML 輸出：存儲對話框底部「格式」選「HTML 和圖片」，一鍵生成含切片定位的 HTML 頁面，舊版網頁重構利器。

常見坑點避雷

1. 切片重疊會導致匯出畫面重疊，請用「切片選取工具」微調邊緣確保無縫貼合。
2. 切片範圍超出畫布會產生透明區域，檢查切片邊界是否緊貼畫布邊緣。
3. 大量切片匯出慢，建議先合併圖層群組再建立基於圖層的切片，減少運算量。

掌握切片工具全流程，從設計稿到前端切圖，中間零溝通成本。立即打開 PS 練習，建立您的切圖標準化 SOP！