Photoshop 是視覺設計師最強有力的武器之一，其實 Photoshop 也為前端開發同學帶來很多驚喜。特別是從 Photoshop CC 版本開始，它變得越來越有趣。今天筆者就其中幾個新特性給大家介紹一下。如果您也有更多新的發現，請在下方留言與大家進行討論。

自動切圖（含WebP、SVG格式）：

前端開發人員經常需要將很多圖層切出成獨立的圖片。有了自動切圖功能，無需花更多時間來切圖了。只需在圖層名后添加相應格式后綴（如.png)，即可自動輸出所需格式的圖片。

請保持菜單“編輯->首選項->增效工具”中的“生成器”為啟用狀態； 依次點擊菜單“文件->生成->圖像資源”，確認該菜單項已被勾選；

試著修改某個圖層命名(如 iTunes.png)，然后檢查當前 psd 文件所在目錄下的“文件名-assets” 的目錄，打開此目錄，發現 iTunes.png 已經躺在里面了。

常用技巧：

@2x Retina 圖片的輸出，在圖層前添加 200% 即可，如 200% logo@2x.png ;

開啟 WebP、SVG 格式的自動輸出： 新建 generator.json 文件，內容如下：

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

將此配置文件拷貝至： Windows: (Win+R后輸入 %USERPROFILE% )目錄下，如 C:Usersxxx Mac OS: $HOME 如“Macintosh HD>Users>xxx” 目錄下 WebP 輸出暫只支持 Mac OS。

復制 CSS

Photoshop CC 終于推出了“復制CSS” 功能。它能讓開發人員快速獲取形狀的 CSS 代碼。其實不少設計師也很想學習 CSS，有了這個功能，可以讓這些愛學習的設計師熟悉 CSS 代碼與圖形的對應關系；