漢字發(fā)展史

大約是在公元前14世紀(jì)，殷商后期，“表意符號”演變成了比較定型的“甲骨文”。西周時期到清朝，是書法誕生到飛速發(fā)展的時期，清末民初時期發(fā)展出了黑體、宋體、廣告美術(shù)字等。到現(xiàn)代，隨著互聯(lián)網(wǎng)快速發(fā)展，電腦、手機(jī)等電子產(chǎn)品的大量普及，屏幕上需要應(yīng)用的字體越來越多，更多的人開始了解并制作字體，字體設(shè)計也變得更加職業(yè)化。如圖：

漢字的發(fā)展歷程

以下是一些經(jīng)典的字體與主要發(fā)展時期：

美術(shù)字欣賞

我們欣賞一些清末民初的美術(shù)字。

汲取靈感

上面的圖片主要來自我平時收藏的靈感庫。我們平時要建立自己的資料庫或者說靈感庫，要學(xué)會去辨別什么是好的設(shè)計，學(xué)會借鑒。以字體為例，我們可以多從古書籍、老招牌、字體網(wǎng)站等載體和資料來源中去尋找樣例，去學(xué)著分析這些字體的結(jié)構(gòu)、風(fēng)格，分析它們好在哪里，哪些地方是我們可以借鑒的，必要的時候還可以臨摹，這樣印象會更深刻。

下面分享一些字體網(wǎng)站，如在 facebook、behance上有許多優(yōu)秀作品都是值得我們挖掘和學(xué)習(xí)的(部分網(wǎng)站需要搭梯子)。

看完了背景知識，我們一起了解字體設(shè)計之矩形造字法。

什么是矩形造字?

矩形造字俗稱方塊拼接法，就是利用Adobe illustrator（AI）軟件中的矩形工具來拼接字體的筆畫結(jié)構(gòu)，通過切割相連達(dá)到字體的設(shè)計感。

矩形造字如此簡單，你可能想說：我能看懂它是怎么做出來的，也知道別人做得很厲害，但我就是不知道怎么起手!

別急，接下來我分享一下我造字的思路。

造字思路闡述

這里需要提一下設(shè)計字體的思路，有的設(shè)計師可能遇到過這種情況：圖形會做，可一遇到標(biāo)準(zhǔn)字就不知從何下手(其他情況不做展開講述)。下面講講我的應(yīng)對方法，供大家參考。

造字思路我一般分為8部分進(jìn)行，如下圖，已有圖形LOGO、設(shè)計需求通常由甲方提供；需求分析、需求拆解、難點(diǎn)提煉經(jīng)驗較少的情況下可以用思維導(dǎo)圖分析，思維清晰可以跳到實戰(zhàn)環(huán)節(jié)；尋找方向、方向嘗試、優(yōu)化設(shè)計是實際操作部分。

字體設(shè)計思路

按照上圖流程實際過程如下，思路有了，我們進(jìn)入實戰(zhàn),畢竟實戰(zhàn)中成長最快。我將利用“百圖記”來做矩形造字法的范例。

經(jīng)驗豐富的伙伴，前述步驟可以在腦海中構(gòu)思完成，但到了實戰(zhàn)環(huán)節(jié)就需要尋找參考對象了，在做設(shè)計前根據(jù)對應(yīng)需求，我找到了李永銓老師設(shè)計的“譚木匠”作為參考對象，期間嘗試過其他方向，這里只以最后選取的方案為例分析。

首先，我對這組字體進(jìn)行簡單分析：哪些是我需要的地方?

新建文檔

下面開始設(shè)計，在Adobe illustrator（AI）中新建文檔，文檔參數(shù)可參考圖片。

選擇文字

1、選擇文字工具（快捷鍵“T”），在畫布上打出“百圖記”，選用思源黑體，72pt，透明度調(diào)整到20%。

2、給每個字加上70PX長寬、0.5pt描邊大小的線框。

3、鎖定線框跟文字（快捷鍵“Ctr|+2”）。

注：具體參數(shù)僅供參考，你也可以自己設(shè)置。

矩形工具

從左側(cè)菜單欄選擇矩形工具（快捷鍵“M"），在畫布上左擊鼠標(biāo)設(shè)置矩形數(shù)值（高度僅在此案例處統(tǒng)一固定為“6Px”），當(dāng)然也可以在圖中數(shù)字“3”處設(shè)置數(shù)值。

2、把畫好的矩形放到圖中數(shù)字“2”處。

結(jié)構(gòu)繪制

按同上方法，根據(jù)字體筆畫長短繪制出字體結(jié)構(gòu)。

