AI切圖工具(Layer Exporter)

Layer Exporter是一款適用Adobe Illustrator的切圖軟件，這款軟件可以協(xié)助客戶將AI涂層各自導(dǎo)為JPG、PNG、SVG等格式。與此同時轉(zhuǎn)化成一份.JSON文檔，含義圖型的很多數(shù)據(jù)信息，可供開發(fā)設(shè)計參照。

軟件特色

導(dǎo)出來全部涂層為SVG，PNG或JPG

并轉(zhuǎn)化成對應(yīng)的HTML和CSS

使用方法

1、大家使用AI手機(jī)軟件，再開啟用AI或PS等別的軟件開發(fā)好的待切網(wǎng)頁頁面設(shè)計稿文檔。隨后依據(jù)開啟的設(shè)計稿文檔的合理布局、背景色和用圖，開展切圖以前的肚子里剖析、整體規(guī)劃，如應(yīng)對設(shè)計稿大家究竟該怎么切才實際效果最好是，更快，且切得又最精確，什么原素務(wù)必用切圖的辦法來得到，什么原素并不是必需的；為了更好地切圖便捷，什么文本務(wù)必臨時被掩藏或除掉，便于于日后在這里取代上在網(wǎng)上動態(tài)文字和連接，這些。下面就是我準(zhǔn)備好一張用AI設(shè)計方案好的待切某首頁（注，這也是個AI源代碼）。

2、我們要使用的切圖專用工具坐落于AI菜單欄下端，與PS一樣也是有有兩個，即一個是切片專用工具，另一個是切片挑選專用工具。左側(cè)有一個小按鍵，你按著它這兩個專用工具選擇項便會顯現(xiàn)出來。

3、對比圖中，網(wǎng)頁頁面背景色若為單色，我們可以不考慮到切片，由于在設(shè)計網(wǎng)頁可以在CSS中選用界定一個class顏色值的方法來做添充，如果是有標(biāo)準(zhǔn)的漸變色，可依據(jù)漸變色的方位不一樣選用切一個PX尺寸的圖片，供在網(wǎng)頁設(shè)計中開展橫著或豎向鋪平添充的用處；

4、下面就對全部LOGO和右下角廣告圖片的大切片。如箭頭符號所說的地區(qū)。

5、最終，便是對文本地區(qū)的切圖。

6、為了更好地切得準(zhǔn)，切得的尺寸地區(qū)適度，務(wù)求與設(shè)計稿完全一致，還能夠開展如下所示調(diào)整實際操作。一是按ctr R待尺標(biāo)出去后往下往右邊拉參照線，由于參照線在電腦鼠標(biāo)挨近的過程中有過濾作用，因此切圖不易切錯部位，這一點與PS切圖徹底一樣。二是可對被挑選切片地區(qū)的寬度規(guī)格，根據(jù)更改標(biāo)值來調(diào)節(jié)。

7、待切片地區(qū)明確好后，下面就對各地區(qū)的保留了。但是，必須關(guān)鍵提示的是，在儲存以前，務(wù)必將不期待以圖片展現(xiàn)的文本掩藏或臨時刪掉。

8、切完圖以后就到最重要的流程了，如下圖所顯示，選擇文件下邊的儲存為WEB和機(jī)器設(shè)備常用格式，最好是能記牢鍵盤快捷鍵。

9、切片的儲存格式有：jpg、gif和png格式的各種各樣不一樣質(zhì)量呈現(xiàn)方式，如格式設(shè)置為JPEG，它便是JPG，gif的便是gif的。

10、好似PS切圖最終的儲存一樣，關(guān)鍵是質(zhì)量的設(shè)置，大家都了解假如一張圖片越大它在網(wǎng)絡(luò)上開啟的效率就變慢，在我們把圖片的質(zhì)量設(shè)的越低，它的高低就越小，可是假如質(zhì)量很差，圖片會變模糊不清，因此一般狀況下如果是在網(wǎng)上應(yīng)用的圖片，質(zhì)量可以設(shè)定60，既保證圖片較小，但不容易模糊不清。這一標(biāo)值由你自己設(shè)定，是大是小，實際看著你的規(guī)定，試一下就知道。一樣，這兒也有一個必須特別注意的地區(qū)，難題就是你僅僅對在其中一個切片設(shè)定質(zhì)量，別的切片又要再次設(shè)定，因此存的情況下最好是檢查一下。

11、一切設(shè)定好后，點一下儲存會表明之上頁面。格式選擇項挑選HTML和圖象，默認(rèn)設(shè)置是圖象的，那樣大家就能獲得網(wǎng)頁源代碼了。這兒必須強(qiáng)調(diào)的是，切片儲存時，可以儲存所有的，還可以只儲特定的，隨主要用途所有。

12、存好后，便可獲得一個圖片文件夾名稱和一個html網(wǎng)頁文檔。很有可能你一直在你電腦發(fā)現(xiàn)的文件圖標(biāo)跟我這一不一樣，這一沒有關(guān)系，這具體是由于大家所選擇的默認(rèn)瀏覽器很有可能不一樣。

13、圖象文件夾名稱中儲存的就是大家所切的切片圖文檔,在制作網(wǎng)頁的環(huán)節(jié)中，還得將這種上傳文件至網(wǎng)絡(luò)環(huán)境才可以呈現(xiàn)詳細(xì)網(wǎng)頁頁面,他人才會看的到。

14、用DreamWeaver、frontpage、text文本軟件都能夠開啟這一html文檔，并可見到如下所示頁面。到此，大家急必須獲得lt;tablegt;....lt;/tablegt;早已展現(xiàn)在了大家面前。如大白框中標(biāo)志的就是。最后產(chǎn)生具體網(wǎng)頁頁面時，還得更換全部圖片的儲存詳細(xì)地址，或給有關(guān)圖片加上上有關(guān)連接詳細(xì)地址才可以詳細(xì)展現(xiàn)。

15、如用IE打開瀏覽器這一html文檔，大家以前的這一AI設(shè)計稿，就以網(wǎng)頁頁面的方式展現(xiàn)出來。這兒必須注重的是，切圖獲得的html文檔，僅僅網(wǎng)頁設(shè)計的最為主要的一點點工作中罷了，可省用幾個時間和勞動量呢，只有是智者見智，仁者見仁，不太好說。