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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

先來說一下中宮,我們在之前的教程里說過,中宮越大,越顯現(xiàn)代感,而中宮越小,則越有傳統(tǒng)感。在宋體里也不例外。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

而這組都是曲線加圓角。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

② 圓滑地過渡;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

效果還不錯(cuò)吧。

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

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

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