PS 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:\Users\xxx Mac OS: $HOME 如「Macintosh HD>Users>xxx」 目錄下 WebP 輸出暫只支持 Mac OS。

複製 CSS

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

右擊圖層面板上的圖層，選擇「複製 CSS」，或點擊菜單「圖層->複製 CSS」；

多個圖層的批量獲取，請選擇多個圖層，執行 Ctrl+G，將所選圖層轉爲圖層組。而後在該組上右擊，選擇「複製 CSS」，便可批量獲取 CSS 代碼。

智能對象暫不支持「複製 CSS」功能，您能夠柵格化該圖層再來使用。

當前的版本的此功能，包含了不少冗餘信息和不太友好的寫法，可能不是你們真正須要的。因而 ISUX 前端團隊改進了這個功能，您能夠下載「PhotoshopCopyCSS」來加強 Photoshop CC 自帶的「複製 CSS」功能，提高 CSS 代碼的真正採用率；目前的優化有：

* 自動識別 CSS Sprite 圖片，獲取 background-position 信息；
* 自動識別是否圖標；
* 優化 CSS3 漸變、文字、邊框、陰影等 CSS 代碼；
* 優化 RGB 顏色值成 十六進制顏色；
* 去除冗餘 CSS 屬性，如 position, z-index, left, top 等。

您也能夠反饋更好的建議，讓這個功能真正爲你們所用。

圖層管理

前端開發同窗接手的 psd 文檔，每每有大量圖層，咱們須要對其進行整理。例如刪除空白、鎖定、文本等圖層。咱們還能夠經過圖層類型、名稱、效果、屬性等條件進行快速定位圖層。

 

 
  

使用此功能能夠很方便定位到當前選定圖層，很是適合含有大量圖層的 psd 文檔。

另外隔離圖層也是個很不錯的功能。開啓隔離圖層功能以後，咱們能夠經過移動選擇工具，點選畫布上的內容，找出咱們須要的圖層將其整理成一個獨立的 psd 文件。

WebP 插件

WebP 是 Google 爲減小數據量、加速網絡傳輸的目的而開發的圖片格式。特別適合移動端圖片的傳輸。大大節省帶寬，目前只有 Google Chrome 瀏覽器對其原生支持。

Photoshop CC 的 Mac OS 版自帶輸出 WebP 功能。Windows 下您能夠下載此插件來輸出 WebP 格式。安裝後，能夠在 Photoshop 菜單「文件->另存爲」 對話框中選擇「WebP格式圖片」。

WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win

動做條件

Photoshop CC 新增了動做條件，能夠根據不一樣條件執行命令或其餘動做。

智能參考線/使用圖層顏色

這兩個功能並非 Photoshop CC 的新功能。爲何要在這裏說呢，由於它能輔助咱們一秒居中對齊、一秒貼邊，這個很是實用。另外也建議設計師使用圖層顏色來標出改動位置，這樣前端開發同窗便能快速定位圖層。

 

請更新至 Photoshop CC 14.2