宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

2020-7-13    資深UI設(shè)計(jì)者

宋體字可以說(shuō)是我們現(xiàn)在最常用的字體之一,一方面他與黑體一樣,具有非常良好的可讀性和易辨性,另一方面,他又比黑體更具有歷史感和東方韻味,我們可以看到很多的教材、書(shū)籍內(nèi)文或者官方文件,都是用的宋體字,甚至許多設(shè)計(jì)都會(huì)用一些比較有表現(xiàn)力的宋體字作為標(biāo)題。所以可想而知,學(xué)習(xí)設(shè)計(jì)宋體字對(duì)我們的幫助有多大。正所謂欲知大道,必先知史。所以在講如何設(shè)計(jì)宋體字之前,我們先來(lái)扒一扒宋體字的歷史吧。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

雖然說(shuō)宋體字叫做宋體字,但是如果要追溯宋體字的起源,我們還得從唐朝說(shuō)起。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

唐朝時(shí)期,佛教在中國(guó)開(kāi)始盛行開(kāi)來(lái),唐朝皇帝甚至派出唐僧師徒四人前往西天取經(jīng)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

于是便出現(xiàn)了「抄經(jīng)生」這種人肉印刷機(jī)。這篇經(jīng)文便是當(dāng)時(shí)唐朝的抄經(jīng)生所抄寫(xiě)的,他們需要使用規(guī)整統(tǒng)一的楷體,文字的開(kāi)頭在同一水平線,而且每一列的字?jǐn)?shù)統(tǒng)一規(guī)定為17或者19個(gè)字,方便字?jǐn)?shù)的統(tǒng)計(jì),像這一篇經(jīng)文每一列就是17個(gè)字。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

可是即便出現(xiàn)了大量的抄經(jīng)生,依舊滿足不了人們對(duì)經(jīng)書(shū)的需求。于是聰明的中國(guó)人開(kāi)始印刷經(jīng)書(shū),將經(jīng)文刻在木板上,就可以實(shí)現(xiàn)大量的印刷了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

可是楷書(shū)刻起來(lái)是很不方便的。一方面,書(shū)法家寫(xiě)的楷書(shū)講究起承轉(zhuǎn)合、抑揚(yáng)頓挫,不同的人寫(xiě)出來(lái)的字風(fēng)格差異十分明顯,例如顏真卿和趙孟頫他們所寫(xiě)的「宋」字就明顯不同,即便用筆臨摹都很難了,更別說(shuō)雕刻出來(lái)了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

另一方面楷體由于是書(shū)寫(xiě)的字體,所以大多數(shù)筆畫(huà)都是帶有弧度的,而在木板上刻字,曲線是非常難刻的。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

于是他們逐漸將曲線刻成直線,把筆畫(huà)的弧形特征降低,也將楷體中相同的筆畫(huà)進(jìn)行規(guī)范了,這樣的字體便是宋體字的前身。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們可以看一下宋朝時(shí)期的刻本,這是南宋時(shí)期陳宅經(jīng)籍鋪所刊刻的《朱慶馀詩(shī)集》。這時(shí),撇、捺等筆畫(huà)的彎曲程度大大降低了,而豎筆和橫筆也基本上變成筆直的直線了。不過(guò)宋朝時(shí)期刻本體的橫畫(huà)依舊是傾斜的,從中依然能很明顯地看到楷體的痕跡。那么為什么宋體字會(huì)形成橫細(xì)豎粗,橫畫(huà)后帶三角形飾角的字形呢?

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

那是因?yàn)榭套值哪景迳鲜菐в心炯y的,如果垂直木頭的紋理刻的話,筆畫(huà)會(huì)比較容易斷,需要加粗一些。而如果是順著木紋刻的話,就沒(méi)那么容易斷,所以可以相對(duì)細(xì)一些??墒菫槭裁词菣M畫(huà)細(xì),豎畫(huà)粗呢?反過(guò)來(lái)不行嗎。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