注：

百字的撇、圖字的撇,為了跟圖形更匹配，符合現(xiàn)代感，都是由橫線旋轉(zhuǎn)60度而來，筆畫角度在不影響識別的情況下盡量統(tǒng)一，這樣設(shè)計感會更強(qiáng)。

觀察字體

這一步的字體只是一個大概的框架，還不能用，接下來我們觀察字體，找找問題。

小技巧安利：

1、把畫布縮小到50%。

2、起身退后半步觀察。

注：

為什么要縮小到50%去觀察：字體會使用于多種環(huán)境，要盡量避免在小屏幕使用場景下識別不清晰。

分析問題

1、字體大小不統(tǒng)一

單獨(dú)分析：

(1)“百”下面“日”相比上面“一橫”窄的多，顯得“百”整體要小。

(2)“圖”的回字里面全部擠在一堆，看不清，識別度低。

(3)“記”右邊的“己”跟左邊的“言”比例不協(xié)調(diào)。

對比分析：

“百”跟“圖”，“圖”由于筆畫多，百下面的“白”往里縮，整體會比圖字小，整體看上去坑坑洼洼，不協(xié)調(diào)。

2、字體筆畫、高度不統(tǒng)

“百”的一撇和“圖”的一撇，一個有斷開的痕跡，一個沒有。(如黃色標(biāo)記)三個字參差不齊，中宮有大有小。

初步調(diào)整

梳理出這些問題后，我們進(jìn)行初步調(diào)整(字體很難一步到位，需要多次調(diào)整)

1、“百”字，將“白”外擴(kuò)。

2、“圖”字，按照字庫字體的高度滿足不了需求，需要調(diào)整所有字體的高度。

3、“記”的左右兩部分高度對齊。

4、統(tǒng)一“百”、“圖”撇的筆畫角度。

5、“記”字，為了讓整組字更有現(xiàn)代感，“言”的一點(diǎn)改成一橫。

再次觀察

調(diào)整完后繼續(xù)觀察，觀察不同字的搭配情況。相對于“圖”、“記”而言，“百”的重心靠上，顯得不協(xié)調(diào)。“圖”在調(diào)整完部件高度后，整體識別度有所提升，但其中“回”字部分在尺寸較小情況下，識別度還是不高。

再次進(jìn)行調(diào)整

調(diào)整字體高度。在進(jìn)行細(xì)微調(diào)整時，要多次放大、縮小以觀察整組字體是否協(xié)調(diào)，觀察筆畫與筆畫之間的穿插關(guān)系（哪根在上面、哪根在下面、哪根長、哪根短）。

風(fēng)格初現(xiàn)

字體微調(diào)后，整體上看，還是難以一次就達(dá)到完滿的地步，如“圖”里面的“回”筆畫較多，接下來在不影響識別度的情況下，應(yīng)對“回”中間的口進(jìn)行筆畫刪減，而為了整組字風(fēng)格更加明確、簡潔，對“百”中間筆畫也進(jìn)行斷開處理。

挑選英文字體

接下來挑選英文字體。根據(jù)中文字體現(xiàn)代、簡約的風(fēng)格找到合適的英文字體進(jìn)行組合搭配，盡量嘗試多種組合方式。

此處使用的英文字體為Candara Bold。

組合搭配

將圖形與標(biāo)準(zhǔn)字進(jìn)行搭配后對比觀察：在思路闡述的需求拆解中，我提到過百圖記圖形LOGO的特點(diǎn)是圖形簡潔、極具現(xiàn)代感、圓滑中帶有棱角，而右邊圖形與標(biāo)準(zhǔn)字風(fēng)格明顯不搭。

風(fēng)格分析

這時就需要對標(biāo)準(zhǔn)字的風(fēng)格進(jìn)行分析。經(jīng)過分析，我給整組字體左下角、右上角都加上圓角（所有字都保持這個規(guī)則），賦予圖形既圓滑又稍帶棱角的風(fēng)格特點(diǎn)，使圖形跟標(biāo)準(zhǔn)字更加協(xié)調(diào)。

我們看看調(diào)整后的對比效果（細(xì)節(jié)效果僅供參考，調(diào)整無具體參數(shù)）。

回顧完整的設(shè)計過程

到了這里我們已經(jīng)全部完成一次字體設(shè)計，下面我們通過一張圖來回顧完整的設(shè)計過程。

最終效果

文章到這里就告一段落了,想必大家對如何設(shè)計字體有了初步感受,快去實戰(zhàn)練習(xí)吧。