懂代碼設計更容易！PS CC與前端那些事

Photoshop CC與前端那些事（一）

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

Photoshop CC與前端那些事

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

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

　　1、請保持菜單“編輯->首選項->增效工具”中的“生成器”爲啓用狀態；

　　2、依次點擊菜單“文件->生成->圖像資源”，確認該菜單項已被勾選；

圖01

圖02

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

圖03

　　常用技巧：

　　1、見下圖；

圖04

　　2、@2x Retina圖片的輸出，在圖層前添加200%即可，如200% [email protected] ;

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

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

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

　　二、複製CSS

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

圖05

　　1、右擊圖層面板上的圖層，選擇“複製CSS”，或點擊菜單“圖層->複製CSS”；

　　2、多個圖層的批量獲取，請選擇多個圖層，執行Ctrl+G，將所選圖層轉爲圖層組。然後在該組上右擊，選擇“複製CSS”，即可批量獲取CSS代碼。

　　3、智能對象暫不支持“複製CSS”功能，您可以柵格化該圖層再來使用。

　　當前的版本的此功能，包含了很多冗餘信息和不太友好的寫法，可能不是大家真正需要的。於是 ISUX 前端團隊改進了這個功能，您可以下載“PhotoshopCopyCSS ”來增強Photoshop CC自帶的“複製 CSS”功能，提升CSS代碼的真正採用率；目前的優化有：

　　* 自動識別CSS Sprite圖片，獲取background-position信息；

　　* 自動識別是否圖標；

　　* 優化CSS3漸變、文字、邊框、陰影等CSS代碼；

　　* 優化RGB顏色值成十六進制顏色；

　　* 去除冗餘CSS屬性，如position, z-index, left, top等。