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

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

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

常用技巧：

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

開(kāi)啟 WebP、SVG 格式的自動(dòng)輸出： 新建 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。

2.復(fù)制 CSS

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

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

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

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

當(dāng)前的版本的此功能，包含了很多冗余信息和不太友好的寫法，可能不是大家真正需要的。于是 ISUX 前端團(tuán)隊(duì)改進(jìn)了這個(gè)功能，您可以下載“PhotoshopCopyCSS”來(lái)增強(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 等。

3圖層管理

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

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

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

4 WebP 插件

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

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

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

5 動(dòng)作條件

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

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

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

6. 切圖技巧

傳統(tǒng)的切圖流程

確定好了切圖方案之后，對(duì)于大的 PSD 來(lái)說(shuō)，往往新建一個(gè)畫布，然后將 PSD 里面需要切出來(lái)的圖層拖動(dòng)到新畫布中，使用“剪裁”工具把這個(gè)圖層進(jìn)一步的剪切，變成最小內(nèi)容，剪去多余的部分。然后打開(kāi)“存儲(chǔ)為 Web 所用格式”對(duì)話框，根據(jù)圖片選擇格式、壓縮比以及是否是漸進(jìn)式等等，然后選擇路徑修改文件名。 這樣的缺點(diǎn)很明顯，有時(shí)候圖標(biāo)或者圖層有半透明的陰影，這時(shí)候?qū)τ谶吔绲慕缍ň筒缓锰幚?，此外需要大量重?fù)的剪裁、返回上一步、繼續(xù)剪裁、保存圖片等等。人工操作過(guò)多，導(dǎo)致效率底下，成本增加，大量時(shí)間浪費(fèi)在基礎(chǔ)重復(fù)的操作中。

改進(jìn)后的切圖流程

計(jì)算機(jī)就是為了幫助人類完成大量重復(fù)的工作，有沒(méi)有自動(dòng)切圖的功能或插件呢？為此我也在不斷的搜索。 然后有一天就發(fā)現(xiàn)了 Photoshop 內(nèi)置的自動(dòng)切圖腳本。位于“文件”－》“腳本”－》“將圖層導(dǎo)出文件”。意思就是將你的圖層分層分別導(dǎo)出為文件，而且還支持剪裁圖片和格式選擇等等。

選擇剪裁圖片之后，將會(huì)自動(dòng)給你剪裁到最小狀態(tài)，由于是機(jī)器剪裁，所以精度非常高，半透明的陰影也完全 OK。 于是，改進(jìn)后的切圖流程就變成了：從 PSD 中找到要剪切出來(lái)的圖層，然后拖動(dòng)到新畫布上面，柵格化文字或者合并組、合并圖層，將要剪切出來(lái)的圖片們合并到一起變成一個(gè)圖層，然后使用這個(gè)腳本自動(dòng)導(dǎo)出，命名一下圖片。 這個(gè)腳本的不好就在于命名，輸出的時(shí)候命名比較亂，需要自己修改一下，但是已經(jīng)非常自動(dòng)化操縱了，相見(jiàn)恨晚。(圖層比較混亂的還是建議用傳統(tǒng)方法，此處只是介紹這種方法！)

最新評(píng)論