當(dāng)前位置：首頁>ps入門教程>ps基礎(chǔ)教程>技巧教程>教程內(nèi)容

ps CC自動切圖與前端CSS代碼(3)

來源：藝設(shè)網(wǎng) 作者：情非得已學(xué)習(xí)：42577人次

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

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

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

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

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

常用技巧：

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

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

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

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

復(fù)制 CSS

Photoshop CC 終于推出了“復(fù)制CSS” 功能。它能讓開發(fā)人員快速獲取形狀的 CSS 代碼。其實不少設(shè)計師也很想學(xué)習(xí) CSS，有了這個功能，可以讓這些愛學(xué)習(xí)的設(shè)計師熟悉 CSS 代碼與圖形的對應(yīng)關(guān)系；

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

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

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

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

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

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

圖層管理

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