Layer Exporter(AI切圖工具)

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

官方介紹

這款插件可以幫助用戶將AI圖層分別導為JPG、PNG、SVG等格式。同時生成一份.JSON文件，內涵圖形的大量數據，可供開發參考。

AI切圖教程

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

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

3、對照上圖，網頁底色如為純色，我們可以不考慮切片，因為在制作網頁可以在CSS中采用定義一個class顏色值的方式來進行填充，如是有規則的漸變，可根據漸變的方向不同采用切一個PX大小的圖片，供在網頁制作中進行橫向或縱向平鋪填充之用；

4、接下來就是對整個LOGO和右下角廣告圖片的大切片。如箭頭所指的地方。

5、最后，就是對文字區域的切圖。

6、為了切得準，切得的大小區域適當，力求與設計稿完全一致，還可以進行如下微調操作。一是按ctr+R待標尺出來后向下向右拉參考線，因為參考線在鼠標靠近的時候有吸附功能，所以切圖不容易切錯位置，這一點與PS切圖完全一樣。二是可對被選擇切片區域的長寬尺寸，通過改變數值來調整。

7、待切片區域確定好后，接下來就是對各區域的保存了。不過，需要重點提醒的是，在保存之前，必須將不希望以圖片呈現的文字隱藏或暫時刪除。

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

9、切片的存儲格式有：jpg、gif和png格式的各種不同品質展現形式，如格式設定為JPEG，它就是JPG，gif的就是gif的。

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

11、一切設置好后，點擊存儲會顯示以上界面。格式選項選擇HTML和圖像，默認是圖像的，這樣我們就能得到網頁代碼了。這里需要指出的是，切片存儲時，可以存儲全部的，也可以只儲指定的，隨用途所欲。

12、存好后，便可得到一個圖片文件夾和一個html網頁文件。可能你在你電腦上看到的文件圖標跟我這個不一樣，這個沒有關系，這主要是因為我們所選用的默認瀏覽器可能不一樣。

13、圖像文件夾中存儲的即是我們所切的切片圖文件,在做網頁的過程中，還得將這些文件上傳至網絡空間才能顯現完整網頁,別人才會看的到。

14、用dreamweaver、frontpage、text文本軟件都可以打開這個html文件，并可看到如下界面。至此，我們急需要得到<table>....</table>已經呈現在了我們眼前。如大紅框中標識的即是。最終形成實際網頁時，還得替換所有圖片的存儲地址，或給相關圖片添加上相關鏈接地址才能完整呈現。

15、如用ie瀏覽器打開這個html文件，我們之前的這個AI設計稿，就以網頁的形式呈現出來了。這里需要強調的是，切圖得來的html文件，只是網頁制作的最最基本的一點點工作而已，能省用多少時間和工作量呢，只能是仁者見仁，智者見智，不好說。