您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁(yè)字體圖形化設(shè)計(jì)

 

作為網(wǎng)頁(yè)設(shè)計(jì)中最重要的細(xì)節(jié)之一——字體,有時(shí)也需要再設(shè)計(jì)才能體現(xiàn)出網(wǎng)頁(yè)精美的細(xì)節(jié),也才能更符合企業(yè)的VI識(shí)別,配合你作品表達(dá)需要的的思想感情。

 

PART1:為什么要字體圖形化設(shè)計(jì)

現(xiàn)代設(shè)計(jì)中直接從電腦里調(diào)出來(lái)的千遍一律的標(biāo)準(zhǔn)字體已經(jīng)不能滿足互聯(lián)網(wǎng)用戶日漸提高的審美需求,所以設(shè)計(jì)師要打破常規(guī),能根據(jù)不同的需求,對(duì)字體進(jìn)行獨(dú)特的個(gè)性化的設(shè)計(jì)。同時(shí)字體的圖形化設(shè)計(jì)有利于頁(yè)面f氛圍的營(yíng)造以及更好的傳遞產(chǎn)品的特性以及功能等,特別是在推廣頁(yè)面設(shè)計(jì)的時(shí)候我們對(duì)標(biāo)題文案(往往概括了整個(gè)活動(dòng)的專題商業(yè)需求)進(jìn)行特殊的設(shè)計(jì)處理,與其他的內(nèi)容文案形成對(duì)比,引起用戶的知覺(jué)興趣,從而達(dá)到讓用戶有效的了解頁(yè)面的重點(diǎn)信息。

PART2:字體圖形化設(shè)計(jì)的方法與技巧

在開(kāi)始之前,首先先了解下字體設(shè)計(jì)最基本最基礎(chǔ)的設(shè)計(jì)處理方法如加粗、變大、斜體、改變顏色或者字間距等,同時(shí)所有的高級(jí)技巧都是在此基礎(chǔ)上進(jìn)行延伸與擴(kuò)展或者突破。

faketi

如網(wǎng)絡(luò)流行的凡客體綜合運(yùn)用了字體設(shè)計(jì)如放大、改變字體顏色等的基本方法,文字與文字之間形成了強(qiáng)烈的對(duì)比,突出了重點(diǎn),建立了良好的視覺(jué)層次與焦點(diǎn)。

blog2

改變了字間距,使文字與文字之間的聯(lián)系更加緊密了,且運(yùn)用了陰影等使之層次更加豐富。

(1)字體變形

在電腦調(diào)出來(lái)的基本形上做基礎(chǔ)變形處理,在vi字體設(shè)計(jì)中經(jīng)常運(yùn)用到的技巧。

blog4

方案2比方案1的線條的處理更加圓滑,同時(shí)看起來(lái)也更活潑些(但并不是說(shuō)方案2就比方案1好,需要視具體的情況采用合適的方法)

 

同時(shí)在做字體變形設(shè)計(jì)的時(shí)候需要了解分析其筆畫(huà)結(jié)構(gòu)走勢(shì)以及其綜合體現(xiàn)出來(lái)的“氣質(zhì)”與“感覺(jué)”。.

blog3

因?yàn)檎麄€(gè)畫(huà)面要營(yíng)造出一種向上的氣勢(shì),所以在設(shè)計(jì)處理上線條變的更加傾斜尖銳,強(qiáng)化其速度感和力量感。同時(shí)若設(shè)計(jì)關(guān)于女性產(chǎn)品的頁(yè)面時(shí),就可能會(huì)使用比較曲的、纖細(xì)的線條體現(xiàn)女性柔美的特點(diǎn)。

小技巧:向優(yōu)秀的英文字體取經(jīng)。

blog5

推薦兩個(gè)優(yōu)秀的英文字體網(wǎng)站:http://new.myfonts.com/ 和http://www.dafont.com/

(2)字形組合

字形組合設(shè)計(jì)其實(shí)是抽象文字的具象化,即抽象的文字與具象的圖形結(jié)合, 使受眾能更加快速的理解傳達(dá)的信息內(nèi)容,并能留下深刻的印象!設(shè)計(jì)的時(shí)候最重要的是找到其兩者之間的特征屬性以及關(guān)聯(lián)性。

201034115416635

(3)3D字體設(shè)計(jì)

平面立體化,營(yíng)造一種層次感與空間感,模擬物理使之更加接近于真實(shí) ,也更有視覺(jué)沖擊力,在3D字設(shè)計(jì)的時(shí)候無(wú)論是PS/AI還是借助3D軟件輔助設(shè)計(jì)最重要是掌握其光影的變化以及形體的透視。

blog6

形體比較復(fù)雜的可以3D軟件把握透視(熟悉AI的可以使用”效果>三維>擠壓&斜面”等命令實(shí)現(xiàn)),同時(shí)后期可以使用PS進(jìn)行處理,如加強(qiáng)高光陰影以及整體氛圍的渲染等。

blog7

PART3:字體圖形化設(shè)計(jì)在具體設(shè)計(jì)過(guò)程中應(yīng)注意的點(diǎn)

(1)網(wǎng)頁(yè)設(shè)計(jì)主要是信息的傳達(dá)設(shè)計(jì),任何的設(shè)計(jì)目的的是為了讓用戶快速有效到其信息,同時(shí)不要為了浮夸的設(shè)計(jì)技巧而舍本逐末,首先最重要的是先保證其識(shí)別性;

(2)字體不是孤立存在的,是頁(yè)面內(nèi)容之一,在設(shè)計(jì)的時(shí)候需考慮與周圍的其他頁(yè)面元素的協(xié)調(diào)一致,強(qiáng)化頁(yè)面的整體氛圍的營(yíng)造。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1581.html
談?wù)勴?yè)面設(shè)計(jì)流程圖(附案例)
情感化設(shè)計(jì),重新創(chuàng)造網(wǎng)頁(yè)
圖趣網(wǎng)微信
建議反饋
×