• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析字體圖標製作詳解過程




    詳細解析字體圖標製作詳解過程

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

    大家可能在網上看過很多關於矢量圖標製作的教程,而且大多是技術同學分享的技術貼。整個過程也相對比較簡單。在這裡我們將深入地向大家講述字體圖標製作的規範流程和注意事項,很多內容是現在網上沒有的,純粹是阿里媽媽MUX這兩年摸索出來的。


    設計理論教學開始

    大家可能在網上看過很多關於矢量圖標製作的教程,而且大多是技術同學分享的技術貼。整個過程也相對比較簡單。在這裡我們將深入地向大家講述字體圖標製作的規範流程和注意事項,很多內容是現在網上沒有的,純粹是阿里媽媽MUX這兩年摸索出來的。阿里媽媽MUX在國內首家推出了在線生成字體圖標平台,省去了設計師不太擅長的字體製作過程,所以在本教程中我們就不再詳細介紹如何使用字體製作工具製作字體圖標的過程,更多的是介紹如何在AI工具中製作一個規範的字體圖標。

    那廢話不多說我們開始介紹吧;

    一、製作前基礎知識普及

    1、在製作圖標前請下載由阿里媽媽MUX提供的矢量圖標製作模板;立即下載

    2、盡量使用illustrator製作矢量圖標;有些設計師在ps中使用路徑繪製圖標再導成SVG,這種方式也是可以的,但是有時會出現一些奇怪的現象,如圖形的路徑混亂了,圖標傾斜了等不可預知的情況,所以還是建議大家在illustrator中繪製矢量圖標;

    3、將illustrator中繪製的圖形另存為SVG格式;最初iconfont平台是支持EPS文件上傳的,但是考慮到EPS文件在平台生成過程的不穩定性,所以現在統一採用SVG格式;

    4、在繪製圖標的過程中不要使用AI圖形模塊的旋轉、鏡像等功能,整個繪製過程最好使用鋼筆工具繪製;^^

    5、避免出現圖形繪製過中斷點的現象。

    6、不可以用色彩疊加的方式來達到模塊造型;

    二、圖標柵格

    數字形態下,字符是用抽象化的圖案繪製成的。當文本顯示在屏幕上時,位置非常精確,理想的字體形狀需要用一定數量的像素柵格顯示。圖標設計師常用柵格來控制圖標組成元素的比例關係;但是我們在矢量圖標製作過程中引入柵格概念主要目的是模擬字體圖標在不同尺寸下的展現效果,以達到優化的作用;也就是說圖標設計的時候我們用柵格來模擬像素,一個格子就是一個像素,一個圖標需要一定數量的像素組成。

    舉個例子:一個16X16圖標,在16X16個像素中通過像素着色的方式把圖形表達出來;

    詳細解析字體圖標製作詳解過程

    那有同學就要問了,通過這樣的柵格能達到什麼樣的優化效果呢?首先我們來了解一下文字的渲染策略,看組圖:

    詳細解析字體圖標製作詳解過程

    (從左到右依次)理想的渲染狀態、黑白渲染、灰度渲染、次像素渲染

    上圖左側第一張是我們認為一種比較理想的渲染效果,但是通過剛才我們介紹柵格我們可以了解到這種狀態是不可能的,因為第一代黑白渲染和第二代灰度渲染是不可能做到顯示半格像素或一個像素中顯示弧度的。

    黑白渲染和灰度渲染在渲染圖形遇到半格像素或則弧度的時候,他們會有各自不同的處理方式;舉個例子:

    如上圖紅點處像素,我們理解他是有弧度的,且不佔滿一個像素;各個渲染方式的處理辦法如下:

    黑白渲染

    黑白渲染相對來說比較粗暴,直接通過四捨五入的形式把這裡要描繪的圖形不顯示了;(黑白渲染的形式主要應用於打印機渲染,但是打印機本身的精度非常高,所以打印出來的圖形還是很細膩的)

    灰度渲染

    灰度渲染顯得就智能一些了,他通過灰度降級的方式來表達,如果占不到一個像素那就根據他占的面積來降低這個像素的灰度;占的面積越小灰度就越低;

    次像素渲染

    次像素渲染是第三代渲染方式,相對來說比較高級,他從從左至右將一個像素分成三份;用不同的色彩值來顯示圖形,這樣圖形看起來就更加細膩;

    通過了解剛才三種渲染模式對不滿一個像素的處理方式,我們就會發現,當我們繪製圖標的時候,如果沒有把控好圖標邊緣線在真實場景下渲染的情況,就會被系統進行降級渲染。所以我們更希望能飽滿完整的顯示一個像素。我們來看一組效果:

    詳細解析字體圖標製作詳解過程

    從上組圖中我們可以看出左側圖形的邊都剛好落在完成的像素中,未出現不足一個像素的現象(圓角除外),右側則未考慮像素柵格的問題;圖標在16X16像素大小的應用中很明顯感覺到左側的小圖標比右側的小圖標要清晰很多;這是因為右側的圖標的邊本來是需要2個像素顯示的,但是卻落在了3個像素上,渲染的時候出現了一個像素是未降級灰度顯示,其他兩個像素進行了不同級別的灰度降級。這樣我們就會覺得右側的小圖標有點模糊且變粗了。所以在製作圖標的時候我們需要引入柵格,去模擬像素點,然後避免圖標的線或邊不要出現落在半個像素上的情況;

    了解到了柵格對於圖標優化的重要性,那怎麼製作一個能模擬真實像素環境下的柵格呢?

    首先我們得了解一下基準框;基準框的作用是為字體矢量圖標提供一個大小參考,如:在16px像素大小的一個逗號“,”和一個文字“圖”的大小和所處的位子是不一樣的,這就是因為他們都是在同一套基準框中繪製的圖形,才得到相對大小的概念,不然大家同時矢量圖標,怎麼區別大小呢?

    每套字體都有自己不同的基準框,要根據實際設計需要設定,沒有嚴格規定;阿里巴巴矢量圖標庫在制定基準框的時候考慮到圖標展現的標準尺寸:16X16、32X32、64X64、128X128;特設置了一個可以整除他們的尺寸:1024X1024(大家可以通過下載我們製作好的“圖標製作模板”獲得已經設置好基準框的模板)

    根據實際應用的像素大小選擇柵格;

    如:你要製作一套16X16像素大小的字體圖標應用於網站或app,那麼我們建議您在16X16的柵格中繪製,那麼16像素2的n倍都能應用,這樣圖標的邊框就不會落在半個像素上,避免出現虛邊、加粗等現象。(在retina屏下不用擔心圖標的虛邊問題,由於顯示精度非常高,圖標表現得非常細膩。)

    那如果要製作一個非標尺寸的圖標,如:18X18大小的圖標怎麼辦呢?

    我們可以通過在AI中修改柵格來實現模擬,如下圖:

    詳細解析字體圖標製作詳解過程

    在AI設置中調出參考線和網格設置設置項,然後拿出你的計算機:1024/X=?把算出來的值儘可能精確的填入網格線間隔這項中,這樣你可以模擬在實際應用大小場景中要顯示的圖形像素點了。

    三、實例操作

    1、下載模板

    詳細解析字體圖標製作詳解過程

    2、在AI中刪除模板的示例圖,根據柵格繪製圖形;

    詳細解析字體圖標製作詳解過程

    3、將AI中繪製好的圖形另存為SVG

    詳細解析字體圖標製作詳解過程

    4、打開iconfont.cn網站並把保存好的SVG文件拖入上傳框中

    詳細解析字體圖標製作詳解過程

    5、完成上傳,這樣就獲得了一個矢量的字體圖標

    詳細解析字體圖標製作詳解過程

    — —

    文章永久連結為: 詳細解析字體圖標製作詳解過程