? ? ? 以前做項(xiàng)目很多情況下都是自己設(shè)計(jì)界面然后通過ps切圖再輸出html頁面，這是一個(gè)常規(guī)的頁面輸出環(huán)節(jié)，如果這個(gè)環(huán)節(jié)是必須的話，那么我們還是可以考慮如何去優(yōu)化它，盡可能提升工作效率，對(duì)于前期界面視覺設(shè)計(jì)那是一個(gè)思考加創(chuàng)作的一個(gè)過程，那么在這里主要探討的是切圖環(huán)節(jié)，作為APP或網(wǎng)頁設(shè)計(jì)師是必須要涉及到的，當(dāng)一個(gè)高清圖設(shè)計(jì)好或交付到我們手上之后如何按規(guī)范高效率的輸出圖片或icon，當(dāng)然最有效的方法就是利用工具。

? ? ? ?類似切圖的工具網(wǎng)上有很多，這里推薦兩種比較好用的一個(gè)Cutterman，另一個(gè)是Zeplin，兩個(gè)都是PS切圖插件下載后直接安裝到PS中:

Cutterman

Cutterman插件界面

? ? ? 只需一鍵就能夠自動(dòng)將你需要的圖層進(jìn)行輸出，以替代傳統(tǒng)的手工切圖。 能夠自定義輸出圖片的尺寸和各種圖片格式，方便你在pc、ios、Android等端上使用。 iso和Android自定可以輸出不同分辨率的倍數(shù)圖片。傻瓜式操作，方便、快捷，容易易于上手。

一鍵式操作

Android平臺(tái)支持輸出各種分辨率大小圖片

IOS平臺(tái)支持輸出的單倍圖、雙倍圖

可以單獨(dú)輸出，也多個(gè)圖層組合輸出

也可以diy指定圖片大小輸出

? ? ? 這款切圖插件相信大家并不陌生或正在使用，總體來說使用非常方便，值得推薦，能夠?yàn)槲覀児?jié)省不少工作時(shí)間，但是不足的是不能做標(biāo)注，做標(biāo)注還需要借助于其它插件。說道標(biāo)注再來看看推薦使用的第二款切圖插件Zeplin。

Zeplin

Zeplin是國(guó)外的切圖插件，所有版面都是英文，但是英文單詞不難理解，基本上都能大概知道是什么意思，實(shí)在不行可以百度翻譯一下，這款切圖插件也是近期在做項(xiàng)目中接觸到的，用起來非常方便，操作也比較簡(jiǎn)單，不但能切各種分辨率或倍數(shù)的圖片，而且還能夠直接做標(biāo)注或注釋，同時(shí)它還有一個(gè)更重要的功能——團(tuán)隊(duì)協(xié)同工作功能，通過用戶注冊(cè)的賬號(hào)，可以將所有參與項(xiàng)目開發(fā)的人員加入到同一個(gè)工作項(xiàng)目組中（就像微信群一樣），你只需要在PS中操作一鍵切圖，后續(xù)的工作就不用你操心啦，系統(tǒng)會(huì)自動(dòng)將切好的圖片上傳到Zeplin客戶端中，開發(fā)人員可以直接通過客戶端或本插件生成的項(xiàng)目鏈接地址（前提要先登錄）下載圖片，并且在客戶端界面中可以看到標(biāo)注或注釋，真正解放雙手，提高工作效率，節(jié)省中間不必要的環(huán)節(jié)。早期這款軟件僅支持 Sketch，目前已支持Photoshop版本。

插件界面

同時(shí)提供客戶端下載，用戶可以從官網(wǎng)下載然后安裝到PC電腦上。

PC客戶端

高效的協(xié)同工作機(jī)制，Zeplin 可以讓團(tuán)隊(duì)成員一共參與整個(gè)原稿的交流工作，項(xiàng)目創(chuàng)建者只需輸入其他同事的郵箱或 Zeplin 賬戶名即可發(fā)出邀請(qǐng)。

IOS平臺(tái)支持輸出的單倍圖、雙倍圖或三倍圖

項(xiàng)目開發(fā)人員可以直接看到標(biāo)注或注釋，并自主下載所需要的切圖

可單獨(dú)下載或打包下載

點(diǎn)擊圖片可以查看每個(gè)元素的尺寸，間距，顏色等

?????? 目前這款插件不是免費(fèi)的，但是提供嘗鮮的免費(fèi)版也就是只能創(chuàng)建一個(gè)Project，要?jiǎng)?chuàng)建新的Project會(huì)替換當(dāng)前的Project或先刪除舊的Project，總之是一款非常不錯(cuò)的切圖插件，作為視覺設(shè)計(jì)師或前端開發(fā)者值得力薦。