前端切圖神器(Avocode)

作為一個(gè)合格的前端，切圖技能是必不可少的，這里西西給廣大的前端開(kāi)發(fā)人員提供了一款前端切圖神器Avocode，這款軟件比起Photoshop要輕便的多，而且切圖效率也非常高，可以讓你告別繁瑣的切圖工作。

功能特色：

分享設(shè)計(jì)，邀請(qǐng)團(tuán)隊(duì)成員

讓其他開(kāi)發(fā)人員在Avocode中自行提取所有設(shè)計(jì)規(guī)定。您可以邀請(qǐng)需要查看、評(píng)論和上傳新設(shè)計(jì)的團(tuán)隊(duì)成員，或者與只需要評(píng)論的人分享公開(kāi)鏈接。

評(píng)論、注釋與討論視覺(jué)更改

討論所有事情，解釋您的想法，在設(shè)計(jì)的上方為同僚留下反饋意見(jiàn)。突出顯示任何位置，實(shí)時(shí)回復(fù)或解決團(tuán)隊(duì)成員或客戶的意見(jiàn)。

通過(guò)Slack或郵件來(lái)接收改動(dòng)提醒

當(dāng)有人上傳新設(shè)計(jì)、新版本或發(fā)表新評(píng)論時(shí)，您將收到Slack或郵件通知。您甚至可以將個(gè)人項(xiàng)目連接至專(zhuān)用的Slack #頻道。

管理項(xiàng)目許可

邀請(qǐng)團(tuán)隊(duì)成員、自由職業(yè)者和合同工，管理他們?cè)谀鷪F(tuán)隊(duì)特定項(xiàng)目中的權(quán)限。通過(guò)公開(kāi)鏈接向第三方（例如客戶）分享設(shè)計(jì)預(yù)覽，并讓他們?cè)u(píng)論。

將您的所有設(shè)計(jì)都集中在一個(gè)地方

把設(shè)計(jì)上傳到Avocade云，與團(tuán)隊(duì)一起同步版本與版本設(shè)置（項(xiàng)目平臺(tái)，設(shè)計(jì)尺寸與單元）。同時(shí)進(jìn)行無(wú)限量的項(xiàng)目。給團(tuán)隊(duì)成員隨時(shí)訪問(wèn)最新版本的權(quán)限。

同步所有的設(shè)計(jì)版本以了解哪個(gè)是最終版

Avocode能發(fā)揮一個(gè)最新存儲(chǔ)庫(kù)的作用，讓你可以恢復(fù)原先設(shè)置。您只需將Photoshop設(shè)計(jì)版本拖放到彼此頂部，或者同步同名Sketch畫(huà)板，Avocode就能將它們識(shí)別為新版本。

在任意操作系統(tǒng)上離線訪問(wèn)

用Windows打開(kāi)Sketch，或用Linux打開(kāi)PSD僅僅是Avocode的基礎(chǔ)功能之一。您打開(kāi)的每一個(gè)設(shè)計(jì)，都將被渲染出完美的像素效果并進(jìn)行下載，讓您在沒(méi)有連接網(wǎng)絡(luò)的情況下也可以訪問(wèn)。

使用方法：

現(xiàn)在著重的介紹一下上面的工具欄，第一個(gè)手形的按鈕

,這個(gè)按鈕代表著你可以拖動(dòng)的整個(gè)文件，第二個(gè)按鈕

有點(diǎn)像photoshop中的選擇按鈕，可以直接選擇psd中的一個(gè)圖層，當(dāng)我們選中某個(gè)圖層之后，我們就可以進(jìn)行我們切圖的工作的重頭戲。假如選中圖層中有一個(gè)標(biāo)題。

在右邊顯示關(guān)于這個(gè)標(biāo)題的css信息，這個(gè)css可以包含color、font-size、line-height、border-color、background-color等等。有了這些信息，寫(xiě)css就會(huì)相當(dāng)容易。

當(dāng)你需要這個(gè)圖層導(dǎo)出圖片當(dāng)背景，就可以右鍵選中導(dǎo)出圖片，某些情況下還支持svg格式，也可以支持base64。

第三個(gè)是測(cè)量按鈕

這個(gè)可以獲得選中圖層的大小和周?chē)�的間距大小。

第四個(gè)是取色按鈕

這個(gè)就用取色器直接吸取這個(gè)圖層的顏色。第五個(gè)是裁剪按鈕

這個(gè)也有點(diǎn)類(lèi)似photoshop的裁剪功能。

第6個(gè)按鈕是備注按鈕

這個(gè)功能就不介紹了。