layer exporter是一款非常好用的AI切圖工具插件，有了它以后，用戶(hù)就可以非常便捷的在電腦上進(jìn)行切圖了，支持導(dǎo)出不同的圖片格式和生成文件，歡迎大家到綠色資源網(wǎng)下載使用！

官方介紹

這款插件可以幫助用戶(hù)將AI圖層分別導(dǎo)為JPG、PNG、SVG等格式。同時(shí)生成一份.JSON文件，內(nèi)涵圖形的大量數(shù)據(jù)，可供開(kāi)發(fā)參考。

AI切圖教程

1、我們打開(kāi)AI軟件，再打開(kāi)用AI或PS等其他軟件設(shè)計(jì)好的待切網(wǎng)頁(yè)設(shè)計(jì)稿文件。然后根據(jù)打開(kāi)的設(shè)計(jì)稿文件的布局、底色和用圖，進(jìn)行切圖之前的腹中分析、規(guī)劃，如面對(duì)設(shè)計(jì)稿我們到底該怎么切才效果最好，最快，且切得又最精準(zhǔn)，哪些元素必須用切圖的方法來(lái)獲得，哪些元素不是必須的；為了切圖方便，哪些文字必須暫時(shí)被隱藏或去掉，以便于日后在此處替代上網(wǎng)上動(dòng)態(tài)文字和鏈接，等等。下邊是我準(zhǔn)備好一張用AI設(shè)計(jì)好的待切某網(wǎng)站首頁(yè)（注，這是個(gè)AI源文件）。

2、我們要用到的切圖工具位于AI工具欄中下部，與PS一樣也有有兩個(gè)，即一個(gè)是切片工具，另一個(gè)是切片選擇工具。左邊有個(gè)小按鈕，你按住它這兩個(gè)工具選項(xiàng)就會(huì)顯露出來(lái)。

3、對(duì)照上圖，網(wǎng)頁(yè)底色如為純色，我們可以不考慮切片，因?yàn)樵谥谱骶W(wǎng)頁(yè)可以在CSS中采用定義一個(gè)class顏色值的方式來(lái)進(jìn)行填充，如是有規(guī)則的漸變，可根據(jù)漸變的方向不同采用切一個(gè)PX大小的圖片，供在網(wǎng)頁(yè)制作中進(jìn)行橫向或縱向平鋪填充之用；

4、接下來(lái)就是對(duì)整個(gè)LOGO和右下角廣告圖片的大切片。如箭頭所指的地方。

5、最后，就是對(duì)文字區(qū)域的切圖。

6、為了切得準(zhǔn)，切得的大小區(qū)域適當(dāng)，力求與設(shè)計(jì)稿完全一致，還可以進(jìn)行如下微調(diào)操作。一是按ctr+R待標(biāo)尺出來(lái)后向下向右拉參考線(xiàn)，因?yàn)閰⒖季€(xiàn)在鼠標(biāo)靠近的時(shí)候有吸附功能，所以切圖不容易切錯(cuò)位置，這一點(diǎn)與PS切圖完全一樣。二是可對(duì)被選擇切片區(qū)域的長(zhǎng)寬尺寸，通過(guò)改變數(shù)值來(lái)調(diào)整。

7、待切片區(qū)域確定好后，接下來(lái)就是對(duì)各區(qū)域的保存了。不過(guò)，需要重點(diǎn)提醒的是，在保存之前，必須將不希望以圖片呈現(xiàn)的文字隱藏或暫時(shí)刪除。

8、切好圖之后就到最重要的步驟了，如下圖所示，選擇文件下面的存儲(chǔ)為WEB和設(shè)備所用格式，最好能記住快捷鍵。

9、切片的存儲(chǔ)格式有：jpg、gif和png格式的各種不同品質(zhì)展現(xiàn)形式，如格式設(shè)定為JPEG，它就是JPG，gif的就是gif的。

10、如同PS切圖最后的存儲(chǔ)一樣，關(guān)鍵是品質(zhì)的設(shè)定，我們都知道如果一張圖片越大它在網(wǎng)上打開(kāi)的速度就越慢，當(dāng)我們把圖片的品質(zhì)設(shè)的越低，它的大小就越小，但是如果品質(zhì)太差，圖片會(huì)變模糊，所以一般情況下如果是網(wǎng)上使用的圖片，品質(zhì)可以設(shè)置60，既保證圖片較小也不會(huì)模糊。這個(gè)數(shù)值由你自己設(shè)置，是大是小，具體看你的要求，試試就知道了。同樣，這里也有個(gè)需要注意的地方，問(wèn)題是你只是對(duì)其中一個(gè)切片設(shè)置品質(zhì)，其他切片又要重新設(shè)置，所以存的時(shí)候最好檢查一下。

11、一切設(shè)置好后，點(diǎn)擊存儲(chǔ)會(huì)顯示以上界面。格式選項(xiàng)選擇HTML和圖像，默認(rèn)是圖像的，這樣我們就能得到網(wǎng)頁(yè)代碼了。這里需要指出的是，切片存儲(chǔ)時(shí)，可以存儲(chǔ)全部的，也可以只儲(chǔ)指定的，隨用途所欲。

12、存好后，便可得到一個(gè)圖片文件夾和一個(gè)html網(wǎng)頁(yè)文件?？赡苣阍谀汶娔X上看到的文件圖標(biāo)跟我這個(gè)不一樣，這個(gè)沒(méi)有關(guān)系，這主要是因?yàn)槲覀兯x用的默認(rèn)瀏覽器可能不一樣。

13、圖像文件夾中存儲(chǔ)的即是我們所切的切片圖文件,在做網(wǎng)頁(yè)的過(guò)程中，還得將這些文件上傳至網(wǎng)絡(luò)空間才能顯現(xiàn)完整網(wǎng)頁(yè),別人才會(huì)看的到。

14、用dreamweaver、frontpage、text文本軟件都可以打開(kāi)這個(gè)html文件，并可看到如下界面。至此，我們急需要得到<table>....</table>已經(jīng)呈現(xiàn)在了我們眼前。如大紅框中標(biāo)識(shí)的即是。最終形成實(shí)際網(wǎng)頁(yè)時(shí)，還得替換所有圖片的存儲(chǔ)地址，或給相關(guān)圖片添加上相關(guān)鏈接地址才能完整呈現(xiàn)。

15、如用ie瀏覽器打開(kāi)這個(gè)html文件，我們之前的這個(gè)AI設(shè)計(jì)稿，就以網(wǎng)頁(yè)的形式呈現(xiàn)出來(lái)了。這里需要強(qiáng)調(diào)的是，切圖得來(lái)的html文件，只是網(wǎng)頁(yè)制作的最最基本的一點(diǎn)點(diǎn)工作而已，能省用多少時(shí)間和工作量呢，只能是仁者見(jiàn)仁，智者見(jiàn)智，不好說(shuō)。