為什麼需要切片？

大尺寸網頁圖片載入緩慢，影響用戶體驗。切片工具可將大圖分割為多個小圖，分批載入並重組，同時支援針對每一切片單獨優化壓縮，平衡速度與品質。

切片工具基礎操作

啟用方式

按 C 選取裁剪工具，右鍵切換為切片工具，或在工具列直接選取。

三種切片模式

• 正常：自由拖曳決定大小位置。
• 固定長寬比：預設比例拖曳。
• 固定大小：指定寬高像素值。

精確切片技巧

需精確分割時，先拉出參考線標記位置，再選「基於參考線建立切片」自動生成。亦可用切片選取工具微調。

編輯切片資訊

雙擊切片或右鍵選「編輯切片選項」，可設定：名稱、URL 連結、目標視窗 (_blank/_self)、Alt 文字、提示訊息、精確座標尺寸。

輸出儲存為 Web 格式

1. 檔案 > 存儲為 Web 所用格式。
2. 在對話框中為每一切片設定檔案類型 (JPG/PNG/GIF) 與品質。
3. 點擊儲存，彈出「儲存優化結果」：選擇 HTML 和圖像、預設設定、所有切片。

實戰應用：九宮格圖片

微博九宮格即利用切片將一張圖等分為九塊，上傳後自動拼合。製作時建立 3×3 參考線，一鍵生成切片即可。

結語

切片工具是網頁設計師的必備技能，善用它能大幅提升頁面載入效能。更多教程請關注三聯 Photoshop 專欄，QQ 群：339853166。