一個(gè)banner仔的自我修養(yǎng) ——字體字形篇
筒子們好,今天我們一起來(lái)探討一下Banner的設(shè)計(jì),在這一次的教程中我會(huì)介紹一些平時(shí)總結(jié)下來(lái)的可以讓banner迅速達(dá)成效果的簡(jiǎn)單小竅門(mén),如果你在平時(shí)有大量的banner設(shè)計(jì)工作,并且總覺(jué)得時(shí)間不夠用,那么希望本次的教程可以幫助到你。
好了,那么我們進(jìn)入正題。
首先讓我們認(rèn)識(shí)一下banner,平時(shí)大家在各種網(wǎng)站或者移動(dòng)端的app里經(jīng)??梢砸?jiàn)到,印象里他們大都長(zhǎng)這個(gè)樣子:
當(dāng)然了,這就是我們常說(shuō)的banner,但其實(shí)banner還有幾個(gè)遠(yuǎn)房表兄、同父異母什么的兄弟姐妹們,它們可能長(zhǎng)這個(gè)樣子:
恩……其實(shí)以上這些在廣義上來(lái)說(shuō)都可以歸納為Banner,就形狀來(lái)說(shuō)現(xiàn)在的banner也已經(jīng)不再局限于從前大家所理解和看到的那些出現(xiàn)在固定廣告位的長(zhǎng)條形廣告了,他可以是長(zhǎng)的、方的、必要的時(shí)候也可以是其他什么亂七八糟的形狀,總之,不管是側(cè)邊欄廣告、焦點(diǎn)圖、專(zhuān)題頁(yè)的頭圖、我們都可以理解為是banner,在設(shè)計(jì)方法上,其實(shí)都是共通的。如果要是分類(lèi)的話(huà)其實(shí)可以大概分為兩類(lèi):
1.“促使點(diǎn)擊”
2.“渲染氣氛”
第一種就是大家經(jīng)常在各種大大小小的網(wǎng)站都能看到的廣告banner或者焦點(diǎn)圖,她們有大有小可長(zhǎng)可短,但是他們共同的作用就是通過(guò)各種方式引導(dǎo)你去點(diǎn)擊。
通常你在做這種類(lèi)型的banner時(shí),一般會(huì)是上圖這個(gè)場(chǎng)面。
第二種大家通??梢栽诟鞣N游戲網(wǎng)站,房地產(chǎn)網(wǎng)站,各種活動(dòng)專(zhuān)題頁(yè)中見(jiàn)到,也就是大家常說(shuō)的頭圖,這種類(lèi)型的banner通常并不是引導(dǎo)用戶(hù)去觸發(fā)點(diǎn)擊,而是服務(wù)于內(nèi)容,為整個(gè)頁(yè)面做好氣氛的渲染。
通常你在做這種類(lèi)型的banner時(shí),一般會(huì)是上圖這個(gè)場(chǎng)面
說(shuō)這么多,其實(shí)我是希望通過(guò)這種介紹和分類(lèi)方式,讓大家在拿到設(shè)計(jì)需求時(shí)可以確定一個(gè)正確的設(shè)計(jì)方向,降低設(shè)計(jì)成本,從而提高工作效率。
下面我們介紹幾個(gè)設(shè)計(jì)小竅門(mén),也許通過(guò)這些方法可以讓你在最短的時(shí)間內(nèi)有效的達(dá)成效果。
首先我們來(lái)說(shuō)一下字體和字形,大家都知道我們從圖形上解讀信息的能力是要大于單純的閱讀文字,但是在banner的設(shè)計(jì)中,大多數(shù)情況下我們都是通過(guò)文字來(lái)了解信息,圖片只是起到一個(gè)襯托的作用,在我自己平時(shí)做banner的時(shí)間分配里對(duì)字形的處理可能要占到百分之五十甚至更多的時(shí)間,所以今天我們重點(diǎn)來(lái)說(shuō)一下這方面的處理技巧。
1.鋼筆造字
鋼筆造字是在做字形設(shè)計(jì)上一個(gè)比較討巧的方法,但卻又十分有效。對(duì)平時(shí)沒(méi)有太多字形設(shè)計(jì)經(jīng)驗(yàn)的同學(xué)來(lái)說(shuō)非常適合的,只要你了解基本的字形設(shè)計(jì)規(guī)律(筆畫(huà)的粗細(xì),字體的重心等),那么此方法可以讓你快速的讓banner高大上起來(lái),具體的設(shè)計(jì)方法大家可以移步字形設(shè)計(jì)大師@劉兵克老濕的設(shè)計(jì)教程:http://v.youku.com/v_show/id_XNDI4MDMwMTg4.html
2.筆畫(huà)鏈接
當(dāng)你沒(méi)有時(shí)間完整的設(shè)計(jì)banner上字體的字形時(shí),筆畫(huà)鏈接未嘗不是一種好的方法,在做筆畫(huà)鏈接時(shí)只有合理的安排需要鏈接的筆畫(huà),做到不突兀,不影響易讀性,那么都會(huì)出來(lái)一個(gè)比較好的視覺(jué)效果,在做筆畫(huà)連接的時(shí)候我推薦大家使用一些筆畫(huà)粗細(xì)比較統(tǒng)一的非襯線(xiàn)字體比方說(shuō)雅黑、悅黑、幼圓等等。
3. 隨“意”變形
顧名思義就是根據(jù)文字的具體含義來(lái)設(shè)計(jì)字形的一種方法,當(dāng)上面介紹的兩種技巧都讓你感覺(jué)頭大的時(shí)候不妨試試這種處理技巧,你只需要腦洞大開(kāi),了解文字的具體含義并用相應(yīng)的圖形在文字上加以體現(xiàn)就可以了,就醬簡(jiǎn)單!
4. 3D
如果要在banner中想突出文字,把文字做成3D效果可謂是最“粗暴”的一種解決方法,只要處理方法得當(dāng)也可以達(dá)到很好的效果,如何處理3D這種細(xì)節(jié)問(wèn)題這里就不提及了,網(wǎng)上有大堆大堆的教程可供參考。切記,處理3D文字的時(shí)配色是關(guān)鍵,稍不注意就會(huì)顯得山寨和俗氣。
好了,以上是一些在設(shè)計(jì)banner時(shí)可以用到的字形設(shè)計(jì)技巧,可能有童鞋要說(shuō)我平時(shí)banner的設(shè)計(jì)工作很繁重,時(shí)間也很緊張,沒(méi)有精力去做字形,或者由于版權(quán)的問(wèn)題,在大多數(shù)情況下不得不使用那么幾種字體,像這樣的情況有沒(méi)有好的辦法讓banner中的文字出效果呢。答案當(dāng)然是有啦,下面就給大家介紹幾個(gè)方法??纯慈绾卧谑褂煤?jiǎn)單的默認(rèn)字體的同時(shí)打破字體的沉默。
字體如何打破沉默——不破不立
看到?jīng)]有,同樣是簡(jiǎn)單的字體,只是打破了整段的文字,做單個(gè)字體的傾斜,整體看起來(lái)就活潑跳動(dòng)了很多,或者可以做單個(gè)字體的疊加,凹凸效果同樣可以讓簡(jiǎn)單的默認(rèn)字體變得跳躍起來(lái)。
如何打破字體的沉默——空間獨(dú)立
說(shuō)起這種方法我們就不得不提到banner中的空間關(guān)系,在設(shè)計(jì)banner時(shí)通常我們?nèi)绻覀兿胪怀鑫淖?,那么就要使文字和背景拉開(kāi)空間,而為文字做一個(gè)簡(jiǎn)單的純色底色不可謂不是一個(gè)省事的辦法。
如何打破字體的沉默——斜能壓正
文字必須橫平豎直才是最好看的嘛?當(dāng)然不是,在一些設(shè)計(jì)中一個(gè)傾斜的文字排版不僅可以打破默認(rèn)字體的沉默還可以幫助整個(gè)畫(huà)面的構(gòu)圖,真是百試不爽。
如何打破字體的沉默——長(zhǎng)短粗細(xì)變換自如
通常我們?cè)谧鲆欢挝淖值呐虐鏁r(shí),經(jīng)常會(huì)根據(jù)段落中的關(guān)鍵字做相印的加粗或者高亮,這種方法看似簡(jiǎn)單,但是在實(shí)際操作的過(guò)程中稍有不當(dāng)就會(huì)導(dǎo)致整段字體看起來(lái)凌亂不堪,其實(shí)只要設(shè)計(jì)的時(shí)候把文字看作圖形,注意整個(gè)字體排版的走向是否有規(guī)律可循就容易很多。
OK,以上就是今天為大家總結(jié)的一些字形與字體的處理方法,希望對(duì)大家有所啟發(fā),在banenr的設(shè)計(jì)中還有很多種有效的技巧可以用到,如果你有什么特別的技巧也可以告訴我們。
本文地址:http://m.likemindfilms.com/tutorial/di2162.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線(xià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ì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(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ì)系列文章(二):全屏