Layer Exporter是一個專為Adobe Illustrator開發的切圖插件,功能非常強大,用戶安裝該插件之后可以直接將圖層導出PNG、JPG等格式的文件,還會同時生成JSON文件,有需要的朋友快來下載Layer Exporter吧!
Layer Exporter軟件亮點
導出所有圖層為SVG,PNG或JPG。
并生成相應的HTML和CSS。
Layer Exporter軟件教程
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網頁文件??赡苣阍谀汶娔X上看到的文件圖標跟我這個不一樣,這個沒有關系,這主要是因為我們所選用的默認瀏覽器可能不一樣。
小編測評
Layer Exporter旨在為用戶提供Adobe Illustrator切圖插件,可以自由導出圖層,無需額外再安裝插件,致力于讓用戶可以更好地編輯和瀏覽圖片,軟件綠色安全,無毒無廣告無插件,請放心下載。
上面就是本次Layer Exporter的全部內容了,希望對小伙伴們有所幫助,更多軟件下載敬請關注綠色先鋒!