那是因?yàn)樵诖蠖鄶?shù)的漢字中,橫畫(huà)都是比豎畫(huà)多的。上海交大的郭曙綸教授對(duì)20902個(gè)漢字進(jìn)行了統(tǒng)計(jì),發(fā)現(xiàn)這些漢字的總筆畫(huà)數(shù)量多達(dá)268479個(gè),而其中橫畫(huà)有82682個(gè),占30.8%,而豎畫(huà)有51459個(gè),占19.2%。可見(jiàn),在漢字中橫畫(huà)是比豎畫(huà)多的。所以如果將橫畫(huà)刻粗,豎畫(huà)刻細(xì)的話,可能會(huì)使得字體過(guò)擠而不美觀。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

雖然說(shuō)橫畫(huà)順著木紋,比較不容易斷,可是橫畫(huà)的兩端還是會(huì)比較容易磨損的,所以工匠們一般會(huì)將橫畫(huà)的兩端稍微刻大一些,形成飾角。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

在明朝,宋體得到了進(jìn)一步的簡(jiǎn)化,原本復(fù)雜精細(xì)的刀刻技法簡(jiǎn)化成了橫、豎和斜三種,所以刻字工匠的門(mén)檻大大降低了,宋體字得到了真正的普及。我們同樣來(lái)看一下明朝時(shí)期的刻本,這是明朝時(shí)期汲古閣刻印的《道德指歸論》,這個(gè)時(shí)候的宋體橫畫(huà)已經(jīng)基本變成水平了,雖然筆畫(huà)依舊比較張揚(yáng),但是已經(jīng)少了許多楷體的影子。所以從明朝時(shí)期開(kāi)始的刻本體才能算作真正的宋體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

也是在明朝時(shí)期,宋體字傳到了日本,所以現(xiàn)在日本將宋體字稱(chēng)為明朝體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

清朝是刻本最多的一個(gè)朝代,而宋體字在中國(guó)真正被確定統(tǒng)一稱(chēng)為「宋體字」也是發(fā)生在清朝。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

了解了宋體字的歷史后,我們可以發(fā)現(xiàn)宋體字的意義并非只是美觀和易讀而已,他是經(jīng)過(guò)中華民族近千年傳承、優(yōu)化和改良的文化結(jié)晶,他的身上有著厚重的文化氣息。也難怪中國(guó)、日本、韓國(guó)等受中華文化影響的國(guó)家會(huì)對(duì)宋體有獨(dú)特的偏愛(ài)。接著我們就正式進(jìn)入設(shè)計(jì)宋體字的教程部分,首先我們來(lái)了解一下宋體字的主要特征。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

從楷體字轉(zhuǎn)變?yōu)樗误w,主要產(chǎn)生了三個(gè)特征,第一個(gè)是橫平豎直,也就是說(shuō)橫畫(huà)是水平的,豎畫(huà)是垂直的。第二個(gè)特征是橫畫(huà)比較細(xì),豎畫(huà)比較粗。第三個(gè)特征是筆畫(huà)上出現(xiàn)了三角形的裝飾角。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

可是隨著字體設(shè)計(jì)的發(fā)展,對(duì)于宋體的定義已經(jīng)越來(lái)越模糊了。例如上面的這三種字體,雖然他們不完全滿足宋體的特征,可是它們都能算作是宋體。所以我們也不需要對(duì)宋體下一個(gè)死定義,免得我們?cè)谠O(shè)計(jì)字體的時(shí)候被定義所束縛住了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

可是仿宋體是不能夠算是宋體字的。我們看仿宋體是不是覺(jué)得他和宋朝時(shí)期的刻本非常像呢?因?yàn)榉滤误w是在民國(guó)時(shí)期,丁善之和丁輔之模仿宋刻本所設(shè)計(jì)出來(lái)的字體,所以仿宋體模仿的是宋朝刻本,而非宋體字,那么仿宋體當(dāng)然也就不能算在宋體的行列里了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接著我們來(lái)分析一下宋體字的氣質(zhì)。由于宋體誕生于明朝,具有非常悠長(zhǎng)的歷史,而黑體是在民國(guó)時(shí)期才產(chǎn)生的,所以宋體相對(duì)于黑體更能體現(xiàn)傳統(tǒng)感、文化感的氣質(zhì)屬性。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

