前言

Photoshop CC 14.1.2+ 內建「智能切圖」：圖層/群組命名即輸出規則，存檔 PSD 同步生成切圖資料夾，免去手動切片匯出，前端協作效率大增。

啟用方式

選單「檔案 > 產生 > 圖像資產」勾選啟用。

命名語法與輸出規則

命名範例	輸出結果
icon.png	單一 PNG
icon.png, icon.jpg, icon.svg	同層多格式並存（逗號分隔）
icon.png8, icon.png24, icon.png32	同層不同位深 PNG（8/24/32 bit）
photo.jpg50%	JPG 品質 50%（預設 90%）
200% logo.png	@2x 視網膜圖（支援 50%-1000%）
group/ 結尾	群組整體輸出（含子圖層合成）

實戰建議

• 圖層命名採 BEM 或功能語義（如 btn/primary/normal.png），切圖資料夾結構即為專案資產結構。
• 智能物件圖層同樣支援，雙擊源檔修改後存 PSD 即同步更新切圖。
• 搭配「連結智能物件」實現跨檔共用元件切圖。

常見坑點

• 圖層名含空格/特殊符號可能導致匯出失敗，建議僅用英數、底線、連字號、斜線、百分號。
• 圖層可見性關閉時不輸出，適合做狀態切圖（hover/active 另建圖層控制可見性）。
• CC 2014 以前版本無此功能，請更新至 14.1.2 以上。

註：更多教程請關注三聯 Photoshop 欄目，群號 311270890 歡迎加入。