前言：切片是設計交付前端的橋樑

切片工具將大尺寸設計稿拆解為網頁所需的獨立圖片資產（按鈕、圖標、Banner、模組背景等），並自動生成 HTML/CSS 參考代碼。掌握切片技巧，能大幅減少切圖錯誤、提升前端還原度、縮短專案交付週期。

界面與基礎操作

• 工具欄：切片工具 (C)、切片選取工具 (Shift+C)。
• 面板：視窗 → 切片 顯示所有切片編號、名稱、尺寸、URL、目標、Alt 標籤等屬性。
• 視圖：視圖 → 顯示 → 切片編號 開啟畫布編號標註。

核心技巧 1：基於參考線的精準切片

1. 視圖 → 新建參考線版面 設定欄數/間距/邊距，建立標準網格。
2. 視圖 → 吸附 → 參考線 開啟。
3. 選取切片工具，點擊選單「基於參考線的切片」，PS 自動依參考線生成切片，編號從左上到右下排序，零誤差、零像素偏移。

核心技巧 2：圖層基礎切片（一鍵生成）

1. 在圖層面板右鍵目標圖層/組 → 從圖層新建切片。
2. 切片邊界自動貼合圖層像素邊緣（含透明像素），命名自動取圖層名。
3. 適合：圖標、按鈕、獨立模組等單一圖層/組元素。

核心技巧 3：切片命名與匯出設定規範

屬性	設定建議	說明
名稱	英文小寫+底線：`btn_primary_normal`	前端直用作文件名/CSS class，避免中文編碼問題
URL	留空或 `#`	僅做圖片資產時無需連結
目標	`_self`	預設值
Alt 標籤	語義化描述：`主要操作按鈕預設狀態`	無障礙/SEO 必需
格式	PNG-32（透明）/ JPEG 高品質（照片）	按內容決定
品質	JPEG 60-80；PNG 無品質選項	平衡體積/畫質

核心技巧 4：存儲為 Web 所用格式批次輸出

1. 檔案 → 存儲為 Web 所用格式 (Ctrl+Alt+Shift+S)。
2. 切片面板中 Shift+點擊 全選切片。
3. 右側預設下拉選擇對應格式/品質，或按住 Alt 點擊單一切片套用不同預設。
4. 點擊「儲存」，對話框中：

• 儲存類型：「只儲存圖片」（不生成 HTML）
• 切片：「所有切片」 或「選定切片」
• 命名：「文件名_切片名」，確保唯一性。

核心技巧 5：高 DPI / Retina 切片策略

1. 設計稿按 @2x 或 @3x 尺寸製作（如 750×1334 px 為 iPhone 6/7/8 @2x）。
2. 切片後，存儲為 Web 時勾選「縮放」→ 輸入 50%（@2x 輸出 @1x）或 33.33%（@3x 輸出 @1x）。
3. 命名規範：`icon_home@2x.png`、`icon_home@3x.png`，前端直接引用 `srcset`。

常見坑點與避雷

• 切片邊緣 1px 空白：確保圖層像素邊緣對齊像素網格（視圖 → 對齊 → 像素網格），或切片手動微調 0.5px 內縮。
• 切片編號亂序：重新排序：切片選取工具選中 → 右鍵 → 「按位置排序」。
• 匯出圖片模糊：檢查源圖層是否為智慧物件且未放大超過 100%；匯出時勿勾選「縮放」放大。
• GIF 動畫切片：需在時間軸面板製作幀動畫，再「存儲為 Web」選 GIF，切片僅對靜態幀有效。

進階：切片資產管理自動化

• Generator 技術（PS CC+）：圖層命名加後綴 `.png`、`.jpg`、`.svg`，檔案 → 產生 → 圖片資產，即時輸出至資料夾，免去手動切片。
• 腳本批次：`File → Scripts → Export Layers to Files` 批量匯出圖層為獨立檔案。
• 插件輔助：Cut&Slice me、Zeplin、Figma（設計稿上傳後自動切片標註）。

結語

切片不是終點，是起點。規範的切片命名、格式選擇、Retina 策略、自動化輸出，能讓設計稿無縫流向前端代碼庫。建議團隊制定《切片輸出規範文件》，納入專案驗收清單，從源頭杜絕「切圖返工」。