字型表徵圖製作詳解

來源:互聯網
上載者:User

   一、製作前基礎知識普及

  1、在製作表徵圖前請下載由阿里媽媽MUX提供的向量表徵圖製作模板;

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

  3、將illustrator中繪製的圖形另存新檔SVG格式;最初iconfont平台是支援EPS檔案上傳的,但是考慮到EPS檔案在平台產生過程的不穩定性,所以現在統一採用SVG格式;illustrator中SVG格式匯出具體教程>> iconfont

  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、完成上傳,這樣就獲得了一個向量的字型表徵圖

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。