国产四级片,69国产成人精品午夜福中文,日韩72页,天天操天天干天天爽,韩国女主播美女跳舞视频,美女视频在线观看理论,杨幂13分视频在线观看

教小白從零開(kāi)始設(shè)計(jì)出好看的BANNER

作者:
分類: 教程
2017-01-03
24869

今天我想和大家簡(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ì)。

1.jpg

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ò)。

2.png

3.png

4.png

5.png

6.png

B.左圖右字

左圖右字和左字右圖差不多,首先要根據(jù)素材圖片的構(gòu)圖和走向確定圖片是適合放在左邊還是右邊,再做文案的排版。左圖右字也是屬于比較常規(guī)不容易出錯(cuò)的構(gòu)圖。

7.png

8.png

9.jpg

C.左中右構(gòu)圖

左中右構(gòu)圖一般為左圖中字右圖或者左字中圖右字。這種構(gòu)圖比左右構(gòu)圖版式會(huì)豐富點(diǎn),但是比它們難把握。如果banner上要出現(xiàn)兩個(gè)人物,比較適合左中右構(gòu)圖?;蛘呦胍攸c(diǎn)突出人物,也可以把人物居中,把文案放在人物兩側(cè)。

10.png

11.png

12.png

13.png

14.jpg

D.上下構(gòu)圖

上下構(gòu)圖一般為上字下圖。上下構(gòu)圖不好掌握,常見(jiàn)于一個(gè)Banner中要出現(xiàn)多個(gè)人物,多個(gè)人物在左右構(gòu)圖里不好擺放。

15.jpg

16.png

17.png

18.png

E.文字作為主體居中

圖片作為背景起到一個(gè)裝飾的作用,或者沒(méi)有圖片素材。常見(jiàn)于文案內(nèi)容比較抽象、不方便或者不需要用到圖片素材、不知道用什么圖片素材去表達(dá)畫面內(nèi)容,沒(méi)有一個(gè)代表性的圖片素材作為畫面主體的情況。

19.png

20.png

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)變不離其宗。

21.png

22.jpg

23.png

2. 字體

正確選擇字體在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ì)

24.png

25.png

26.png

27.jpg

28.jpg

29.jpg

B.根據(jù)畫面的氣質(zhì)做相應(yīng)的選擇

30.jpg

31.png

32.jpg

33.jpg

34.png


C.字體設(shè)計(jì)

經(jīng)過(guò)設(shè)計(jì)的字體總是讓人眼前一亮,富有設(shè)計(jì)感。為畫面增色不少。

35.jpg

36.png

37.png

38.jpg

39.png

40.png

41.png

3. 配色

配色用得最多的兩種方法,第一,把素材黑白化,再根據(jù)文案和人物的氣質(zhì)選取一個(gè)合適的顏色。第二種方法就是從素材里面直接吸取合適的顏色,再調(diào)節(jié)飽和度和明度,調(diào)出一個(gè)基本色,再取基本色的對(duì)比色、近似色等等作為輔助色。

下面舉幾個(gè)把素材黑白化,根據(jù)文案和人物的氣質(zhì)選取一個(gè)合適的顏色的案例。

42.png

黃黑白這種顏色搭配比較經(jīng)典,容易出效果。素材黑白化之后加入黃色的色塊,對(duì)比鮮明,具有視覺(jué)沖擊力,符合文案的氣質(zhì)。

43.png

淺藍(lán)色和黑白搭配。人物素材黑白化處理之后,選用了淺藍(lán)色作為背景色,再調(diào)節(jié)背景色的飽和度和明度,深藍(lán)色點(diǎn)綴畫面。

44.png

藍(lán)色和黑白搭配。人物素材黑白化處理,可以看到人物的亮部調(diào)得很亮,黑色背景突出人物,文案用了藍(lán)色。

下面舉幾個(gè)從素材里面直接吸取合適的顏色的案例。

45.jpg

可以看到人物衣服的顏色主色是藍(lán)綠色和黃色。直接吸取衣服的顏色,加以調(diào)節(jié),藍(lán)綠色作為背景色,黃色作為點(diǎn)綴色,整個(gè)畫面比較和諧統(tǒng)一。

46.jpg

可以看到人物衣服的顏色主色是藍(lán)色和淺藍(lán)色。所以直接用了淺藍(lán)色作為背景色,藍(lán)色作為文案色。

47.jpg


這個(gè)案例是吸取了人物頭發(fā)的顏色,調(diào)淺之后作為背景色,調(diào)深了作為文案的顏色,再加入淺黃色和白色的色塊,整個(gè)畫面非常文藝和安靜。

