上期通過分享《淺談矢量圖形前景》，簡單地從設(shè)計趨勢、技術(shù)、以及現(xiàn)有應(yīng)用環(huán)境等角度講述了矢量技術(shù)應(yīng)用的可行性。這期我們將把阿里媽媽MUX這兩年在矢量圖標(biāo)制作上積累的經(jīng)驗也分享給大家；
大家可能在網(wǎng)上看過很多關(guān)于矢量圖標(biāo)制作的教程，而且大多是技術(shù)同學(xué)分享的技術(shù)貼。整個過程也相對比較簡單。在這里我們將深入地向大家講述字體圖標(biāo)制作的規(guī)范流程和注意事項，很多內(nèi)容是現(xiàn)在網(wǎng)上沒有的，純粹是阿里媽媽MUX這兩年摸索出來的。阿里媽媽MUX在國內(nèi)首家推出了在線生成字體圖標(biāo)平臺，省去了設(shè)計師不太擅長的字體制作過程，所以在本教程中我們就不再詳細(xì)介紹如何使用字體制作工具制作字體圖標(biāo)的過程，更多的是介紹如何在AI工具中制作一個規(guī)范的字體圖標(biāo)。閱讀全文
那廢話不多說我們開始介紹吧；
1、在制作圖標(biāo)前請下載由阿里媽媽MUX提供的矢量圖標(biāo)制作模板；立即下載
2、盡量使用illustrator制作矢量圖標(biāo)；有些設(shè)計師在ps中使用路徑繪制圖標(biāo)再導(dǎo)成SVG，這種方式也是可以的，但是有時會出現(xiàn)一些奇怪的現(xiàn)象，如圖形的路徑混亂了，圖標(biāo)傾斜了等不可預(yù)知的情況，所以還是建議大家在illustrator中繪制矢量圖標(biāo)；
3、將illustrator中繪制的圖形另存為SVG格式；最初iconfont平臺是支持EPS文件上傳的，但是考慮到EPS文件在平臺生成過程的不穩(wěn)定性，所以現(xiàn)在統(tǒng)一采用SVG格式；illustrator中SVG格式導(dǎo)出具體教程>> iconfont
4、在繪制圖標(biāo)的過程中不要使用AI圖形模塊的旋轉(zhuǎn)、鏡像等功能，整個繪制過程最好使用鋼筆工具繪制；^^
5、避免出現(xiàn)圖形繪制過中斷點的現(xiàn)象。
6、不可以用色彩疊加的方式來達(dá)到模塊造型；
數(shù)字形態(tài)下，字符是用抽象化的圖案繪制成的。當(dāng)文本顯示在屏幕上時，位置非常精確，理想的字體形狀需要用一定數(shù)量的像素柵格顯示。圖標(biāo)設(shè)計師常用柵格來控制圖標(biāo)組成元素的比例關(guān)系；但是我們在矢量圖標(biāo)制作過程中引入柵格概念主要目的是模擬字體圖標(biāo)在不同尺寸下的展現(xiàn)效果，以達(dá)到優(yōu)化的作用；也就是說圖標(biāo)設(shè)計的時候我們用柵格來模擬像素，一個格子就是一個像素，一個圖標(biāo)需要一定數(shù)量的像素組成。
舉個例子：一個16X16圖標(biāo)，在16X16個像素中通過像素著色的方式把圖形表達(dá)出來；
那有同學(xué)就要問了，通過這樣的柵格能達(dá)到什么樣的優(yōu)化效果呢？首先我們來了解一下文字的渲染策略，看組圖：
（從左到右依次）理想的渲染狀態(tài)、黑白渲染、灰度渲染、次像素渲染
上圖左側(cè)第一張是我們認(rèn)為一種比較理想的渲染效果，但是通過剛才我們介紹柵格我們可以了解到這種狀態(tài)是不可能的，因為第一代黑白渲染和第二代灰度渲染是不可能做到顯示半格像素或一個像素中顯示弧度的。
黑白渲染和灰度渲染在渲染圖形遇到半格像素或則弧度的時候，他們會有各自不同的處理方式；舉個例子：
如上圖紅點處像素，我們理解他是有弧度的，且不占滿一個像素；各個渲染方式的處理辦法如下：
黑白渲染
黑白渲染相對來說比較粗暴，直接通過四舍五入的形式把這里要描繪的圖形不顯示了；（黑白渲染的形式主要應(yīng)用于打印機渲染，但是打印機本身的精度非常高，所以打印出來的圖形還是很細(xì)膩的）
灰度渲染
灰度渲染顯得就智能一些了，他通過灰度降級的方式來表達(dá)，如果占不到一個像素那就根據(jù)他占的面積來降低這個像素的灰度；占的面積越小灰度就越低；
次像素渲染
次像素渲染是第三代渲染方式，相對來說比較高級，他從從左至右將一個像素分成三份；用不同的色彩值來顯示圖形，這樣圖形看起來就更加細(xì)膩；
通過了解剛才三種渲染模式對不滿一個像素的處理方式，我們就會發(fā)現(xiàn)，當(dāng)我們繪制圖標(biāo)的時候，如果沒有把控好圖標(biāo)邊緣線在真實場景下渲染的情況，就會被系統(tǒng)進行降級渲染。所以我們更希望能飽滿完整的顯示一個像素。我們來看一組效果：
從上組圖中我們可以看出左側(cè)圖形的邊都剛好落在完成的像素中，未出現(xiàn)不足一個像素的現(xiàn)象（圓角除外），右側(cè)則未考慮像素柵格的問題；圖標(biāo)在16X16像素大小的應(yīng)用中很明顯感覺到左側(cè)的小圖標(biāo)比右側(cè)的小圖標(biāo)要清晰很多；這是因為右側(cè)的圖標(biāo)的邊本來是需要2個像素顯示的，但是卻落在了3個像素上，渲染的時候出現(xiàn)了一個像素是未降級灰度顯示，其他兩個像素進行了不同級別的灰度降級。這樣我們就會覺得右側(cè)的小圖標(biāo)有點模糊且變粗了。所以在制作圖標(biāo)的時候我們需要引入柵格，去模擬像素點，然后避免圖標(biāo)的線或邊不要出現(xiàn)落在半個像素上的情況；
了解到了柵格對于圖標(biāo)優(yōu)化的重要性，那怎么制作一個能模擬真實像素環(huán)境下的柵格呢？
首先我們得了解一下基準(zhǔn)框；基準(zhǔn)框的作用是為字體矢量圖標(biāo)提供一個大小參考，如：在16px像素大小的一個逗號“，”和一個文字“圖”的大小和所處的位子是不一樣的，這就是因為他們都是在同一套基準(zhǔn)框中繪制的圖形，才得到相對大小的概念，不然大家同時矢量圖標(biāo)，怎么區(qū)別大小呢？
每套字體都有自己不同的基準(zhǔn)框，要根據(jù)實際設(shè)計需要設(shè)定，沒有嚴(yán)格規(guī)定；阿里巴巴矢量圖標(biāo)庫在制定基準(zhǔn)框的時候考慮到圖標(biāo)展現(xiàn)的標(biāo)準(zhǔn)尺寸：16X16、32X32、64X64、128X128；特設(shè)置了一個可以整除他們的尺寸：1024X1024（大家可以通過下載我們制作好的“圖標(biāo)制作模板”獲得已經(jīng)設(shè)置好基準(zhǔn)框的模板）
根據(jù)實際應(yīng)用的像素大小選擇柵格；
如：你要制作一套16X16像素大小的字體圖標(biāo)應(yīng)用于網(wǎng)站或app，那么我們建議您在16X16的柵格中繪制，那么16像素2的n倍都能應(yīng)用，這樣圖標(biāo)的邊框就不會落在半個像素上，避免出現(xiàn)虛邊、加粗等現(xiàn)象。（在retina屏下不用擔(dān)心圖標(biāo)的虛邊問題，由于顯示精度非常高，圖標(biāo)表現(xiàn)得非常細(xì)膩。）
那如果要制作一個非標(biāo)尺寸的圖標(biāo)，如：18X18大小的圖標(biāo)怎么辦呢？
我們可以通過在AI中修改柵格來實現(xiàn)模擬，如下圖：
在AI設(shè)置中調(diào)出參考線和網(wǎng)格設(shè)置設(shè)置項，然后拿出你的計算機：1024/X=?把算出來的值盡可能精確的填入網(wǎng)格線間隔這項中，這樣你可以模擬在實際應(yīng)用大小場景中要顯示的圖形像素點了。
我是分割線—————————————————————————————
下期為大家分享《矢量圖標(biāo)擴展玩法》
powered by 阿里媽媽MUX
www.iconfont.cn 國內(nèi)最大的矢量圖標(biāo)庫
