Layer Exporter切圖插件v2.2中文免費版

Layer Exporter切圖插件中文免費版是專為Illustrator用戶打造的一款切圖插件，這款插件的主要作用就是可以將AI的圖層分割成常用圖片格式，支持JPG、PNG、SVG等格式，內置了豐富的圖形數據，可以方便開設計師進行學習或者分層等操作，兼容Illustrator cs4、cs5等版本。

Layer Exporter特色

導出所有圖層為SVG，PNG或JPG

並生成相應的HTML和CSS

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文件，並可看到如下界麵。至此，我們急需要得到.... 已經呈現在了我們眼前。如大紅框中標識的即是。最終形成實際網頁時，還得替換所有圖片的存儲地址，或給相關圖片添加上相關鏈接地址才能完整呈現。

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