AI切圖工具(Layer Exporter)

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

軟件特色

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

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

使用方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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