SVG圖標(biāo)繪制

一、圖標(biāo)繪制范圍

繪制工具：AI、SKETCH

另外不建議使用PS，因為雖然PS也可以導(dǎo)出SVG，但是PS在繪制有弧度的形狀時，會不可避免的出現(xiàn)次級像素，導(dǎo)出SVG則會出現(xiàn)各種"毛刺"，形狀也會出現(xiàn)細(xì)微的變化，即便控制在最小的程度，回過頭還是需要在AI中調(diào)整

以下全以AI為繪制工具講解

繪制圖標(biāo)以常見尺寸48*48為標(biāo)準(zhǔn)，留白左右各4px

圖標(biāo)繪制模板

模板下載地址：http://pan.baidu.com/s/1eRPyJGu

繪制區(qū)域一般保持在方形區(qū)域內(nèi)

1號區(qū)域：制作圓形圖標(biāo)時，請在該區(qū)域繪制

2號區(qū)域：該區(qū)域為，方形圖標(biāo)保持為了與圓形圖標(biāo)視覺平衡而縮小的繪制區(qū)域

3號區(qū)域：圖標(biāo)最大繪制區(qū)域

內(nèi)容繪制區(qū)域標(biāo)識

不規(guī)則圖標(biāo)繪制區(qū)域需要對參考線進(jìn)行調(diào)整

繪制區(qū)域調(diào)整

藍(lán)色區(qū)域即是不規(guī)則圖標(biāo)繪制區(qū)域，如下：

圖標(biāo)可適當(dāng)超出繪制區(qū)域

有傾斜角度的圖標(biāo)也一樣，先繪制好水平或者縱向的圖標(biāo)然后再進(jìn)行角度傾斜的處理，而45°是最優(yōu)角度，因為傾斜所導(dǎo)致的鋸齒是最小的。

例如：

旋轉(zhuǎn)后的圖標(biāo)少量超出最大繪制區(qū)域?qū)僬，F(xiàn)象

范例總結(jié)：

? ?—— ?不規(guī)則圖標(biāo)繪制方法的圖片引自《圖標(biāo)繪制規(guī)范：方寸之間皆有講究》? 海邊來的設(shè)計師

二、圖標(biāo)繪制風(fēng)格

目前主流圖標(biāo)風(fēng)格一般有三種：

單色、多色

在實際應(yīng)用當(dāng)中，產(chǎn)品或者項目之間使用的通用圖標(biāo)庫以單色圖標(biāo)為標(biāo)準(zhǔn)，盡量減少細(xì)節(jié)，因為圖標(biāo)在小尺寸的應(yīng)用過程中會造成細(xì)節(jié)的丟失

手機淘寶圖標(biāo)庫

而對于多色類，面+線的圖標(biāo)類型，一般應(yīng)用于針對某項目而定制化的圖標(biāo)

指標(biāo)網(wǎng)-成本估算-業(yè)態(tài)分類圖標(biāo)

三、繪制規(guī)則

在阿里巴巴矢量圖標(biāo)庫上，基本列出了SVG圖標(biāo)在繪制的時候需要注意的情況

繪制規(guī)則

總結(jié)一下其實就是

1.單色單層形狀、2.禁用描邊、3、弧度區(qū)域不要有多余節(jié)點、4.注意繪制范圍

PS：輸出SVG時一定要合并形狀，生成圖標(biāo)字體時代碼中會生成多個path，不經(jīng)xy軸調(diào)整會導(dǎo)致圖層錯位，很麻煩

具體操作：選中所有圖層 > 聯(lián)集 > 建立復(fù)合路徑 > 擴展

快捷操作：選中所有圖層，按住option鍵點擊布爾運算的聯(lián)集按鈕，從而激活擴展，點擊擴展

路徑查找器

多色圖標(biāo)繪制時注意的細(xì)節(jié)和單色圖標(biāo)一致，只不過只能同色的形狀建立復(fù)合路徑，跨色合并會變成一種顏色。

多色之間不能合并

輸出iconfont字體圖標(biāo)

一、輸出平臺

阿里巴巴矢量圖標(biāo)庫

阿里巴巴矢量圖標(biāo)庫

icomoon

icomoon

平臺不過多舉例，比較好用的就是這兩個平臺，相對阿里巴巴，icomoon平臺可以針對多色圖標(biāo)對IE6/7/8有更好的支持，而阿里對多色只支持到IE9。后面的輸出流程也是以icomoon為標(biāo)準(zhǔn)進(jìn)行梳理。

二、輸出流程

1.點擊首頁右上角的IcoMoon App按鈕，進(jìn)入操作界面

2.點擊左上角直接點擊Import Icons上傳SVG文件

選擇SVG圖標(biāo)文件

3.上傳之后選中所有的圖標(biāo)，然后點擊右下角 Generat Font 生成字體的按鈕

PS：上傳時盡量保持圖標(biāo)顏色統(tǒng)一，雖然設(shè)計師需要把每一個圖標(biāo)的顏色調(diào)整一遍，麻煩了一些，但是為了后期方便查看，不會雜亂無章，還是值得的。

（ 下圖我就沒有統(tǒng)一顏色，典型的反例，(⊙﹏⊙)b ）

然后在前端同學(xué)引用的時候再按照標(biāo)注，規(guī)定每一個圖標(biāo)的color值就OK了

選中所有圖標(biāo)

4.點擊左上角的設(shè)置按鈕，在彈層中勾選對IE6/7/8的支持選項，設(shè)置完畢之后下載字體包

設(shè)置

5.生成字體包，可以打開demo.html進(jìn)行圖標(biāo)的預(yù)覽

生成圖標(biāo)字體文件包

至此，就可以把生成的文件交給前端同學(xué)進(jìn)行開發(fā)了。

那么，設(shè)計的同學(xué)該怎么使用iconfont呢，也很簡單

1.首先我們打開下載好的iconfont文件夾-->fonts-->找到命名好的字體，然后安裝字體

選擇字體進(jìn)行安裝

然后就是使用

主要針對 2 個常用軟件來說明，分別是 AI 和 PS

AI2014 ： 文字 > 字形

PS2015： 文字 > 面板 > 字形面板

打開面板之后，找到自己的字體，就可以看到自己的圖標(biāo)都在里面了，使用也很簡單，和輸入文字一樣，直接在面板里面雙擊即可。