2022-06-10 分類(lèi): 網(wǎng)站建設(shè)
網(wǎng)頁(yè)設(shè)計(jì)中,如何讓字體和圖片搭配得更加好看,上海創(chuàng)新互聯(lián):有人說(shuō),中文網(wǎng)頁(yè)的設(shè)計(jì)其實(shí)沒(méi)有字體設(shè)計(jì)這一環(huán)節(jié),因?yàn)樵诰W(wǎng)頁(yè)中能用到的中文字體非常有限,能用的也只有黑體、宋體、微軟雅黑等,這給中文網(wǎng)頁(yè)的美感帶來(lái)了折損。相比英文對(duì)字體的斟酌,網(wǎng)頁(yè)上的中文字體顯得太隨意。
當(dāng)然,這種說(shuō)法有一定的正確性,但我們應(yīng)該換個(gè)角度看。中文的網(wǎng)頁(yè)中的字體的確是局限在這幾款字體中,但不代表中文網(wǎng)頁(yè)就沒(méi)有字體設(shè)計(jì)這一環(huán)節(jié)。
首先,我們簡(jiǎn)單將網(wǎng)頁(yè)里的文字分為可替換和不可替換兩個(gè)部分。
可替換的文字也就是能通過(guò)后臺(tái)管理進(jìn)行編輯的文字,例如博客文章、產(chǎn)品說(shuō)明等。不可替換的文字是在網(wǎng)頁(yè)制作過(guò)程中所定下的,后臺(tái)管理并不提供文字的編輯條件,通過(guò)網(wǎng)頁(yè)代碼才能修改,例如導(dǎo)航、Banner等。不可替換的文字并非完全不能修改,只是修改一次會(huì)耗費(fèi)一定的成本,因此修改的間隔時(shí)長(zhǎng),比如導(dǎo)航的修改需要經(jīng)過(guò)代碼,而B(niǎo)anner里的文字的修改也需要重新設(shè)計(jì)Banner 圖片。
可替換的文字只能使用網(wǎng)頁(yè)所允許給定的字體,因此中文字體的選擇面較窄。但不可替換的文字則可以通過(guò)圖片等方式展示,將其制作成透明背景的圖片,這時(shí),字體的使用和排版都是靈活的,設(shè)計(jì)師就會(huì)有足夠的創(chuàng)作自由度。
下面這個(gè)設(shè)計(jì)中所使用的字體就經(jīng)過(guò)了一定的設(shè)計(jì),字體更換并不十分容易。新手可以來(lái)這篇文章學(xué)一下基礎(chǔ)技巧:《創(chuàng)意字體有妙招!教你四招晉級(jí)字體達(dá)人》
這里所謂的與圖片的搭配,也是指的這類(lèi)可以經(jīng)過(guò)設(shè)計(jì)的文字。
字體首先是一種圖形,然后再是可承載信息的文字,因此,當(dāng)你挑選一款字體來(lái)搭配圖片的時(shí)候,你需要集中去觀察文字的形態(tài)特征是否和圖片協(xié)調(diào)。
在挑選字體之前,首先觀察圖片里的形態(tài)特征。如果配圖是以插畫(huà)的方式呈現(xiàn),那么插畫(huà)里的風(fēng)格細(xì)節(jié),以及此類(lèi)風(fēng)格所表達(dá)出的年代感和空間氛圍,都提供給你挑選與其所搭配字體的依據(jù)。比如英文中的無(wú)襯線體通常較為現(xiàn)代,而襯線體較為古典。下面的頁(yè)面中的配圖經(jīng)過(guò)曲線造型,因此,與此搭配的文字采用了Adelle無(wú)襯線體,可以看出字體中的圓弧處理和配圖中曲線的流轉(zhuǎn)造型相呼應(yīng)。
如下設(shè)計(jì)里的配圖都是零散的矩形,因此與此相應(yīng)采用的字體為graphik,這個(gè)字體的特點(diǎn)也是表現(xiàn)出非常清晰的幾何邊緣。
以上的字形所帶來(lái)的形態(tài)特征與配圖相呼應(yīng)即是一個(gè)能讓圖文實(shí)現(xiàn)好搭配的方式之一,此外,我們知道一些特殊的風(fēng)格化字體也能表達(dá)出特別的氛圍。例如下圖中的機(jī)器看上去非常有80年代的機(jī)械感,而這種造型也營(yíng)造一種技術(shù)世界里的懷舊感,因此像素文字最適合與此相搭配。
從這幾款英文字體的實(shí)例圖文配中,我們需要配以對(duì)“形”的觀察解構(gòu)能力。也同時(shí)需要對(duì)字體所承載的風(fēng)格特征作出一定的歸類(lèi)。非但英文需要精挑細(xì)選,中文也需要認(rèn)真的斟酌,而不能以期待偶遇一款好看的字體,以好看為目的進(jìn)行設(shè)計(jì),最終結(jié)果都是失敗之作。字體還可以經(jīng)過(guò)一定的設(shè)計(jì),在原有的字體基礎(chǔ)上進(jìn)行一定的“變形”,這當(dāng)然就更不能頻繁更換。根據(jù)主題而進(jìn)行一定的“微調(diào)”,讓氛圍表達(dá)得更加豐滿立體。
如將圓圓的字母中空的部分填實(shí)增加了可愛(ài)感,與配圖的角色形象也非常搭配。
觀察字形,用你敏銳的設(shè)計(jì)師的眼光來(lái)區(qū)別不同字體的特征,這是挑選比較大的字體時(shí)需要具備的能力。因此,非常適合用在首圖、Banner等需要將文字做成圖片所展示的情況下。而我們的字體還有形成段落進(jìn)行展示的時(shí)候。這時(shí),形的特征逐漸隱去,我們更多關(guān)注字與字之間的關(guān)系,即字距。
一般情況下,字距的選擇總是根據(jù)字體本身以及其和空間的關(guān)系來(lái)決定,當(dāng)字距較小時(shí),傳遞出一種緊湊感,而字距寬松又能表達(dá)出一種輕松感。
比如大型展示字體的距離總是以相互靠近為佳,因?yàn)樽煮w本身已經(jīng)占據(jù)了足夠的空間,如果再在字體間增加空間就會(huì)讓整個(gè)空間被填滿。因此,我們也可以說(shuō),字距根據(jù)整個(gè)空間進(jìn)行調(diào)整確定。與此同時(shí),配圖也是以較為集中感的方式展示,所有箭頭真是“萬(wàn)夫所指”,因此字距縮小,略有集中感。
而相對(duì)較小的字體,略帶輕松和閑適,與此搭配的圖片也是一堆木材,聯(lián)想到木匠的自然愜意感。
在中文的世界里同樣適用,然而不同的是,中文字體的距離應(yīng)該更加遠(yuǎn)一點(diǎn),以保持單個(gè)字體的獨(dú)特展示度。因?yàn)橹形牡拿總€(gè)單字都可以看成一幅圖畫(huà),擁有一定的意境,因此,保持字距是中文展示能保持美感的一個(gè)關(guān)鍵。
當(dāng)字體變?yōu)榇怪闭故緯r(shí),更應(yīng)該拉寬上下字距。這是由于我們?nèi)搜鄄⒉皇煜ど舷马樞虻拈喿x習(xí)慣,如果字距較近則容易形成字與字的視覺(jué)粘連。而行距則不同,當(dāng)你考察行距時(shí),這時(shí)字體已經(jīng)變成了段落,成片出現(xiàn)的字體則是段落,你要關(guān)注的就應(yīng)該是整個(gè)段落的灰度值。所謂灰度值就是字體的疏密。較大的行距和較大的字距一樣都能傳遞出緊湊和輕松的不同之感,同時(shí),行距也關(guān)聯(lián)著字體本身的色彩、字距以及字體大小以及字體最終的形態(tài)。英文的行距可以以1.5倍作為標(biāo)準(zhǔn)尺度,然而一切規(guī)則都是依靠條件而存在,如果在特殊的場(chǎng)合,依然可以選用更大或更小的行距展示。這一段落的字體等安排配合了配圖中所傳遞出的兒童的教育成長(zhǎng)這一主題,選用較為圓潤(rùn)的字體,字距較寬松,體現(xiàn)出輕松的氛圍。字體本身采用和LOGO一樣的色彩,比黑色字體更透露出趣味。
網(wǎng)頁(yè)設(shè)計(jì)之字體設(shè)計(jì)后記
網(wǎng)頁(yè)設(shè)計(jì)中厘清字體的字距所創(chuàng)造的疏密,行距帶來(lái)段落的灰度幾何,配合字體本身的展示形態(tài),你才能更好的選擇與此相稱(chēng)的配圖。多了解字體,對(duì)不同風(fēng)格的字體的形態(tài)有大致的了解,在使用時(shí)才不會(huì)手忙腳亂去盲目找尋適合的字體,平時(shí)對(duì)字形的積累極為重要。記得為自己建立一個(gè)字庫(kù),才會(huì)在圖文搭配時(shí)得心應(yīng)手。
網(wǎng)站題目:網(wǎng)頁(yè)設(shè)計(jì)中,如何讓字體和圖片搭配得更加好看
標(biāo)題路徑:http://jinyejixie.com/news/165795.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、自適應(yīng)網(wǎng)站、Google、云服務(wù)器、網(wǎng)站建設(shè)、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容