所以我們做現(xiàn)代風(fēng)格的設(shè)計(jì)的時(shí)候,可以使用黑體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而做比較具有傳統(tǒng)風(fēng)格的設(shè)計(jì)則可以用宋體。當(dāng)然也并非說(shuō)宋體就沒(méi)辦法做現(xiàn)代感的設(shè)計(jì),通過(guò)對(duì)宋體體飾和中宮的設(shè)計(jì),我們完全可以做出一款現(xiàn)代型的宋體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

先來(lái)說(shuō)一下中宮,我們?cè)谥暗慕坛汤镎f(shuō)過(guò),中宮越大,越顯現(xiàn)代感,而中宮越小,則越有傳統(tǒng)感。在宋體里也不例外。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們?cè)賮?lái)看看這兩個(gè)「東」字,很明顯也是左邊的「東」字更現(xiàn)代一些,而右邊的「東」字傳統(tǒng)一些。這兩個(gè)字的區(qū)別在于體飾的不同。體飾越少越簡(jiǎn)潔,宋體就越顯現(xiàn)代;體飾越多越復(fù)雜,就越顯傳統(tǒng)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

另外幾何形的體飾也會(huì)給宋體帶來(lái)現(xiàn)代感。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而傳統(tǒng)宋體字的體飾則是具有手寫(xiě)感的,線條比較圓滑。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

根據(jù)體飾和中宮的不同,我們可以大致地將宋體分為三大類(lèi)。中宮小、體飾多且具有手寫(xiě)感的宋體歸類(lèi)為傳統(tǒng)型宋體,中宮大、體飾少且為幾何體飾的則歸類(lèi)為現(xiàn)代型宋體。而具有一定手寫(xiě)感的體飾,且中宮偏大的宋體,則歸類(lèi)為中間型的宋體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

除了中宮和體飾之外,我們還經(jīng)常調(diào)整筆畫(huà)粗細(xì)去適應(yīng)宋體字不同的用途。首先我們先來(lái)講講正文的宋體。一般正文的字號(hào)都是比較小的,如果橫畫(huà)過(guò)細(xì)的話,會(huì)使得橫畫(huà)幾乎看不見(jiàn)了,而如果橫畫(huà)過(guò)粗的話,筆畫(huà)又會(huì)糊在一塊了,所以為了讓宋體字在小字號(hào)下也能清晰的顯示,一般橫畫(huà)和豎畫(huà)的粗細(xì)會(huì)控制在1:2到1:3左右,最大一般也不會(huì)超過(guò)1:4。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

不過(guò)我們?cè)O(shè)計(jì)正文字體的機(jī)會(huì)還是比較少的,大多數(shù)時(shí)候我們都是需要設(shè)計(jì)比較具有張力的標(biāo)題字。這個(gè)時(shí)候我們就可以嘗試?yán)髾M畫(huà)和豎畫(huà)的粗細(xì)差距。當(dāng)橫畫(huà)和豎畫(huà)的粗細(xì)差距非常大的時(shí)候,可以產(chǎn)生較強(qiáng)的視覺(jué)沖擊力。畫(huà)面中這三款標(biāo)題宋體,都用了細(xì)橫畫(huà)搭配粗豎畫(huà)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

有時(shí)候我們也可以反其道而行之,將橫畫(huà)加粗,讓橫畫(huà)與豎畫(huà)差不多的粗細(xì)。這樣我們就可以獲得一款非常醒目的宋體。這樣的宋體有點(diǎn)像比較粗的黑體,既有醒目的特點(diǎn),也保留了宋體優(yōu)雅的屬性。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

