Photoshop CC 與前端那些事

 　　Photoshop 是視覺設計師最強有力的武器之一，其實 Photoshop 也為前端開發同學帶來很多驚喜。

　　特別是從 Photoshop CC 版本開始，它變得越來越有趣。今天筆者就其中幾個新特性給大家介紹一下。如果您也有更多新的發現，請在下方留言與大家進行討論。

　　自動切圖(含WebP、SVG格式)：

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

　　請保持菜單“編輯->首選項->增效工具”中的“生成器”為啟用狀態;

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

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

　　常用技巧：

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

　　開啟 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 代碼與圖形的對應關系;

　　右擊圖層面板上的圖層，選擇“復制 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 的新功能。為什麼要在這裡說呢，因為它能輔助我們一秒居中對齊、一秒貼邊，這個非常實用。另外也建議設計師使用圖層顏色來標出改動位置，這樣前端開發同學便能快速定位圖層。