4.裝飾

裝飾常見(jiàn)于點(diǎn)、線、面,或者一些手繪的元素等等,在確定基本的構(gòu)圖和配色之后,加入一點(diǎn)小元素和小裝飾,會(huì)讓畫面更有細(xì)節(jié),更有設(shè)計(jì)感。

例如下面這個(gè)案例,給人物加上一些手繪的小裝飾,畫面增加了一些輕松、詼諧、可愛(ài)的感覺(jué)。加什么裝飾,要看設(shè)計(jì)師的目的,而不是盲目地為了加而加,加任何一個(gè)元素,都要有它存在的意義。

48.jpg

例如下面這個(gè)案例,加入了嘴唇的剪影和線框,增強(qiáng)了設(shè)計(jì)感,線框把文案和人物連接在一起,形成一個(gè)整體。

49.png

例如下面這個(gè)案例,斜線不僅填補(bǔ)了空白,平衡畫面,而且豐富了畫面。

50.jpg

下面這個(gè)案例也是同樣的道理,波浪線和右邊的英文字母不僅起到一個(gè)平衡畫面的作用,還裝飾了畫面。

51.jpg

下面這個(gè)案例就加入了一些墨跡,渲染了“搖滾”的氛圍,同時(shí)還起到“點(diǎn)”的作用,豐富了畫面。

52.jpg

談完了網(wǎng)易云音樂(lè),下面和大家分享一下蝦米音樂(lè)的banner設(shè)計(jì)。蝦米音樂(lè)的我就不講那么詳細(xì)了,其實(shí)道理都差不多。下面主要是舉例。

53.jpg


1. 構(gòu)圖

A.左圖右字

54.png

55.jpg

56.jpg

B.左字右圖

57.jpg

58.jpg

59.png

60.jpg

61.jpg

C.左中右構(gòu)圖

62.jpg

63.png

64.jpg

65.jpg

66.jpg

D.文字作為主體居中

67.jpg

68.jpg

69.jpg

70.jpg

71.jpg


2.字體

A.用宋體表達(dá)文藝、品質(zhì)感、復(fù)古的氣質(zhì)

72.png

73.jpg

74.jpg

75.jpg

76.jpg

77.jpg


B.在蝦米音樂(lè)的banner里面,其實(shí)黑體反而是最常見(jiàn)的

(大概是因?yàn)楹隗w幾乎適合所有的氣質(zhì),并且適合做標(biāo)題吧。)

78.jpg

79.jpg

80.jpg

81.jpg

82.jpg

C.根據(jù)畫面的氣質(zhì)做相應(yīng)的選擇

83.png


D.字體設(shè)計(jì)

看了一下我收集的案例,發(fā)現(xiàn)蝦米音樂(lè)banner的字體設(shè)計(jì)比網(wǎng)易云音樂(lè)的要少。蝦米音樂(lè)的Banner主要是運(yùn)用點(diǎn)線面把畫面的版式設(shè)計(jì)得非常豐富。

84.jpg

85.jpg

86.jpg

87.jpg

88.jpg

3.配色

A.發(fā)現(xiàn)蝦米音樂(lè)非常喜歡把人物單色化處理

89.jpg

90.jpg

91.jpg

92.jpg

93.jpg

B.從素材里面直接吸取合適的顏色,再調(diào)節(jié)飽和度和明度

吸取衣服的顏色:

94.jpg


吸取衣服的顏色:


95.jpg


吸取衣服的顏色:


96.png


吸取衣服的顏色:


97.jpg


吸取人物身上披著的布料的顏色:


98.jpg


吸取人物衣服的顏色和膚色:


99.jpg


4.裝飾

前面說(shuō)過(guò)蝦米音樂(lè)的banner把點(diǎn)線面玩得非常好,那下面就主要從這三個(gè)方面舉例。

點(diǎn)。通常起到點(diǎn)綴和豐富畫面的作用。

A.點(diǎn)

通常起到點(diǎn)綴和豐富畫面的作用。

100.jpg

101.jpg


輔助文案起到點(diǎn)的作用,讓版式更加豐富。


102.jpg


B.線

通常起到分割、強(qiáng)調(diào)、點(diǎn)綴、豐富畫面的作用。

103.jpg

104.jpg

105.jpg


C.面

通常起到強(qiáng)調(diào)、平衡、豐富畫面的作用。

106.jpg

107.jpg

108.jpg

可以看到,一張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)步地更快哦!




11
13
分享到:

0

喜歡他,就推薦他上首頁(yè)吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國(guó)家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)