當(dāng)然,具有張力的標(biāo)題宋體也并非一定要通過(guò)控制橫豎筆畫(huà)的粗細(xì)來(lái)塑造,通過(guò)設(shè)計(jì)一些有張力的體飾,同樣可以讓宋體字變得具有表現(xiàn)力。設(shè)計(jì)體飾是設(shè)計(jì)宋體字非常重要的一個(gè)環(huán)節(jié),因?yàn)樗误w字的大多數(shù)筆畫(huà)是存在許多體飾的,我們除了要將體飾設(shè)計(jì)得好看之外,更重要的是讓不同的體飾和諧共存。如果一個(gè)宋體字里存在的體飾都風(fēng)格不一,那么這個(gè)宋體字看著就會(huì)不倫不類(lèi)了。下面我就給大家介紹一個(gè)我比較常用的,設(shè)計(jì)宋體字體飾的方法。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

在做字之前,我們要先確定我們想要做的字體的氣質(zhì),是傳統(tǒng)的,還是現(xiàn)代的?文藝的還是可愛(ài)的?又或者是其他的氣質(zhì)。因?yàn)槲覀兦懊嬉舱f(shuō)到,體飾和中宮都會(huì)影響字體的氣質(zhì),所以我們必須要確定了氣質(zhì)之后,才能動(dòng)手去設(shè)計(jì)字體的中宮和體飾。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

另外還要確定字體的用途,需要比較有張力的標(biāo)題字體,還是需要具備閱讀舒適性的正文字體,那我們也能確定文字的筆畫(huà)粗細(xì)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

確定好了風(fēng)格之后,我們就可以開(kāi)始設(shè)計(jì)筆畫(huà)了。那么我們先來(lái)回顧一下,漢字里的八個(gè)基本筆畫(huà),我們可以先把這八個(gè)筆畫(huà)的體飾特征都設(shè)計(jì)好了,再去拼湊我們想要的字。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

一般來(lái)說(shuō),我們?cè)O(shè)計(jì)宋體會(huì)先從橫畫(huà)開(kāi)始設(shè)計(jì)。因?yàn)榇_定了橫畫(huà)之后,體飾的風(fēng)格、體飾大小、筆畫(huà)粗細(xì)等很多東西就都可以確定了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

其實(shí)宋體中的體飾都是來(lái)源于書(shū)法中的頓筆,所以我們來(lái)看看書(shū)法中,橫畫(huà)是怎么寫(xiě)的,書(shū)法中的橫在起筆和收筆處分別有一個(gè)頓筆。這兩個(gè)頓筆分別對(duì)應(yīng)著宋體橫畫(huà)首尾的兩處體飾。對(duì)于宋體字來(lái)說(shuō),橫畫(huà)末尾的這個(gè)體飾是非常重要的,他對(duì)整個(gè)字體的氣質(zhì)影響非常的大。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們前面已經(jīng)介紹了這兩種襯角分別具有現(xiàn)代感和傳統(tǒng)感。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而這一個(gè)的襯角是一個(gè)比較圓潤(rùn)的圓形,他可以用來(lái)做比較可愛(ài)的宋體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

這一個(gè)襯角和剛剛的就正好相反,非常的非常尖銳,適合用來(lái)做比較恐怖的宋體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

還有一點(diǎn)要注意的是,如果豎畫(huà)越粗的話,橫畫(huà)的襯角一般也要相應(yīng)的變大一些。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

因?yàn)樗误w的橫畫(huà)本來(lái)就已經(jīng)很細(xì)了,如果襯角還非常小的話,橫畫(huà)很容易就會(huì)被忽略掉了,橫畫(huà)末端的這個(gè)三角形起到了一定強(qiáng)調(diào)橫線的作用。當(dāng)然如果是故意要設(shè)計(jì)成小襯角或者無(wú)襯角的話就另當(dāng)別論了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

