成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

教小白從零開始設(shè)計出好看的BANNER

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

今天我想和大家簡單分析一下,這兩個APP的banner設(shè)計。主要從構(gòu)圖、字體、配色、裝飾這四個方面來分析。以下案例均來自網(wǎng)絡(luò),版權(quán)歸網(wǎng)易云音樂和蝦米音樂所有。首先想和大家簡析一下網(wǎng)易云音樂的banner設(shè)計。1. 構(gòu)圖構(gòu)圖是一個banner設(shè)計中最基礎(chǔ)的部分,在做banner排版的時候,首先要根據(jù)banner的內(nèi)容確定一個大概的構(gòu)圖,再去豐富版式的細(xì)節(jié)。A.左字右圖左字右圖是最常見最容易掌握的排版,中規(guī)中矩,不易出錯。B.左圖右字左圖右字和左字右圖差不多,首先要根據(jù)素材圖片的構(gòu)圖和走向確定圖片是適合放在左邊還是右邊

今天我想和大家簡單分析一下,這兩個APP的banner設(shè)計。主要從構(gòu)圖、字體、配色、裝飾這四個方面來分析。以下案例均來自網(wǎng)絡(luò),版權(quán)歸網(wǎng)易云音樂和蝦米音樂所有。

首先想和大家簡析一下網(wǎng)易云音樂的banner設(shè)計。

1.jpg

1. 構(gòu)圖

構(gòu)圖是一個banner設(shè)計中最基礎(chǔ)的部分,在做banner排版的時候,首先要根據(jù)banner的內(nèi)容確定一個大概的構(gòu)圖,再去豐富版式的細(xì)節(jié)。

A.左字右圖

左字右圖是最常見最容易掌握的排版,中規(guī)中矩,不易出錯。

2.png

3.png

4.png

5.png

6.png

B.左圖右字

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

7.png

8.png

9.jpg

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

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

10.png

11.png

12.png

13.png

14.jpg

D.上下構(gòu)圖

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

15.jpg

16.png

17.png

18.png

E.文字作為主體居中

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

19.png

20.png

F.不規(guī)則構(gòu)圖

不規(guī)則構(gòu)圖最難把握,相對的,最有設(shè)計感。不規(guī)則構(gòu)圖如果把握得好,版式的豐富會給人眼前一亮的感覺。其實不規(guī)則構(gòu)圖也是在常規(guī)構(gòu)圖的基礎(chǔ)上再做一些變化,萬變不離其宗。

21.png

22.jpg

23.png

2. 字體

正確選擇字體在banner設(shè)計中也是非常重要的,字體的氣質(zhì)和畫面的氣質(zhì)要一致,這樣畫面看起來才是一個和諧的整體。例如,如果畫面中的人物是女生,就不適宜用粗獷硬朗的字體,要用能夠襯托出主角氣質(zhì)的字體。

字體主要分為兩類,一類是系統(tǒng)字體,一類是設(shè)計師自己設(shè)計的字體,設(shè)計師設(shè)計字體可以在系統(tǒng)字體的基礎(chǔ)上做些改變,或者自己重新設(shè)計字體的筆畫,但是重新設(shè)計會比較費時間。所以要根據(jù)工作時間做合理的安排,如果時間緊急,就沒必要做字體設(shè)計了。當(dāng)然對于大神來說,做個字體設(shè)計是小菜一碟,但是對于我來說,做字體設(shè)計還是挺吃力的,還需努力。

網(wǎng)易云音樂作為一個音樂類APP,banner的風(fēng)格一般都比較文藝,最常見的字體是宋體和細(xì)黑體,有時候會根據(jù)畫面的氣質(zhì)做相應(yīng)的改變。下面舉幾個案例。

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īng)過設(shè)計的字體總是讓人眼前一亮,富有設(shè)計感。為畫面增色不少。

35.jpg

36.png

37.png

38.jpg

39.png

40.png

41.png

3. 配色

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

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

42.png

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

43.png

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

44.png

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

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

45.jpg

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

46.jpg

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

47.jpg


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

4.裝飾

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

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

48.jpg

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

49.png

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

50.jpg

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

51.jpg

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

52.jpg

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

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.在蝦米音樂的banner里面,其實黑體反而是最常見的

(大概是因為黑體幾乎適合所有的氣質(zhì),并且適合做標(biāo)題吧。)

78.jpg

79.jpg

80.jpg

81.jpg

82.jpg

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

83.png


D.字體設(shè)計

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

84.jpg

85.jpg

86.jpg

87.jpg

88.jpg

3.配色

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

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.裝飾

前面說過蝦米音樂的banner把點線面玩得非常好,那下面就主要從這三個方面舉例。

點。通常起到點綴和豐富畫面的作用。

A.點

通常起到點綴和豐富畫面的作用。

100.jpg

101.jpg


輔助文案起到點的作用,讓版式更加豐富。


102.jpg


B.線

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

103.jpg

104.jpg

105.jpg


C.面

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

106.jpg

107.jpg

108.jpg

可以看到,一張Banner,不僅僅由點或者不僅僅由線組成,而是點、線、面相互組合,相互平衡,最終形成一個版式豐富的Banner圖。

總而言之,看到別人的作品,不要單純地覺得“哇塞真好看!“就點了關(guān)閉鍵,或者右鍵另存為之后就再也沒有打開過它。我們需要做的是,保存別人的作品之后,要分析別人作品值得我們學(xué)習(xí)的地方,等到我們設(shè)計的時候,要懂得把別人用得好的版式、字體、配色、裝飾等等運用到我們自己的設(shè)計上,這才是設(shè)計師的思考方式。

雖然這只是音樂類的banner ,但是其中的大部分版式設(shè)計、對于字體的選擇與設(shè)計、配色的分析、裝飾的應(yīng)用等等,在電商設(shè)計、品牌設(shè)計等等其他的平面設(shè)計中也會用到。大家在平時的設(shè)計中有哪些好的發(fā)現(xiàn)和領(lǐng)悟呢?歡迎在留言區(qū)一起討論分享。積極分享、思考和總結(jié),才能進(jìn)步地更快哦!




11
13
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

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

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

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

版權(quán)信息

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