海報(bào)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

2021-06-05    分類: 網(wǎng)站建設(shè)

大家在瀏覽網(wǎng)頁(yè)時(shí)經(jīng)??梢钥磧?yōu)秀的海報(bào)設(shè)計(jì),這些設(shè)計(jì)往往可以通過(guò)其優(yōu)秀的顏色處理、場(chǎng)景打造、氛圍渲染、排版布局、文字處理以及巧妙的創(chuàng)意等方面來(lái)抓住瀏覽者的眼球。那么我們是不是可以吸收這些優(yōu)秀的海報(bào)視覺(jué),來(lái)幫助我們?cè)O(shè)計(jì)其他領(lǐng)域的東西呢?設(shè)計(jì)是相通的,答案自然也是肯定的。那么今天創(chuàng)新互聯(lián)就跟大家分享一下一些優(yōu)秀的海報(bào)設(shè)計(jì)在網(wǎng)頁(yè)中的應(yīng)用。


我們主要通過(guò)層次、色調(diào)和創(chuàng)意三個(gè)方面來(lái)跟大家進(jìn)行講解。

01.層次

畫(huà)面的層次感,說(shuō)白了其實(shí)就是畫(huà)面的內(nèi)容有主次之分,有空間感和距離感,有虛實(shí)之分,光影層次清晰,這樣的畫(huà)面才起來(lái)才真實(shí)、豐富,而且通過(guò)一些特殊的處理手法,可以進(jìn)一步拉開(kāi)畫(huà)面中不同元素的層次,使得主體更加突出。(因本部分的講解不涉及到色彩方面的知識(shí),為了更便于大家觀察,所以對(duì)海報(bào)進(jìn)行了去色處理)

≡遠(yuǎn)近關(guān)系≡

213773a4d6d6ccd3b7cac14d36113270

上兩圖中按箭頭所示方向由近及遠(yuǎn),畫(huà)面縱深感強(qiáng),遠(yuǎn)近景層次明顯,畫(huà)面感很強(qiáng)。運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中如下:

4983074439141280f660f14b3bd81422

879a3207b9624cbf1b64668cadedbab0

通過(guò)上面的例子可以看出,遠(yuǎn)近層次清晰的畫(huà)面,搭配上網(wǎng)頁(yè)中的內(nèi)容,可以使頁(yè)面看起來(lái)更加透氣,在瀏覽內(nèi)容的同時(shí),也能夠通過(guò)場(chǎng)景傳遞出很強(qiáng)的代入感。

≡虛實(shí)關(guān)系≡

3ee722ca087015ae99092416e903230d

上左圖中按箭頭所示方向依次由實(shí)到虛變化,滿足正常情況下近實(shí)遠(yuǎn)虛的道理,層次感很強(qiáng);在上右圖中,實(shí)景和遠(yuǎn)處的虛景想必大家都可以理解,但為什么離我們最近的下方的人也是虛的呢?我們看下下面這張圖可能更容易理解。


這張海報(bào)其實(shí)更接近于咱們生活中的實(shí)景拍攝,而且是那種有明顯對(duì)焦主體,毫無(wú)疑問(wèn)是圖中拿著竹竿的美女。那這時(shí),雖然前景的花草離我們更近,但是因?yàn)樗鼈兤x我們的對(duì)焦點(diǎn)(我們的視線并沒(méi)有直接去看這些花草),所以,這時(shí)候前景的花草我們也是去做模糊處理的,甚至有的時(shí)候模糊度比遠(yuǎn)處的場(chǎng)景還要明顯。這個(gè)是需要了解的。那我們?cè)倏聪潞?bào)中的虛實(shí)關(guān)系在網(wǎng)頁(yè)中的應(yīng)用。

ce4170a799cc91fa4d4b5b2de5b0a8e0

2c93ffac953beb053971686b131aad3c

通過(guò)上面的例子可以看出,把握好畫(huà)面中的虛實(shí)層次,結(jié)合網(wǎng)頁(yè)的內(nèi)容,可以使頁(yè)面看起來(lái)更加接近真實(shí)場(chǎng)景,視覺(jué)體驗(yàn)上來(lái)說(shuō)更加逼真。

