2018-8-9 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
每個時代都有特定的印跡,我們感受比較直接的或許是每個時代的穿著打扮變化,其實人、事、物都會有時代特征,字體也不例外。但是如何將字體穿越到過往呢?今天要從字型變化和字體效果兩個方面聊聊如何把字體打造成我們口中所說的懷舊與復(fù)古。
舉個我們最熟悉的例子,電話從轉(zhuǎn)盤撥號到功能機再到智能機一直都在更新?lián)Q代,單從外觀看是變得越來越簡潔,其實衣食住行我們都可以找到相類似的變化。從過去到現(xiàn)在每一天都在變,我們是否可以從千絲萬縷中總結(jié)出一些大趨勢,為字體所用?
上圖是書法字體中篆書、隸書、行書和楷書,依序也是書法的演變過程,如果對此無感的話可以想一想繁體字到簡體字的變化,從中不難總結(jié)由繁至簡的變化規(guī)律。那么說僅僅是把文字造型做的「繁雜」就能夠成功「穿越」嗎?當然不是,下面用幾個實例分享幾個具體的方法。
字體設(shè)計中的很多形變要有根有據(jù),比如我們要設(shè)計一款有年代的古風(fēng)字體其實就可以借閱古時書法中的一些寫法,其中最具代表性的當屬篆書。
篆書具有文字形體的象形性特征,雖然當下已失去實用性質(zhì)但是我們可以根據(jù)自身的需求做一定的優(yōu)化,以達到古為今用的目的。
下面以「詩畫集」三字做分解。上圖文字是從網(wǎng)絡(luò)中搜尋的「詩畫集」的篆書寫法,一眼望去是不是非常的「繁雜」,甚至同一字會有多種不同的寫法,結(jié)構(gòu)變化也是很多樣,那么在眾多的文字中我們又應(yīng)該如何挑選適合的呢?
一般來講大家可以注意以下三個規(guī)律:
如上圖是我選出比較中意的三個字,按照上面提出的幾個標準很顯然第一個字會被淘汰,但是我更看重的是左邊「言」字旁的筆法,右邊當然要舍棄重做。
第一步就是依據(jù)上面的字用線條勾勒出結(jié)構(gòu)框架,最后一個字相比前面的字是比較扁平一些的在做的過程中要進行拔高以保持三個字的統(tǒng)一。
前面說了這種方法不是完全照搬,我們一起看看有哪些地方做了調(diào)整:
僅僅完成了結(jié)構(gòu)的搭建肯定還是不充分的,細節(jié)的處理一定少不了。等線的筆畫本身是比較直接的,可適當添加一些圓角處理,這也更符合篆書的字體特征。如上圖,第一個字未做任何處理,第二個字筆畫折角由原來的直角變?yōu)閳A角處理。第三個字又從前面基礎(chǔ)上增加內(nèi)部的圓角,如此一來筆畫有了些許頓挫感,更加耐看。
色彩和版式也是細節(jié)的一部分,最后選用深藍色并配紅色印章點綴,一組比較復(fù)古但又符合現(xiàn)代人審美的文字設(shè)計就完成了。這種古為今用的方法看下來很簡單,但是除了上面講的注意事項,字體的空間配置均勻有序也是至關(guān)重要的一環(huán),任何字都如此。
就像電視劇布景一樣,盡可能還原當時的場景,拍出來的影片才能有更強的代入感;而我們要設(shè)計有年代感的字體最直接有效的方式就是還原那個年代的字體特征。和第一種方式原理類似,但實際還是有些許不同。下面我們由古代穿越到近代,還是「詩畫集」三字。
網(wǎng)絡(luò)上有很多關(guān)于老字體的圖片,平時遇見了要保存一下,說不定什么時候會用得到,另外沒有保存也不要緊,我們字體學(xué)堂公眾號會不定期更新收集的老字,方便大家學(xué)習(xí)參考。
老字的年代感除了紙張的斑駁更重要的是字型的特征,大概分類的話一個是宋體字另一種是有一些幾何形態(tài)的應(yīng)用變化,另外由于老字多由手工繪制,有很強的隨意性,這也是老字的一大特征。
第一步是常規(guī)筆畫的提取,由于年代久遠又加上拍攝等因素,很多字體細節(jié)是模糊不確定的,不要把客觀因素造成的字體細節(jié)變化也原封不動的照搬過來,而應(yīng)該是邊提取邊優(yōu)化。
有一些我們所需的筆畫可能老字當中并沒有,這個時候就要根據(jù)老字的風(fēng)格做筆畫擴展;另外老字中的筆畫轉(zhuǎn)角不會很銳利,通常會有一點圓角,筆畫的線條也不是筆直,這些都可以在后期統(tǒng)一添加,勿從初始筆畫添加。
基礎(chǔ)筆畫搞定下一步就可以進行結(jié)構(gòu)搭建了,除了筆畫的借用結(jié)構(gòu)空間特征我們也可以參閱,「三防常識」這幾個字整體是扁平的,內(nèi)部空間比較緊,這是本組字結(jié)構(gòu)上的特點要抓住。
基礎(chǔ)筆畫可不是一成不變,像是「集」字橫筆居多,如果保持原來的橫筆粗細的話空間上會變得非常擠也不美觀,所以將橫筆減細處理;同一筆畫在不同的字體中都會有所差異,這一點就要求大家對字形結(jié)構(gòu)要了解的更透,做字要「活」。
最后如上圖,其實基礎(chǔ)結(jié)構(gòu)搭建出來到最后的確定字型,你看到的結(jié)果只是兩步帶過,期間是有很多細碎反復(fù)的調(diào)整,好字多磨!
這種方法會上癮,以「汽水」兩字再來一組。過程同上就不再復(fù)述,直接看結(jié)果。
今天選的這兩組老字筆畫上還不算最有特點的,還有一些個性更突顯,大家不妨動手一試,看看是不是真如你所看到的這樣簡單。
如果平時來不及設(shè)計想快速「穿越」這種情形也是有的,所以字體效果營造出表面的年代感還是要講一下,因為是軟件的基礎(chǔ)操作所以就不很細致咯。
1. 紋理疊加
最簡單常用的肯定是各種紋理疊加,甚至這是很多同學(xué)做年代感的文字必備選項。如上圖,左邊是常規(guī)字體,右邊以此為基礎(chǔ)疊加紋理。說兩個注意點:一是紋理不在多,要避免紋理搶風(fēng)頭;二是紋理也有虛實對比,不可做的太平均。
2. 粗糙輪廓
使用同樣的字庫字,利用 Ai 軟件中的「粗糙化」實現(xiàn)字體輪廓的粗糙處理,要掌握好粗糙化中的兩個數(shù)值大小的變化,另外還可以通過路徑位移制造字體內(nèi)部的紋理變化,使之更有歲月斑駁感。
以上分享你會發(fā)現(xiàn),年代感的字體設(shè)計由內(nèi)及外是相對復(fù)雜化,同時要善于抓特征,幾個思路幫大家梳理一遍,有沒有收獲一點呢?
藍藍設(shè)計( paul-jarrel.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://paul-jarrel.com