高手之路 字體設(shè)計(jì)

2015-10-30    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

來(lái)源:莫貝網(wǎng)

本文主題是“以少勝多 以一擋十”,通俗地說(shuō)就是字體設(shè)計(jì)中的筆畫省略,在開始之前我們不得不提一下“格式塔心理學(xué)”,這是我們省略字體筆畫的理論基礎(chǔ)。

格式塔是德文“Gestalt”的 譯音,意思是“完形”,即具有不同部分分離特性的有機(jī)整體。我們的眼睛和大腦在觀察事物、接收影像刺激的時(shí)候,會(huì)有一些特別的傾向。這些傾向常??梢詭椭?我們快速的辨別事物,有時(shí)候也會(huì)產(chǎn)生所謂的“錯(cuò)覺”。格式塔心理學(xué)重要的概念便是“整體不等于個(gè)體的總合”,舉例來(lái)說(shuō):當(dāng)我們?cè)谟^察另一個(gè)人的時(shí)候,并不 是先看到他的手、腳、頭、眼睛、耳朵、鼻子,然后把這些視覺特征組合成一個(gè)稱為“人”的組合。我們是直接的觀察到人這個(gè)“整體”,而不是其他器官的“個(gè)體 的總合”。格式塔心理學(xué)主要有相似性原理、連續(xù)性原理、封閉性原理、對(duì)稱性原理等,舉例來(lái)說(shuō),比如我們看到下面幾個(gè)圖形:

1

我們可以發(fā)現(xiàn),雖然上圖中的幾組線條沒(méi)有完全閉合,但是我們依然能看出他們是圓、三角形、方,我們的大腦會(huì)自動(dòng)填補(bǔ)元素與元素間的空白部分,形成一段不存在的線段,這就是格式塔性理學(xué)中所說(shuō)的封閉性原理。

對(duì)于格式塔心理學(xué)的其他原理,有興趣可以尋找相關(guān)書籍進(jìn)行更深入的學(xué)習(xí),這里就不一一介紹了,下面我們通過(guò)幾個(gè)例子,給大家簡(jiǎn)單介紹一下“格式塔心理學(xué)”在字體設(shè)計(jì)中的運(yùn)用。

案例1 唯一

唯一兩個(gè)字給人一種很單純的感覺,因此,在設(shè)計(jì)的過(guò)程中我去除了一些比較繁瑣的筆畫結(jié)構(gòu),讓筆畫更簡(jiǎn)單。中國(guó)有“一生二,二生三,三生萬(wàn)物”之說(shuō),我們通過(guò)視覺自動(dòng)補(bǔ)償缺失筆畫來(lái)達(dá)到這一效果,增加了文字內(nèi)涵。

2
我們可以在電腦上打出“唯一”兩個(gè)字,觀察一下筆畫結(jié)構(gòu),我們可以發(fā)現(xiàn)字體中以橫畫與豎畫為主。

3
我們將“唯”字中傾斜的兩筆擺正,使筆畫更統(tǒng)一。

4
矩形工具將字體骨架搭建好,筆畫更為單純。

5
將筆畫加粗,并降低字體重心,使其在視覺上給人一種安定感。

6
接下來(lái)我們嘗試幾種方式來(lái)省略字體筆畫,第一個(gè)結(jié)構(gòu)很亂,節(jié)奏掌握的不到位;第二個(gè)整體不錯(cuò),那一點(diǎn)起到了“暗示”的作用,讓視覺自動(dòng)將筆畫補(bǔ)全;第三個(gè)沒(méi)有暗示的筆畫,看不出是“唯“字;第四個(gè)和第三個(gè)類似,看不出是圖形還是文字,筆畫省略太過(guò)頭。

7
通過(guò)對(duì)比,我們選擇了第二個(gè)進(jìn)行優(yōu)化。將筆畫粗細(xì)的分配重新調(diào)整,使筆畫在視覺上粗細(xì)一致,并且字體灰度更為平均。

