今天我想和大家簡(jiǎn)單分析一下,這兩個(gè)APP的banner設(shè)計(jì)。主要從構(gòu)圖、字體、配色、裝飾這四個(gè)方面來(lái)分析。以下案例均來(lái)自網(wǎng)絡(luò),版權(quán)歸網(wǎng)易云音樂(lè)和蝦米音樂(lè)所有。首先想和大家簡(jiǎn)析一下網(wǎng)易云音樂(lè)的banner設(shè)計(jì)。1. 構(gòu)圖構(gòu)圖是一個(gè)banner設(shè)計(jì)中最基礎(chǔ)的部分,在做banner排版的時(shí)候,首先要根據(jù)banner的內(nèi)容確定一個(gè)大概的構(gòu)圖,再去豐富版式的細(xì)節(jié)。A.左字右圖左字右圖是最常見(jiàn)最容易掌握的排版,中規(guī)中矩,不易出錯(cuò)。B.左圖右字左圖右字和左字右圖差不多,首先要根據(jù)素材圖片的構(gòu)圖和走向確定圖片是適合放在左邊還是右邊
今天我想和大家簡(jiǎn)單分析一下,這兩個(gè)APP的banner設(shè)計(jì)。主要從構(gòu)圖、字體、配色、裝飾這四個(gè)方面來(lái)分析。以下案例均來(lái)自網(wǎng)絡(luò),版權(quán)歸網(wǎng)易云音樂(lè)和蝦米音樂(lè)所有。
首先想和大家簡(jiǎn)析一下網(wǎng)易云音樂(lè)的banner設(shè)計(jì)。
構(gòu)圖是一個(gè)banner設(shè)計(jì)中最基礎(chǔ)的部分,在做banner排版的時(shí)候,首先要根據(jù)banner的內(nèi)容確定一個(gè)大概的構(gòu)圖,再去豐富版式的細(xì)節(jié)。
A.左字右圖
左字右圖是最常見(jiàn)最容易掌握的排版,中規(guī)中矩,不易出錯(cuò)。
B.左圖右字
左圖右字和左字右圖差不多,首先要根據(jù)素材圖片的構(gòu)圖和走向確定圖片是適合放在左邊還是右邊,再做文案的排版。左圖右字也是屬于比較常規(guī)不容易出錯(cuò)的構(gòu)圖。
C.左中右構(gòu)圖
左中右構(gòu)圖一般為左圖中字右圖或者左字中圖右字。這種構(gòu)圖比左右構(gòu)圖版式會(huì)豐富點(diǎn),但是比它們難把握。如果banner上要出現(xiàn)兩個(gè)人物,比較適合左中右構(gòu)圖?;蛘呦胍攸c(diǎn)突出人物,也可以把人物居中,把文案放在人物兩側(cè)。
D.上下構(gòu)圖
上下構(gòu)圖一般為上字下圖。上下構(gòu)圖不好掌握,常見(jiàn)于一個(gè)Banner中要出現(xiàn)多個(gè)人物,多個(gè)人物在左右構(gòu)圖里不好擺放。
E.文字作為主體居中
圖片作為背景起到一個(gè)裝飾的作用,或者沒(méi)有圖片素材。常見(jiàn)于文案內(nèi)容比較抽象、不方便或者不需要用到圖片素材、不知道用什么圖片素材去表達(dá)畫面內(nèi)容,沒(méi)有一個(gè)代表性的圖片素材作為畫面主體的情況。
F.不規(guī)則構(gòu)圖
不規(guī)則構(gòu)圖最難把握,相對(duì)的,最有設(shè)計(jì)感。不規(guī)則構(gòu)圖如果把握得好,版式的豐富會(huì)給人眼前一亮的感覺(jué)。其實(shí)不規(guī)則構(gòu)圖也是在常規(guī)構(gòu)圖的基礎(chǔ)上再做一些變化,萬(wàn)變不離其宗。
正確選擇字體在banner設(shè)計(jì)中也是非常重要的,字體的氣質(zhì)和畫面的氣質(zhì)要一致,這樣畫面看起來(lái)才是一個(gè)和諧的整體。例如,如果畫面中的人物是女生,就不適宜用粗獷硬朗的字體,要用能夠襯托出主角氣質(zhì)的字體。
字體主要分為兩類,一類是系統(tǒng)字體,一類是設(shè)計(jì)師自己設(shè)計(jì)的字體,設(shè)計(jì)師設(shè)計(jì)字體可以在系統(tǒng)字體的基礎(chǔ)上做些改變,或者自己重新設(shè)計(jì)字體的筆畫,但是重新設(shè)計(jì)會(huì)比較費(fèi)時(shí)間。所以要根據(jù)工作時(shí)間做合理的安排,如果時(shí)間緊急,就沒(méi)必要做字體設(shè)計(jì)了。當(dāng)然對(duì)于大神來(lái)說(shuō),做個(gè)字體設(shè)計(jì)是小菜一碟,但是對(duì)于我來(lái)說(shuō),做字體設(shè)計(jì)還是挺吃力的,還需努力。
網(wǎng)易云音樂(lè)作為一個(gè)音樂(lè)類APP,banner的風(fēng)格一般都比較文藝,最常見(jiàn)的字體是宋體和細(xì)黑體,有時(shí)候會(huì)根據(jù)畫面的氣質(zhì)做相應(yīng)的改變。下面舉幾個(gè)案例。
A.用宋體和細(xì)黑體表達(dá)文藝、品質(zhì)感的氣質(zhì)
B.根據(jù)畫面的氣質(zhì)做相應(yīng)的選擇
C.字體設(shè)計(jì)
經(jīng)過(guò)設(shè)計(jì)的字體總是讓人眼前一亮,富有設(shè)計(jì)感。為畫面增色不少。
配色用得最多的兩種方法,第一,把素材黑白化,再根據(jù)文案和人物的氣質(zhì)選取一個(gè)合適的顏色。第二種方法就是從素材里面直接吸取合適的顏色,再調(diào)節(jié)飽和度和明度,調(diào)出一個(gè)基本色,再取基本色的對(duì)比色、近似色等等作為輔助色。
下面舉幾個(gè)把素材黑白化,根據(jù)文案和人物的氣質(zhì)選取一個(gè)合適的顏色的案例。
黃黑白這種顏色搭配比較經(jīng)典,容易出效果。素材黑白化之后加入黃色的色塊,對(duì)比鮮明,具有視覺(jué)沖擊力,符合文案的氣質(zhì)。
淺藍(lán)色和黑白搭配。人物素材黑白化處理之后,選用了淺藍(lán)色作為背景色,再調(diào)節(jié)背景色的飽和度和明度,深藍(lán)色點(diǎn)綴畫面。
藍(lán)色和黑白搭配。人物素材黑白化處理,可以看到人物的亮部調(diào)得很亮,黑色背景突出人物,文案用了藍(lán)色。
下面舉幾個(gè)從素材里面直接吸取合適的顏色的案例。
可以看到人物衣服的顏色主色是藍(lán)綠色和黃色。直接吸取衣服的顏色,加以調(diào)節(jié),藍(lán)綠色作為背景色,黃色作為點(diǎn)綴色,整個(gè)畫面比較和諧統(tǒng)一。
可以看到人物衣服的顏色主色是藍(lán)色和淺藍(lán)色。所以直接用了淺藍(lán)色作為背景色,藍(lán)色作為文案色。
這個(gè)案例是吸取了人物頭發(fā)的顏色,調(diào)淺之后作為背景色,調(diào)深了作為文案的顏色,再加入淺黃色和白色的色塊,整個(gè)畫面非常文藝和安靜。
裝飾常見(jiàn)于點(diǎn)、線、面,或者一些手繪的元素等等,在確定基本的構(gòu)圖和配色之后,加入一點(diǎn)小元素和小裝飾,會(huì)讓畫面更有細(xì)節(jié),更有設(shè)計(jì)感。
例如下面這個(gè)案例,給人物加上一些手繪的小裝飾,畫面增加了一些輕松、詼諧、可愛(ài)的感覺(jué)。加什么裝飾,要看設(shè)計(jì)師的目的,而不是盲目地為了加而加,加任何一個(gè)元素,都要有它存在的意義。
例如下面這個(gè)案例,加入了嘴唇的剪影和線框,增強(qiáng)了設(shè)計(jì)感,線框把文案和人物連接在一起,形成一個(gè)整體。
例如下面這個(gè)案例,斜線不僅填補(bǔ)了空白,平衡畫面,而且豐富了畫面。
下面這個(gè)案例也是同樣的道理,波浪線和右邊的英文字母不僅起到一個(gè)平衡畫面的作用,還裝飾了畫面。
下面這個(gè)案例就加入了一些墨跡,渲染了“搖滾”的氛圍,同時(shí)還起到“點(diǎn)”的作用,豐富了畫面。
談完了網(wǎng)易云音樂(lè),下面和大家分享一下蝦米音樂(lè)的banner設(shè)計(jì)。蝦米音樂(lè)的我就不講那么詳細(xì)了,其實(shí)道理都差不多。下面主要是舉例。
A.左圖右字
B.左字右圖
C.左中右構(gòu)圖
D.文字作為主體居中
B.在蝦米音樂(lè)的banner里面,其實(shí)黑體反而是最常見(jiàn)的
(大概是因?yàn)楹隗w幾乎適合所有的氣質(zhì),并且適合做標(biāo)題吧。)
C.根據(jù)畫面的氣質(zhì)做相應(yīng)的選擇
D.字體設(shè)計(jì)
看了一下我收集的案例,發(fā)現(xiàn)蝦米音樂(lè)banner的字體設(shè)計(jì)比網(wǎng)易云音樂(lè)的要少。蝦米音樂(lè)的Banner主要是運(yùn)用點(diǎn)線面把畫面的版式設(shè)計(jì)得非常豐富。
A.發(fā)現(xiàn)蝦米音樂(lè)非常喜歡把人物單色化處理
B.從素材里面直接吸取合適的顏色,再調(diào)節(jié)飽和度和明度
吸取衣服的顏色:
吸取衣服的顏色:
吸取衣服的顏色:
吸取衣服的顏色:
吸取人物身上披著的布料的顏色:
吸取人物衣服的顏色和膚色:
前面說(shuō)過(guò)蝦米音樂(lè)的banner把點(diǎn)線面玩得非常好,那下面就主要從這三個(gè)方面舉例。
點(diǎn)。通常起到點(diǎn)綴和豐富畫面的作用。
A.點(diǎn)
通常起到點(diǎn)綴和豐富畫面的作用。
輔助文案起到點(diǎn)的作用,讓版式更加豐富。
B.線
通常起到分割、強(qiáng)調(diào)、點(diǎn)綴、豐富畫面的作用。
C.面
通常起到強(qiáng)調(diào)、平衡、豐富畫面的作用。
可以看到,一張Banner,不僅僅由點(diǎn)或者不僅僅由線組成,而是點(diǎn)、線、面相互組合,相互平衡,最終形成一個(gè)版式豐富的Banner圖。
總而言之,看到別人的作品,不要單純地覺(jué)得“哇塞真好看!“就點(diǎn)了關(guān)閉鍵,或者右鍵另存為之后就再也沒(méi)有打開(kāi)過(guò)它。我們需要做的是,保存別人的作品之后,要分析別人作品值得我們學(xué)習(xí)的地方,等到我們?cè)O(shè)計(jì)的時(shí)候,要懂得把別人用得好的版式、字體、配色、裝飾等等運(yùn)用到我們自己的設(shè)計(jì)上,這才是設(shè)計(jì)師的思考方式。
雖然這只是音樂(lè)類的banner ,但是其中的大部分版式設(shè)計(jì)、對(duì)于字體的選擇與設(shè)計(jì)、配色的分析、裝飾的應(yīng)用等等,在電商設(shè)計(jì)、品牌設(shè)計(jì)等等其他的平面設(shè)計(jì)中也會(huì)用到。大家在平時(shí)的設(shè)計(jì)中有哪些好的發(fā)現(xiàn)和領(lǐng)悟呢?歡迎在留言區(qū)一起討論分享。積極分享、思考和總結(jié),才能進(jìn)步地更快哦!
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)