橫畫(huà)做好之后,就可以開(kāi)始設(shè)計(jì)豎畫(huà)了。在書(shū)法中,豎畫(huà)在起筆處會(huì)有一個(gè)頓筆,而收筆的地方會(huì)稍微往左側(cè)偏一些,這樣分別形成了宋體中豎畫(huà)起筆和收筆的兩處體飾。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

那么我們應(yīng)該怎么用橫畫(huà)推導(dǎo)出豎畫(huà)呢?橫畫(huà)和豎畫(huà)關(guān)聯(lián)度最大的地方在橫畫(huà)三角形襯角和豎畫(huà)上方襯角的這個(gè)地方。例如這一組都是直線加切角。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而這組都是曲線加圓角。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

另外我們還能將這兩個(gè)地方給聯(lián)系起來(lái),因?yàn)樗麄兌际瞧鸸P的位置。如果橫畫(huà)的起筆是水平的話,那么豎畫(huà)的起筆就應(yīng)該是垂直的。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而如果橫畫(huà)的起筆是往外擴(kuò)的話,那么豎畫(huà)的起筆也可以往外擴(kuò)張。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我一般還會(huì)將豎畫(huà)的起筆和收筆的的地方關(guān)聯(lián)起來(lái),如果起筆是垂直的,那么收筆我也會(huì)設(shè)置成垂直的。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而如果起筆往外擴(kuò)的話,那么收筆我也會(huì)往外擴(kuò)形成書(shū)寫(xiě)曲線,這樣整個(gè)豎畫(huà)能看起來(lái)平衡一些。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接著來(lái)設(shè)計(jì)橫折。書(shū)法中在這個(gè)轉(zhuǎn)折的地方會(huì)有一個(gè)頓筆。所以在宋體的橫折處也會(huì)形成一個(gè)裝飾角。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

其實(shí)橫折這個(gè)筆畫(huà)在設(shè)計(jì)好橫畫(huà)和豎畫(huà)之后基本就已經(jīng)出來(lái)了。只要將他們組合在一起,然后將橫畫(huà)的襯角往回縮小一些,橫折就做好了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

講完了橫折我們順便也講一下這種口字的結(jié)構(gòu)好了。口字結(jié)構(gòu)由剛剛做好的橫折加上一個(gè)豎線和一個(gè)去掉三角襯角的橫線組成。然后我們需要做一些細(xì)微的調(diào)整。豎筆體飾的這個(gè)地方需要往上收一些,不要漏出來(lái),這樣的筆畫(huà)看著能干凈一些。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

然后豎畫(huà)入筆的地方也要往上提一些,讓左右兩邊的體飾能夠平衡。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

最后加上橫畫(huà),把襯角的部分裁去,注意兩個(gè)豎線需要出頭一些。這個(gè)口字就完成了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

然后來(lái)做撇和捺。書(shū)法里的撇起筆的地方有一個(gè)頓筆,所以宋體里,撇有一處體飾。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

書(shū)法里捺則在起筆和收筆處各有一處轉(zhuǎn)折。所以宋體里,捺則有兩處體飾。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

撇基本上可以從豎線輕易地推導(dǎo)出來(lái),因?yàn)樗麄兊钠鸸P都是一樣的,只要稍微調(diào)整一下起筆的角度就可以了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而捺與撇是正好相反的,起筆細(xì),收筆粗,所以捺的起筆需要縮小一些,但是需要保證這兩個(gè)地方是相同的。而捺的收筆是一個(gè)比較獨(dú)立的地方,只需要風(fēng)格保持大致一致就好了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接著來(lái)做提。在書(shū)法中,提的起筆一般是會(huì)有一個(gè)頓筆的,這一個(gè)頓筆與豎的起筆的頓筆是類(lèi)似,所以在宋體中,提的起筆會(huì)有一個(gè)與豎類(lèi)似的體飾。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

提與豎起筆的體飾是差不多的,只是方向不同而已。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

