Banner設(shè)計(jì)教程:讓文字講好banner的故事
一.文字的基本排列混搭
設(shè)計(jì)banner時(shí)候,千萬(wàn)不要不加思索的就把一行文字硬生生的放上去,那會(huì)讓你的banner直接顯得呆板木訥。往往很多新手設(shè)計(jì)師容易犯這樣的錯(cuò),就算字體顏色樣式處理的很好,也會(huì)看上去很無(wú)趣、很僵硬。這時(shí)候我們就需要做一些文字排列混搭的設(shè)計(jì):
①大小和顏色的混搭
②排列組合的混搭
③不同字體之間的混搭
④中英文字體的混搭
以上都是一些常見(jiàn)的處理方式。當(dāng)然這也是banner文字設(shè)計(jì)的基礎(chǔ),其他很多的文字處理方式都建立在混搭的基礎(chǔ)中,所以做好混搭的重要性就不言而喻了。
上圖文字沒(méi)有進(jìn)行什么混搭,顯得文字有些呆板;下圖中文字進(jìn)行了一些大小和排列的混搭,更能體現(xiàn)所要展現(xiàn)的氣氛。
下面我們可以看一看其實(shí)設(shè)計(jì)師所設(shè)計(jì)的一些簡(jiǎn)單的文字混搭的banner作品:
二.文字的傾斜與斜切
有時(shí)候設(shè)計(jì)banner,根據(jù)背景構(gòu)圖不同或者我們想要更有視覺(jué)沖擊力表現(xiàn)文字內(nèi)容時(shí),我們可以嘗試對(duì)文字進(jìn)行傾斜或斜切透視等處理,有時(shí)候這會(huì)更會(huì)令你達(dá)到意想不到的效果。普通的文字排列平平穩(wěn)穩(wěn),方正有矩,我們可以用傾斜或者斜切打破這種“穩(wěn)定的構(gòu)圖”,讓畫(huà)面更有動(dòng)感和層次感。
上面的2個(gè)banner是利用了文字傾斜的效果,下面的3個(gè)banner同時(shí)利用了斜切的效果。文字利用了傾斜和斜切效果后,讓文字和整個(gè)畫(huà)面一下活潑起來(lái),更能勾起了用戶的閱讀欲望。
三.讓文字形成相對(duì)獨(dú)立的區(qū)域
banner設(shè)計(jì)時(shí),考慮到有些時(shí)候背景顏色比較復(fù)雜,也可能背景有比較多產(chǎn)品等元素,這時(shí)我們需要讓文字放在一個(gè)相對(duì)獨(dú)立的區(qū)域或色塊中,如果沒(méi)有相對(duì)獨(dú)立的區(qū)域,我們就要自己設(shè)計(jì)創(chuàng)造出這個(gè)獨(dú)立區(qū)域和色塊,這樣更便于文字閱讀,也能讓文字的視覺(jué)焦點(diǎn)加強(qiáng)。例如下圖:
四.文字變形的魅力
設(shè)計(jì)banner和專題頭圖時(shí),設(shè)計(jì)師經(jīng)常用到文字變形,好的文字變形直接可以影響到文字的趣味性的提升,讓banner和頁(yè)面的氣氛被烘托得相得益彰。很多設(shè)計(jì)師感覺(jué)設(shè)計(jì)banner只是個(gè)小工作,用不到文字變形那么麻煩,其實(shí)不盡然,選好合適的參照字體進(jìn)行簡(jiǎn)單的文字變形并沒(méi)有多么復(fù)雜,但是卻能提升banner設(shè)計(jì)的品質(zhì),所以說(shuō)益處良多。下面我先給大家舉個(gè)工作中設(shè)計(jì)的小例子:
同理的文字變形設(shè)計(jì)延伸:
下面讓我們?cè)賮?lái)看看其他優(yōu)秀設(shè)計(jì)師對(duì)于文字變形設(shè)計(jì)的作品:
五.文字的3D應(yīng)用
3D文字效果的應(yīng)用在banner設(shè)計(jì)中也十分常見(jiàn),利用好AI和PS等工具可以制作出令人滿意的3D文字,如果你肯花多一點(diǎn)的時(shí)間,在材質(zhì)或者光影上還可以做到進(jìn)一步的效果提升。下面讓我們看一些優(yōu)秀設(shè)計(jì)師設(shè)計(jì)的3D字體樣式banner:
六.生活中的字體元素
我們?cè)O(shè)計(jì)歷史文化頻道的banner時(shí),或者當(dāng)我們?cè)O(shè)計(jì)中國(guó)傳統(tǒng)的節(jié)日時(shí),經(jīng)常要用到一些中國(guó)風(fēng)的元素,就例如毛筆字。在生活中字體元素,毛筆字、粉筆字、字帖等我們也可以把它們活用在banner中,配合合適的背景和主題,讓你的設(shè)計(jì)更突顯出banner氣氛。
上面的2個(gè)banner是利用了粉筆字的設(shè)計(jì)效果,突出了年輕,活力;下面的3個(gè)banner使用了毛筆字,字帖等中國(guó)風(fēng)的字體效果,體現(xiàn)出文化,品味和底蘊(yùn)的感覺(jué)。
七.猶抱琵琶半遮面
banner中,字體的設(shè)計(jì)一定要清晰,這樣可以便于用戶更流暢的閱讀。不過(guò)有時(shí)也可以讓文字“半隱半現(xiàn)”,前提當(dāng)然是在保證沒(méi)有閱讀壓力的情況下。“半隱半現(xiàn)”的文字可以讓你設(shè)計(jì)的banner更生動(dòng)更有層次感。
文字的下方部分被隱藏住,但是并沒(méi)有妨礙閱讀,反而讓文字有了種融入背景環(huán)境的感覺(jué)。
文字的左邊緣被上一個(gè)字壓住,有種層疊的感覺(jué),讓文字的排列更顯層次。
---------------------------------------相關(guān)banner設(shè)計(jì)的文章---------------------------------------
網(wǎng)站設(shè)計(jì):探討banner中的字體結(jié)構(gòu):http://pkvc.cn/Tutorial/di1034.html
做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解:http://pkvc.cn/Tutorial/ui1483.html
如何做好一個(gè)網(wǎng)頁(yè)設(shè)計(jì)Banner?:http://pkvc.cn/Tutorial/di1652.html
寫(xiě)在最后,banner中字體設(shè)計(jì)相關(guān)的學(xué)問(wèn)其實(shí)還有很多,我這里只簡(jiǎn)單寫(xiě)了一點(diǎn)自己的經(jīng)驗(yàn)心得。以上圖例中有部門是網(wǎng)上收集來(lái)的其他優(yōu)秀設(shè)計(jì)師的作品,文中借用不甚感激,如有侵權(quán)請(qǐng)及時(shí)告知,謝謝。
本文地址:http://pkvc.cn/tutorial/di1728.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