≡氛圍關(guān)系≡

1f70819a0f7e72a0701444da7a3d44e4

79b88f4179d8fff314aa7bd51627a7af

圖1通過(guò)煙霧來(lái)拉開(kāi)女主與遠(yuǎn)處機(jī)器人的層次,煙霧既弱化了遠(yuǎn)處機(jī)器人,同時(shí)突出了女主,讓兩者有一個(gè)明顯的層級(jí)關(guān)系;


圖2中人物本身顏色較暗,背景也是暗色,這時(shí)候如果直接把人物置入,人物就會(huì)與背景融為一體,這里利用人為添加的光效、碎片等氛圍元素,凸顯了人物的邊緣輪廓,背光的效果使人物從黑暗中分離出來(lái);


圖3也是同理,只不過(guò)它通過(guò)光影和煙霧一起來(lái)區(qū)分眾多人物之間的層次關(guān)系。那么氛圍關(guān)系運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中如下:

93615644adba00b0fc78baa0eab6cb89

cbe9fec524dd071ab4227d2d9994d1e5

通過(guò)上面的例子可以看出,合理利用一些氛圍元素的渲染,例如光、煙霧、云等素材,不僅可以起到烘托頁(yè)面氣氛的作用,而且可以突出主體,同時(shí)弱化主體外的其他元素,成功地拉開(kāi)主體與其他非主體元素之間的層次關(guān)系。


02.色調(diào)

畫(huà)面的色調(diào),是傳達(dá)畫(huà)面所要表達(dá)情感的有效途徑。不同的色調(diào)可以給人帶來(lái)不同的體驗(yàn),正是因?yàn)橛辛瞬煌纳?,才使得我們的設(shè)計(jì)更加豐富。

810042ffa35f41d53b4bcacf95f6cb75

上兩圖中,左圖統(tǒng)一的暖色調(diào)彰顯了畫(huà)面的熱情激昂,而右圖統(tǒng)一的冷色調(diào)則表現(xiàn)出畫(huà)面的冷酷。在處理時(shí)切記對(duì)畫(huà)面中所有的元素都要進(jìn)行統(tǒng)一的環(huán)境色處理,運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中如下:

ce9e9aee8c7a0dd10ea0403bb2cadde7

a1851b87b6307cb21b7fddae1dbc45b7

8afdc9006545d810ceab980897e30bfc

上面幾個(gè)例子中,為了更進(jìn)一步的融入大環(huán)境中,設(shè)計(jì)師都對(duì)原始素材進(jìn)行了色調(diào)上的二次處理,整個(gè)網(wǎng)頁(yè)的風(fēng)格在色調(diào)上保持統(tǒng)一。

≡冷暖對(duì)比≡

4e440b18f8b8861994fc6d4922426d97

f0827fb10b91adc1aec5f681c5f99c7f

0aa2e7af84e635c1f541cfc3fc58cf53

上三圖中,在色調(diào)處理上都運(yùn)用了冷暖對(duì)比的形式,使畫(huà)面的細(xì)節(jié)更加豐富,同時(shí),冷暖的對(duì)比可以表達(dá)出超強(qiáng)的對(duì)抗性。運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中如下:

ef4854fde814c56583f9193fd4fde35a

海報(bào)可以給我們的設(shè)計(jì)帶來(lái)很多靈感,其實(shí)不止是海報(bào),設(shè)計(jì)本身就是相通的,所以很多別的領(lǐng)域的設(shè)計(jì)也可以讓我們?nèi)W(xué)習(xí)。本文的講解更偏重于游戲,而且由于本人水平有限,講解涉及到的知識(shí)并不全面,還望各位看官能夠理解。最后送給大家一句話: 設(shè)計(jì)源于生活,我們應(yīng)該學(xué)會(huì)從生活中汲取靈感。

新聞名稱:海報(bào)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用
當(dāng)前網(wǎng)址:http://www.bm7419.com/news23/116473.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)網(wǎng)站收錄、網(wǎng)站建設(shè)、定制網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)