最后就只剩下點(diǎn)和鉤兩個(gè)基礎(chǔ)筆畫(huà)還沒(méi)設(shè)計(jì)了。這兩個(gè)筆畫(huà)和別的筆畫(huà)之間的聯(lián)系不太大,同樣也只需要保持整體筆畫(huà)風(fēng)格一致就好了。不過(guò)點(diǎn)和鉤之間卻存在著一定的聯(lián)系的。最主要的是體現(xiàn)在這個(gè)地方,如果是尖角,那么點(diǎn)和鉤最好都統(tǒng)一為尖角。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而如果點(diǎn)是圓滑過(guò)渡的,那么鉤最好也是圓角。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

另外還有如果點(diǎn)的這個(gè)位置是比較飽滿的話,那么鉤轉(zhuǎn)折的位置也應(yīng)該設(shè)計(jì)得飽滿一些。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

而如果是瘦瘦的點(diǎn),鉤轉(zhuǎn)折的位置也要相應(yīng)的瘦一些。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

最后還有一個(gè)需要統(tǒng)一的地方,就是撇、點(diǎn)、鉤等筆畫(huà)的收筆必須要保持一致??梢允菆A角、還是切角、尖角或者是其他特殊的角,收筆的大小也應(yīng)該統(tǒng)一。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

不過(guò)我們?cè)O(shè)計(jì)宋體字時(shí),也并非一定要百分百遵循這一套設(shè)計(jì)方法,因?yàn)檫@一套設(shè)計(jì)理論是結(jié)合書(shū)法所推導(dǎo)出來(lái)的,而隨著時(shí)代的發(fā)展,宋體字的形式和定義也不斷被拓寬,例如一些比較新型的宋體,都會(huì)省略掉豎、撇、捺等筆畫(huà)的體飾,讓字體顯得更簡(jiǎn)潔一些。所以如果大家想做一些比較創(chuàng)新的宋體字,而非傳統(tǒng)嚴(yán)謹(jǐn)?shù)淖煮w的話,大可以放開(kāi)手腳去設(shè)計(jì),最終只要保證美觀和和諧統(tǒng)一就好了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們?cè)趯⑺泄P畫(huà)都設(shè)計(jì)完之后,就可以將筆畫(huà)拼起來(lái)了,可是如果我們?cè)O(shè)計(jì)的筆畫(huà)比較沒(méi)有特點(diǎn),最后拼湊出來(lái)的字體也就顯得有些中規(guī)中矩,缺乏視覺(jué)張力。那么接下來(lái)我就給大家介紹幾個(gè)讓宋體字比較有張力的常用方法。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

第一個(gè)是在宋體字的筆畫(huà)之間加入連接線,模擬寫(xiě)字的連筆效果。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

由于宋體字是用刀刻出來(lái)的字,基本上是不會(huì)有連筆的存在,而加入連筆線條就可以緩和宋體字刀刻的僵硬感,讓文字顯得更靈動(dòng)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

第二個(gè)方式是將設(shè)計(jì)好的筆畫(huà)松散的排列。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

因?yàn)樗误w具有文藝的氣質(zhì),而將筆畫(huà)松散地排列能夠體現(xiàn)一種慵懶的文藝感,和宋體的氣質(zhì)是非常契合的。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

不過(guò)這種方式最好能與詞義吻合,例如團(tuán)圓這個(gè)詞應(yīng)該是筆畫(huà)凝結(jié)在一起更能符合團(tuán)圓的詞義,像這樣做得松松垮垮的味道就有些不太對(duì)了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

第三個(gè)方式是省略橫畫(huà)。由于宋體字存在著三角襯角,所以即便省略掉了橫線,依舊能夠通過(guò)三角襯角判斷橫線的位置。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

所以省略橫畫(huà)對(duì)宋體的識(shí)別度影響不大,并且能夠增加宋體字的圖形感。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

第四個(gè)方式是斷筆。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

