2018-8-31 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
專注于做好一件小事,哪怕是做不好也用心去做,小到搭建一個精美的網(wǎng)格系統(tǒng),做好一個字體的拐角……先看一下我的往期設(shè)計案例。
對于很多剛接觸字體設(shè)計的同學(xué)經(jīng)常會遇到一種情況那就是想法高大上,結(jié)果很悲傷,為什么會造成這樣的結(jié)果?歸根結(jié)底是對字體設(shè)計本身了解還不夠細(xì)致就照葫蘆畫瓢直接上,為了避免這種尷尬的結(jié)果,我們應(yīng)該在開始著手做字體之前要做好各項準(zhǔn)備工作,不斷去瀏覽優(yōu)秀的字體設(shè)計從中尋找設(shè)計的感覺,確定感覺后建立網(wǎng)格系統(tǒng),開始逐步設(shè)計字體。我在做字體設(shè)計的時候會把握幾個步驟「建網(wǎng)格」——「選字體」——「拆字體」——「繪筆畫」——「綁骨架」——「粗與細(xì)」——「取與舍」——「磨細(xì)節(jié)」——「去感受」。
下面我們就以大家最常見的矩陣字體為例來給大家分享如何制作字體。
1. 建網(wǎng)格
建立網(wǎng)格系統(tǒng),萬丈高樓平地起,要做一款扎實的字體離不開網(wǎng)格系統(tǒng)的規(guī)范。
2. 拆字體
以「燃」為例——選取一個默認(rèn)字體,按照字體結(jié)構(gòu)對筆畫進(jìn)行拆分。
3. 繪筆畫
將拆分出的筆畫用橫線和豎線在網(wǎng)格系統(tǒng)里進(jìn)行筆畫重繪,此時不要做細(xì)節(jié),撇、捺和點根據(jù)自身走向和結(jié)構(gòu)特點也歸屬為橫豎線。
4. 綁骨架
拆分繪制的字體筆畫就是字體的骨骼,筆畫間的連接處可以理解成是人體的關(guān)節(jié),關(guān)節(jié)的意義在于保證字體穩(wěn)固的同時又靈活多變,字體的筆畫可以根據(jù)視覺需要圍繞關(guān)節(jié)在一定范圍內(nèi)做活動,也可調(diào)整長短比例。
5. 粗與細(xì)
筆畫的粗細(xì)與硬度由你想要的字體氣質(zhì)來決定,細(xì)筆畫與曲筆畫柔美氣質(zhì),粗筆畫與直筆畫沉穩(wěn)大氣,雖說設(shè)計是一種感覺,但是這種感覺對于初學(xué)者來說很難把控,所以跟大家共享一下常用的幾種筆畫的粗細(xì),在1000PX*1000PX畫板里采用6px,10px和20px為基礎(chǔ)筆畫粗細(xì),根據(jù)想要的業(yè)務(wù)氣質(zhì)選取即可。
6. 解與構(gòu)
常見的字體結(jié)構(gòu)有「上下結(jié)構(gòu)」「上中下結(jié)構(gòu)」「左右結(jié)構(gòu)」「左中右結(jié)構(gòu)」「半包圍結(jié)構(gòu)」和「全包圍結(jié)構(gòu)」。其中「上下結(jié)構(gòu)」中著重強調(diào)占比較小的那部分筆畫,進(jìn)而達(dá)到字體本身的平衡,例如「感」字著重設(shè)計心字;「上中下結(jié)構(gòu)」中一般會在不影響識別性的前提下去掉中間部分橫行筆畫,進(jìn)而達(dá)到字體本身的平衡,例如「享」字著重設(shè)計口字;左中右結(jié)構(gòu)中在不影響識別性的前提下會簡化左邊部分筆畫,進(jìn)而達(dá)到字體本身的平衡,例如「燃」字著重設(shè)計火字。
7. 取與舍
筆畫變粗后整個字體筆畫間的空間比例會受到一定影響,因此為了字體的美觀度和透氣性我們會對字體結(jié)構(gòu)進(jìn)行一些取舍和整合。
8. 磨細(xì)節(jié)
為了讓字體看起來更加舒適,我們將字體的拐角做圓,做圓角的同時也要根據(jù)網(wǎng)格系統(tǒng)來調(diào)整圓的度數(shù)。
9. 去感受
打磨整體字體,繼續(xù)刻畫細(xì)節(jié)。
注意:在一組字里,每個單字的結(jié)構(gòu)都存在差異,適當(dāng)調(diào)整字體內(nèi)部的比例,形成感官上舒適的筆勢,對保持視覺上大小一致很重要。漢字字體類型繁多,但是如果我們用幾何法則來劃分字體類型其實大致可以歸納為三種:方形,圓形和三角形,從面積上來看方形和圓形的面積最大,三角形次之,所以我們?yōu)榱吮3肿种卮笮〉囊恢滦孕枰{(diào)整他們之間的大小比例,做到大小均勻,筆畫一致,結(jié)構(gòu)嚴(yán)謹(jǐn)和間隙適中。
△ 圖源:ElethomHunter
為了拉出字體的氣質(zhì),一般會把字體做的稍微偏瘦長一些。
字體設(shè)計的手段是多種多樣的,每個設(shè)計師都有自己擅長的切入點,最后的結(jié)果是自己想要的就好。上述的分享希望能給字體設(shè)計初學(xué)者一點幫助,也歡迎各位同行大神交流切磋。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com