Photoshop CC 針對前端開發工作流推出多項革命性功能，從自動切圖、CSS 代碼生成到圖層管理優化，大幅縮短設計還原開發週期。本文系統梳理實戰核心技巧，助設計師與前端無縫銜接。

一、自動切圖 —— 一鍵輸出多格式切圖

啟用路徑：編輯 → 偏好設定 → 增效工具 → 勾選「生成器」；檔案 → 產生 → 圖像資產。

圖層命名規則：

• 圖層名.png → 自動輸出 PNG
• 200% logo@2x.png → 輸出 2x 視網膜圖
• 支援 WebP、SVG 格式 (需在用戶目錄放置 generator.json 配置)

二、複製 CSS —— 設計稿秒變樣式代碼

右鍵圖層/圖層組 → 「複製 CSS」，即獲取包含尺寸、顏色、漸層、陰影、邊框、文字屬性的 CSS 代碼。批量操作：多圖層 Ctrl+G 成組 → 右鍵組複製 CSS。

進階增強：官方版輸出冗餘屬性多 (position、z-index 等)，推薦安裝 ISUX 團隊開發的 PhotoshopCopyCSS 插件，優化亮點：

• 自動識別 CSS Sprite 輸出 background-position
• 優化 CSS3 漸層、陰影、邊框寫法
• RGB 自動轉十六進制色值
• 移除冗餘定位屬性

三、圖層管理與隔離 —— 大型 PSD 整理利器

• 篩選面板：依類型、名稱、效果、屬性快速定位圖層。
• 隔離圖層：開啟後用移動工具點選畫布元素，自動高亮對應圖層，可拖出獨立 PSD。

四、WebP 格式支援

Google 推出的新一代圖片格式，體積較 JPEG 減 25-35%，適合移動端。Mac 版 PS CC 原生支援；Win 需安裝 WebP for Photoshop v0.5b5 外掛，另存為對話框即可選擇 WebP。

五、動作條件 —— 批次處理智能判斷

錄製動作時可添加「若...則...」條件判斷 (如：若文件寬度 > 1000px 則執行動作 A，否則執行 B)，實現差異化批次自動化。

六、智能參考線與圖層顏色標記

• 智能參考線：自動吸附對齊、等距分佈，一秒居中、一秒貼邊。
• 圖層顏色：右鍵圖層賦予顏色標籤 (紅/黃/綠/藍)，標註修改項、狀態、優先級，前端一眼定位。

總結：建立設計交付規範

善用上述功能，配合團隊約定的圖層命名規範 (如 icon-home@2x.png、btn-primary-bg.svg)、色值管理 (儲存為色板庫)、組件化圖層結構，即可構建高效的「設計 → 開發」無縫管線。PS CC 不只是繪圖工具，更是前端協作的生產力中樞。