剛剛我們講到了宋體存在著三角襯角,所以省略掉橫畫(huà)也不會(huì)過(guò)多的影響識(shí)別度。那么在斷筆這里也是一樣的道理,我們最好選擇斷開(kāi)橫畫(huà),因?yàn)檫@樣對(duì)字體識(shí)別度的影響最小。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

也許有的人聽(tīng)到這里會(huì)覺(jué)得,這才是課程的重點(diǎn)。其實(shí)并不是的,這里教給大家的四個(gè)增加張力的手法只是輔助工具而已,不是說(shuō)我先隨便瞎設(shè)計(jì)一個(gè)字體,然后再套用這幾個(gè)方法去增加形式感,我認(rèn)為這樣的方式只是在遮丑而已,而作為設(shè)計(jì)師的我們更應(yīng)該追求骨骼和體飾的美感,而非一味遮丑。那么教程部分就到這里結(jié)束,下面給大家示范一個(gè)案例吧。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們這節(jié)課的案例就是做韋禮安這首貓咪共和國(guó)的單曲封面。這是我從MV開(kāi)頭截的圖。我們可以看到MV中貓咪共和國(guó)這五個(gè)字是手寫(xiě)的,給人一種可愛(ài)隨意的感覺(jué)。那么我們這節(jié)課就嘗試用宋體字來(lái)體現(xiàn)這種感覺(jué)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

那么我們對(duì)這款字體的定位就很明確了,是一款可愛(ài)的標(biāo)題字體。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們先在屏幕上打上貓咪共和國(guó)五個(gè)字作為字體骨骼的參考。這里我選擇了思源宋體,因?yàn)樗荚此误w是一款現(xiàn)代型的字體,中宮比較大一些。太過(guò)緊湊的中宮不適合我們塑造可愛(ài)、隨意的感覺(jué)。另外一個(gè)很重要的原因是,思源宋體雖然高貴,但是免費(fèi),如果我們改動(dòng)的程度不大,也不會(huì)造成侵權(quán)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

為了讓字體更憨一點(diǎn),我們可以將文字壓扁一點(diǎn)點(diǎn),營(yíng)造出一種老子一米五的感覺(jué)。然后就可以降低透明度,開(kāi)始在這個(gè)參考骨架上秀一波操作了,接下來(lái)我們就一個(gè)筆畫(huà)一個(gè)筆畫(huà)地來(lái)設(shè)計(jì)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

首先因?yàn)槭菢?biāo)題字體,所以我們希望做一個(gè)橫畫(huà)和豎畫(huà)都差不多粗的宋體,這樣會(huì)比較醒目一些。然后因?yàn)闅赓|(zhì)是可愛(ài)的,所以我把體飾設(shè)置成圓圓的,胖胖的。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們用橫畫(huà)推導(dǎo)出豎畫(huà)。體飾方面基本上就直接照搬了橫畫(huà)的體飾,因?yàn)闄M畫(huà)的風(fēng)格很明顯了,豎畫(huà)保持一致就可以了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接著做橫折。我們先將橫畫(huà)和豎畫(huà)湊一起看看。這樣會(huì)有兩個(gè)比較大的問(wèn)題,一個(gè)是豎線的體飾凸出來(lái)了一塊,另一個(gè)是橫畫(huà)和豎畫(huà)的襯角疊加在一塊顯得太大了。所以我們需要將襯角縮小一些。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接著做口字結(jié)構(gòu),我們將豎畫(huà)放好之后,發(fā)現(xiàn)不用調(diào)整也挺平衡的,所以我們就直接用這一個(gè)口字。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

然后撇和捺的起筆我們也可以直接用豎畫(huà)的起筆推導(dǎo)出來(lái)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

值得注意的是,我們可以看一下這個(gè)撇,為了凸顯這個(gè)筆畫(huà)的可愛(ài),所以我們筆畫(huà)的粗細(xì)變化其實(shí)是很小的,為的是讓收筆的地方比較鈍一些,顯得更人畜無(wú)害。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

