ps CC自動(dòng)切圖與前端CSS代碼(2)

右擊圖層面板上的圖層，選擇“復(fù)制 CSS”，或點(diǎn)擊菜單“圖層->復(fù)制 CSS”；

多個(gè)圖層的批量獲取，請(qǐng)選擇多個(gè)圖層，執(zhí)行 Ctrl+G，將所選圖層轉(zhuǎn)為圖層組。然后在該組上右擊，選擇“復(fù)制 CSS”，即可批量獲取 CSS 代碼。

智能對(duì)象暫不支持“復(fù)制 CSS”功能，您可以柵格化該圖層再來使用。

當(dāng)前的版本的此功能，包含了很多冗余信息和不太友好的寫法，可能不是大家真正需要的。于是 ISUX 前端團(tuán)隊(duì)改進(jìn)了這個(gè)功能，您可以下載“PhotoshopCopyCSS”來增強(qiáng) Photoshop CC 自帶的“復(fù)制 CSS”功能，提升 CSS 代碼的真正采用率；目前的優(yōu)化有：

* 自動(dòng)識(shí)別 CSS Sprite 圖片，獲取 background-position 信息； * 自動(dòng)識(shí)別是否圖標(biāo)； * 優(yōu)化 CSS3 漸變、文字、邊框、陰影等 CSS 代碼； * 優(yōu)化 RGB 顏色值成 十六進(jìn)制顏色； * 去除冗余 CSS 屬性，如 position, z-index, left, top 等。

您也可以反饋更好的建議，讓這個(gè)功能真正為大家所用。

前端開發(fā)同學(xué)接手的 psd 文檔，往往有大量圖層，我們需要對(duì)其進(jìn)行整理。例如刪除空白、鎖定、文本等圖層。我們還可以通過圖層類型、名稱、效果、屬性等條件進(jìn)行快速定位圖層。

使用此功能可以很方便定位到當(dāng)前選定圖層，非常適合含有大量圖層的 psd 文檔。

另外隔離圖層也是個(gè)很不錯(cuò)的功能。開啟隔離圖層功能之后，我們可以通過移動(dòng)選擇工具，點(diǎn)選畫布上的內(nèi)容，找出我們需要的圖層將其整理成一個(gè)獨(dú)立的 psd 文件。

WebP 插件

WebP 是 Google 為減少數(shù)據(jù)量、加速網(wǎng)絡(luò)傳輸?shù)哪康亩_發(fā)的圖片格式。特別適合移動(dòng)端圖片的傳輸。大大節(jié)省帶寬，目前只有 Google Chrome 瀏覽器對(duì)其原生支持。

Photoshop CC 的 Mac OS 版自帶輸出 WebP 功能。Windows 下您可以下載此插件來輸出 WebP 格式。安裝后，可以在 Photoshop 菜單“文件->另存為” 對(duì)話框中選擇“WebP格式圖片”。

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

Photoshop CC 新增了動(dòng)作條件，可以根據(jù)不同條件執(zhí)行命令或其他動(dòng)作。

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

這兩個(gè)功能并不是 Photoshop CC 的新功能。為什么要在這里說呢，因?yàn)樗茌o助我們一秒居中對(duì)齊、一秒貼邊，這個(gè)非常實(shí)用。另外也建議設(shè)計(jì)師使用圖層顏色來標(biāo)出改動(dòng)位置，這樣前端開發(fā)同學(xué)便能快速定位圖層。