Photoshop CC 以降大幅強化前端協作功能，從「自動切圖」到「複製 CSS」，再到「圖層搜尋/隔離」，讓設計稿交付前端的流程順暢度大幅提升。本文精選 5 大必學功能，附操作步驟與進階技巧。

1. 自動切圖 —— 一鍵匯出多倍率、多格式

啟用：編輯 > 偏好設定 > 外掛模組 勾選「啟用產生器」；檔案 > 產生 > 圖像資源。

圖層命名規則：圖層名.png、200% logo@2x.png（視網膜圖）、icon.svg、photo.webp。存檔後，PSD 同目錄下自動生成 檔名-assets 資料夾，內含所有切圖。

進階：啟用 WebP / SVG 輸出

在使用者資料夾建立 generator.json：

{ "generator-assets": { "svg-enabled": true, "webp-enabled": true } }

Win: %USERPROFILE%；Mac: $HOME。WebP 僅限 macOS 原生支援，Windows 需安裝外掛。

2. 複製 CSS —— 形狀秒變程式碼

右鍵圖層/群組 →「複製 CSS」。可獲取：尺寸、位置、背景色/漸層、邊框、陰影、字體樣式等 CSS 代碼。

痛點與增強方案

原版輸出含大量冗餘（position、z-index、left/top），且漸層、陰影代碼不夠優雅。推薦安裝 ISUX 團隊開源擴充功能 PhotoshopCopyCSS，優化項目：

• 自動識別 CSS Sprite，輸出 background-position
• 優化 CSS3 漸層、文字、邊框、陰影語法
• RGB 自動轉十六進位，移除冗餘屬性

3. 圖層管理與搜尋 —— 巨型 PSD 的救星

圖層面板頂部搜尋框支援：種類（像素/文字/形狀/智慧物件）、名稱、效果、模式、屬性等多維篩選。配合「隔離圖層」（圖層面板選單 → 隔離圖層），移動工具點擊畫布即可只顯示該圖層，極適合整理百層以上的 PSD。

4. WebP 外掛 —— 行動端傳輸利器

WebP 由 Google 開發，體積比 JPEG 小 25-35%，Chrome 原生支援。PS CC macOS 內建輸出；Windows 需下載 WebPShop 外掛 安裝至 Plug-ins 資料夾，另存為即可選 WebP 格式。

5. 動作條件判斷 —— 批次處理更聰明

錄製動作時插入「條件」：如「若文件為 RGB 則執行動作 A，否則執行 B」。解決同一批次中不同色彩模式、尺寸需不同處理的問題。

6. 智慧參考線 + 圖層顏色標記

智慧參考線自動吸附對齊、等距分佈；圖層右鍵指派顏色（如紅=待修改、綠=確認），前端開箱即見修改重點，溝通成本歸零。

總結

掌握這 5+1 功能，設計師能輸出「前端可直接用」的切圖與代碼，前端工程師少寫大量樣板 CSS，雙贏。建議團隊建立「PSD 交付規範」：圖層命名規則、切圖後綴、CSS 複製流程標準化，讓工具紅利最大化。