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