同樣為了營(yíng)造字體可愛(ài)的氣質(zhì),我將捺的收筆也設(shè)計(jì)成圓弧收筆,而并非普通宋體的尖銳收筆。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接下來(lái)我們應(yīng)該是要做提筆畫(huà)的,可是我們發(fā)現(xiàn)這五個(gè)字里并沒(méi)有提,所以我們就跳過(guò)他,直接做點(diǎn)和鉤了。同樣為了保證風(fēng)格的一致,這個(gè)點(diǎn)的粗細(xì)變化也不大,而且頭特別鈍。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

點(diǎn)和鉤之間是有關(guān)聯(lián)的,這三組地方分別互相對(duì)應(yīng)。

① 端點(diǎn)應(yīng)該都比較大,比較鈍一些;

② 圓滑地過(guò)渡;

③ 屁股的地方比較飽滿一些。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

將做好的筆畫(huà)放上去,接著還需要做一些調(diào)整,因?yàn)槲覀儸F(xiàn)在用的還是思源宋體的骨架,這個(gè)骨架和我們?cè)O(shè)計(jì)的筆畫(huà)并不一定搭。我對(duì)字面大小,視錯(cuò)覺(jué)等進(jìn)行了一定的修正,然后還將中宮稍微擴(kuò)大了一些。這時(shí)候我們會(huì)發(fā)現(xiàn),調(diào)整過(guò)后的這組字依然顯得太過(guò)正經(jīng),還是擺脫不了思源宋體正文字的屬性,而我們想做的字應(yīng)該是可愛(ài)、慵懶的標(biāo)題字。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

不知道大家還記不記得我們剛剛講的宋體字四種增加張力的套路。很明顯松散筆畫(huà)這種方式最適合隨機(jī)慵懶的感覺(jué),那么我們來(lái)試試看。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

我們先將這五個(gè)字的字距拉開(kāi)一些,方便我們調(diào)整筆畫(huà)。然后將筆畫(huà)松散地排列開(kāi)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接著我們還需要做一些調(diào)整,這樣看起來(lái)太粗糙了。我們將點(diǎn)、撇、捺等筆畫(huà)調(diào)短一些,讓他們具有點(diǎn)的感覺(jué)。因?yàn)辄c(diǎn)的構(gòu)成具有隨機(jī)和活潑的氣質(zhì)。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

然后將重心往下壓,因?yàn)橹匦目肯碌淖煮w會(huì)顯得比較憨一些,那么我們這一組字就完成了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

最后我們用這個(gè)字來(lái)做一個(gè)版面,先建立一個(gè)單曲封面125mm*125mm的畫(huà)板,并設(shè)置5mm的頁(yè)邊距和7*7的網(wǎng)格。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

然后我們放入一張貓的照片作為版面的主體,占據(jù)右下角的5.5欄。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

接著我們將做好的字體放在左上角,和右下角的貓做對(duì)角線的呼應(yīng),可是這么擺放好像還是不夠好玩。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

所以我們加入英文和線條做成一個(gè)文字組合。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

最后在版面的左下角加入其它信息,這個(gè)單曲封面就做好了。

宋體字設(shè)計(jì)很難?來(lái)看這份平面高手的系統(tǒng)性指南!

效果還不錯(cuò)吧。

最后我們來(lái)總結(jié)一下這節(jié)課。首先我們給大家扒了一下宋體字的歷史,知道了宋體字誕生于明朝,可是最早能夠追溯到唐朝。接著分析了宋體字的特征和氣質(zhì),宋體字相較黑體字具有傳統(tǒng)、文化的屬性,可是也能通過(guò)對(duì)體飾、中宮的控制,設(shè)計(jì)出具有現(xiàn)代感的宋體。然后我們教給了大家一套設(shè)計(jì)宋體字體飾的方法,最后是四個(gè)增加宋體字張力的常用手法。那么我們這節(jié)課就到這里,我是千樹(shù),我們下次再見(jiàn)。

文章來(lái)源:優(yōu)設(shè)    作者:研習(xí)設(shè)

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