前端切圖神器(Avocode)

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

功能特色：

分享設(shè)計，邀請團(tuán)隊成員

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

評論、注釋與討論視覺更改

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

通過Slack或郵件來接收改動提醒

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

管理項(xiàng)目許可

邀請團(tuán)隊成員、自由職業(yè)者和合同工，管理他們在您團(tuán)隊特定項(xiàng)目中的權(quán)限。通過公開鏈接向第三方（例如客戶）分享設(shè)計預(yù)覽，并讓他們評論。

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

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

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

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

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

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

使用方法：

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

,這個按鈕代表著你可以拖動的整個文件，第二個按鈕

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

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

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

第三個是測量按鈕

這個可以獲得選中圖層的大小和周圍的間距大小。

第四個是取色按鈕

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

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

第6個按鈕是備注按鈕

這個功能就不介紹了。