8
一般來(lái)說(shuō),筆畫密集的地方要調(diào)細(xì),筆畫疏的地方要加粗,上圖時(shí)進(jìn)行調(diào)整后的筆畫,分別用數(shù)字和字母來(lái)代表對(duì)應(yīng)的筆畫,仔細(xì)觀察你會(huì)發(fā)現(xiàn)其中的差異。

9

利用輔助線對(duì)字體進(jìn)行進(jìn)一步規(guī)范,合理安排字體間距,使其更整體。

10
字體完成,規(guī)范后的字體比原來(lái)更耐看了。

11

12

案例2 修心

修心是一種心靈境界上的超脫,是一種心無(wú)雜念同時(shí)又懂得包容的博大胸懷。因此在字體上,我們也要去除繁雜的筆畫,回歸本心,讓字體更單純。

13

我先在紙上打印了宋體與黑體,通過(guò)比較后,我選擇了以黑體為基本體進(jìn)行設(shè)計(jì),因?yàn)樗误w筆畫結(jié)構(gòu)相對(duì)復(fù)雜,而黑體筆畫單純,比較符合我心中對(duì)“修心”二字的定位。

14

從上圖中我們可以看到,紅圈部分的筆畫國(guó)語(yǔ)緊密,整體比較繁瑣,因此我們要想辦法弱化它。

15嗯,感覺可以,還能認(rèn)出是“修心”二字,所以我們可以在在這個(gè)基礎(chǔ)上調(diào)整字體筆畫,使其結(jié)構(gòu)更嚴(yán)謹(jǐn)。我們將上圖中紅圈部分進(jìn)行進(jìn)一步優(yōu)化。

16
現(xiàn)在筆畫看起來(lái)比原先緊湊一點(diǎn),但是心字結(jié)構(gòu)還可以繼續(xù)簡(jiǎn)化,我們來(lái)嘗試一下。

17
好像還不錯(cuò),識(shí)別性和意境都有了,接下來(lái)我們根據(jù)這個(gè)字體骨架進(jìn)行深入刻畫。

18
我們調(diào)整一下字體重心和字間距,將“修”字的偏旁縮短,使之與“心”字底部在一條直線上,這樣能在視覺上產(chǎn)生一種特別的美感。

19

將“修”字筆畫轉(zhuǎn)折處出現(xiàn)的內(nèi)煎餃處理的圓滑一點(diǎn),使之更流暢。

20
我們?cè)賹?duì)比一下轉(zhuǎn)角處用直角好還是用圓角好,考慮到字體外圍筆畫以方形為主,所以我選擇了右邊的方案。

21
經(jīng)過(guò)細(xì)節(jié)的調(diào)整,這個(gè)字就完成了,修心養(yǎng)性,讓字體變得更簡(jiǎn)單,讓心靈變得更單純。

22

欣賞

前面我們通過(guò)兩個(gè)案例來(lái)和大家介紹了了一下“筆畫省略”的字體設(shè)計(jì)方法,希望大家有所收獲。下面給大家整理出幾個(gè)其他案例進(jìn)行欣賞學(xué)習(xí)。

欣賞

為了順利開展開主題,“欣賞”的部分內(nèi)容源自于互聯(lián)網(wǎng),無(wú)法一一查明原創(chuàng)作者,無(wú)法一一準(zhǔn)確列出出處,敬請(qǐng)諒解。

 

后記

23
字體設(shè)計(jì)的方法還有很多,筆畫省略只是其中之一,想要真正成為高手,必須不斷學(xué)習(xí)和開拓新視野,有時(shí)候“眼高手低”并非壞事,取長(zhǎng)補(bǔ)短,不斷總結(jié)和思考,才是提高的關(guān)鍵,以上只是工作生活中的一些經(jīng)驗(yàn)與大家分享交流,作品不甚完美,權(quán)當(dāng)拋磚引玉,希望大家喜歡。

相關(guān)專題《有關(guān)文字在移動(dòng)端的那點(diǎn)事

本文來(lái)自:JDC

日歷

鏈接

個(gè)人資料

存檔