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

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

 

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

 

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

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

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

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

faketi

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

blog2

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

(1)字體變形

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

blog4

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

 

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

blog3

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

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

blog5

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

(2)字形組合

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

201034115416635

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

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

blog6

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

blog7

PART3:字體圖形化設(shè)計在具體設(shè)計過程中應(yīng)注意的點

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

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

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