Avocode是一款優(yōu)秀的看圖設(shè)計軟件。擁有包括設(shè)計、導(dǎo)出素材、獲取圖像規(guī)格等在內(nèi)的多種功能，軟件可以以圖片形式導(dǎo)出設(shè)計圖層，將文字圖層導(dǎo)出為純文本、圖形或html代碼，同時還支持自定義代碼輸出自定義變量。

功能介紹

1、直接打開.psd和.sketch文件而不啟動Photoshop和Sketch

Avocode能自行渲染Photoshop和Sketch設(shè)計。因此，您可以在任何操作系統(tǒng)上打開與檢查您上傳到Avocode的所有設(shè)計，無需其他設(shè)計工具。

2、導(dǎo)出適用于網(wǎng)頁、IOS或Android程序的代碼

生成包含圖層和字體樣式的簡潔代碼(CSS，Less，Sass，Less，SCSS，Stylus，React Native，CSS，JS，Swift和Android)，單位為px，pt，dp或rem，顏色為HEX, HEX8, HSLA，RGBA或UIColor。

3、將圖像導(dǎo)出為@4x或xxxhdpi分辨率

每個圖層都完全渲染，您可以將任何文件導(dǎo)出為PNG，JPEG，SVG或WEBP圖片格式，無需預(yù)先設(shè)定可導(dǎo)出文件或重命名圖層。插值矢量形狀，添加更多的分辨率變量以適應(yīng)任何桌面、IOS或Android屏幕。

4、測量，不要目測

馬上獲知任何圖層的大小或圖層之間的距離。選擇多個圖層并測量它們與其他圖層之間的距離。查看設(shè)計指南，或創(chuàng)建自己的指南來檢查對齊，或查看不同對象之間的距離。

5、從每個像素中手動選取 #BADA55顏色

手動復(fù)制顏色并轉(zhuǎn)換……這真是上個世紀(jì)的做法了。只需選擇一種顏色，顏色代碼將會立即添加到剪貼板，讓您可以復(fù)制粘貼到任何需要的位置。

6、將文字圖層導(dǎo)出為純文本、圖像或HTML代碼

當(dāng)您選中文字圖層時，可以將它導(dǎo)出為圖像，復(fù)制純文本或復(fù)制帶HTML標(biāo)簽的文本�！皹邮�(STYLES)”面板將顯示所有的圖層信息，例如字體家族，字體粗細(xì)和字體大小等。

7、自定義代碼輸出并定義變量

隱藏屬性并重新調(diào)整代碼行。創(chuàng)建替換規(guī)則并將任何值(顏色，字體，漸變，大小，距離)定義為變量都將自動顯示在導(dǎo)出的代碼中。

軟件特色

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

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

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

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

通過郵件來接收改動提醒

當(dāng)有人上傳新設(shè)計、新版本或發(fā)表新評論時，您將收到郵件通知。

管理項目許可

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

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

把設(shè)計上傳到Avocade云，與團隊一起同步版本與版本設(shè)置(項目平臺，設(shè)計尺寸與單元)。同時進(jì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ò)的情況下也可以訪問。

使用方法

1、注冊登錄之后。當(dāng)前需要創(chuàng)建一個文件夾。創(chuàng)建文件夾可以選擇你需要的切圖的類型，有IOS,ANDROID,WEB三種類型。我們這里選擇的WEB.

2、進(jìn)入之后可以選擇上傳按鈕上傳我們的psd文件，這里有一個問題，就是這是國外的軟件，服務(wù)器在國外，如果沒有科學(xué) 上網(wǎng)的話，上傳的速度會讓你痛不欲生，因此作為一個程序員科學(xué) 上網(wǎng)是非常重要的。

這里上傳了一個示例的簡歷psd

3、打開這個psd之后，可以看到很多工具欄。在界面中的左邊，有四個按鈕圖層、活動信息、版本記錄、psd的多種相關(guān)信息。上邊的工具欄是對psd進(jìn)行具體的切圖工作。右邊的工具欄顯示的是具體選中或者進(jìn)行操作的獲得的圖層信息。