banner設(shè)計(jì)作為互聯(lián)網(wǎng)從業(yè)者必備的技能,一張好的banner,絕非三五分鐘就可以搞定的!它同時(shí)也能看得出一個(gè)設(shè)計(jì)師對(duì)項(xiàng)目的理解、色彩感、版式、整體的把握。
banner的功能是傳達(dá)信息!現(xiàn)在隨著移動(dòng)互聯(lián)網(wǎng)的到來(lái)!我們跟習(xí)慣于在手機(jī),電腦上了解、發(fā)現(xiàn)這個(gè)世界。我們?nèi)绾尾拍芤砸环N即具可讀性和合理性,又更具有吸引力的方式來(lái)組織信息呢?
從背景層、主體層、文字層、這三個(gè)方面來(lái)分析如何設(shè)計(jì)一個(gè)具有吸引力的banner!
01|主體層
通過(guò)對(duì)項(xiàng)目的分析,確定畫(huà)面的主體(主體可以是人物、產(chǎn)品圖或者文字)。先對(duì)一種元素進(jìn)行視覺(jué)強(qiáng)化吸引觀眾的注意力。在確定畫(huà)面主體的同時(shí),我們就可以把畫(huà)面的構(gòu)圖,也就確定下來(lái)!目的都是為了傳達(dá)信息,讓畫(huà)面更具有吸引力!
1.1人物主體
這張banner的主體是人物,作者為了更加突出主體在上面加了手寫(xiě)感的英文和一些小元素來(lái)點(diǎn)綴!這種做法能很好的解決主體物不夠突出。在我們工作中,遇到主題物不夠突出的時(shí)候,也可以增加相關(guān)聯(lián)的文字或者線條來(lái)突出主體。(在給主體增加元素的時(shí)候,切記元素起搶了主題的位置)
1.2產(chǎn)品主體
這張banner的主體是物體 ,在主體的周圍添加了花和葉子豐富主體。在畫(huà)面四周也添加了些相同元素,這樣畫(huà)面更加統(tǒng)一、和諧。文字部分采用黑體居中對(duì)齊排列。畫(huà)面整體給你感覺(jué)典雅、舒適。
1.3文字主體
文字做為主體,其實(shí)是把文字當(dāng)作圖形來(lái)設(shè)計(jì)。整張BANNER的信息傳達(dá)更為準(zhǔn)確。在純文字的編排中,要注意主體文字的閱讀順序,可通過(guò)對(duì)比的手法,來(lái)加強(qiáng)主標(biāo)題和副標(biāo)題之前的層級(jí)關(guān)系!
02|背景層
背景層是為了突出主體。它可以確定畫(huà)面整體的色調(diào)。我們根據(jù)畫(huà)面要表達(dá)的感覺(jué)和主體的風(fēng)格來(lái)選擇不同背景層的表現(xiàn)方法。
2.1 照片背景(高斯模糊)
照片通過(guò)高斯模糊,讓他與主體產(chǎn)生空間感,如果畫(huà)面色彩感覺(jué)不統(tǒng)一,可以用漸變映射來(lái)調(diào)試。
感覺(jué)背景和主體不夠分離的時(shí)候,我們可以用圖案疊加,在背景上加幾何形底紋在增加空間感。
2.2 純色背景、漸變背景、多色拼接背景
小米網(wǎng)站banner基于設(shè)計(jì)規(guī)范和自營(yíng)產(chǎn)品的電商設(shè)計(jì)網(wǎng)站。減去了設(shè)計(jì)中過(guò)于熱鬧、喜慶、大促的風(fēng)格。產(chǎn)品展示圖中都是用帶有明暗漸變的背景來(lái)突出產(chǎn)品。這種背景的處理方法更容易出圖產(chǎn)品,整體畫(huà)面整潔,無(wú)過(guò)多的視覺(jué)干擾。也具有較強(qiáng)的品質(zhì)感!
多色拼接背景,讓畫(huà)面具有活力。幾何形或是不規(guī)則圖形的構(gòu)型,更具吸引力,讓人聚焦。
2.3 商業(yè)攝影圖片、創(chuàng)意合成背景
這種背景圖,屬于前期策劃好模特、配色、創(chuàng)意。還有后期的表現(xiàn)技法的熟練度(無(wú)論是修片還是合成)
03|文字層
文字最能準(zhǔn)確的表達(dá)banner中的信息!他要突出于背景,又不能搶了主體,在字形的選擇上又要符合整個(gè)畫(huà)面的氣質(zhì)。而且要具有易讀性。所以在文字的編排上要下一定的功夫。如主標(biāo)題與副標(biāo)題的層級(jí)關(guān)系。都要我們仔細(xì)深入的推敲。
一張banner中最多不要超多三種字體!
黑體(無(wú)襯線字體):黑體字在字架上吸收了宋體字結(jié)構(gòu)嚴(yán)謹(jǐn)?shù)膬?yōu)點(diǎn),在筆畫(huà)的形狀上把橫畫(huà)加粗且把宋體字的聳肩角削平為等線狀,形成橫豎筆畫(huà)粗細(xì)一致,變宋體字的尖頭細(xì)尾和頭尾粗細(xì)不一的筆畫(huà)為方形筆畫(huà),因而獨(dú)具一格,給人一種粗實(shí)有力、嚴(yán)肅莊嚴(yán)、樸素大方的感覺(jué)。
蘋(píng)果官網(wǎng)的banner,用相對(duì)現(xiàn)代感的黑體,更具科技感!而改變了字體,就無(wú)法表達(dá)出產(chǎn)品的氣質(zhì)!
因黑體具有易讀性,也可作為提示性或者敘述性文字使用。
細(xì)黑:可以表達(dá)大方、高端、精致的氣質(zhì)!具有現(xiàn)代感
超粗黑(綜藝體):具有力量感,筆畫(huà)簡(jiǎn)潔粗壯,厚實(shí)有力 ,醒目,具有渾厚凝重的氣度。多用于活動(dòng)大促標(biāo)題。
宋體:宋體字的字形方正,筆畫(huà)橫平豎直,橫細(xì)豎粗,棱角分明,結(jié)構(gòu)嚴(yán)謹(jǐn),整齊均勻,有極強(qiáng)的筆畫(huà)規(guī)律性。
此類氣質(zhì),可以在女性、高端、時(shí)尚、文化類banner中使用!
圓體:筆畫(huà)轉(zhuǎn)角圓潤(rùn),結(jié)構(gòu)方正飽滿,筆形柔和??梢员憩F(xiàn)出童真、活潑、歡快的特質(zhì)!一般用于兒童產(chǎn)品或是輕松的畫(huà)面中!
通過(guò)變形的圓體字形,也可以表帶出少女感!可愛(ài)有趣的畫(huà)面!
書(shū)法字體:霸氣、古典、文化、具有濃烈的中國(guó)風(fēng)韻味。更具張力!電商大促也喜歡用書(shū)法字體!
而小米活動(dòng)banner,選擇了重新設(shè)計(jì)字體。字形,較為歡快輕松,非常符合主題。關(guān)于字體設(shè)計(jì),一定不能為了表達(dá)字體的形式感,而破壞了字體的可識(shí)別性!
3.2增加字體的形式感
左字右主體、左主體右字:這種banner方式最為常見(jiàn)的版式之一。主體在一邊,文字在另外一邊??筛鶕?jù)畫(huà)面選擇不同的對(duì)齊方式!注意文字之間的主副層級(jí)、行距。
給文字添加個(gè)背景,畫(huà)面中給文字添加個(gè)背景,具有反復(fù)強(qiáng)調(diào)的作用!根據(jù)具體需求反白、鏤空、或是用顏色的對(duì)比來(lái)強(qiáng)調(diào)!
讓文字也有前后關(guān)系。主標(biāo)題放在主體的前面,而副標(biāo)或者提取的文字放在主體的后面,在增強(qiáng)畫(huà)面的空間感和裝飾性!
給字體加點(diǎn)特效吧!根據(jù)畫(huà)面的風(fēng)格,給文字加上適當(dāng)?shù)奶匦ВC(jī)理)來(lái)突出文字部分!然后傾斜字體或者透視字體,可以增加力量、活潑的感覺(jué)!
關(guān)于字體的編排樣式是多樣化的,在編排中易讀、符合畫(huà)面的風(fēng)格就可以了。