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

很多人曾在查看網(wǎng)頁時經(jīng)常有見到很好的海報設(shè)計，而海報設(shè)計通常可以對其出色的色彩處理、布局排版、氛圍渲染、場景營造、文字處理和巧妙的構(gòu)思來吸引訪問者的注意力。所以若我們能吸納優(yōu)秀的視覺海報，來幫助我們在網(wǎng)頁設(shè)計領(lǐng)域。設(shè)計是相互的，答案也是肯定的。今天海淘科技將為大家說一些，優(yōu)秀的海報設(shè)計在網(wǎng)頁應(yīng)用中的應(yīng)用。

我們主要通過層次、色調(diào)和創(chuàng)意三個方面來跟大家進行講解。

層次

頁面的空間感，通俗點說就是頁面內(nèi)容有主次的本別，有距離感，有虛、有實，光水平是明確的，這張照片會看起來真實、豐富。要用一些特殊的處理技術(shù)，可以進一步提高水平的不同元素,讓身體更加突出。這部分的解釋是不相關(guān)的顏色知識,為了使每個人都更容易觀察,所以海報的顏色的去處處理。

遠近關(guān)系

上兩張圖中有按箭頭所示方，從由近到遠，畫面的縱深感強，遠近圖層的層次很是明朗，畫面感超強的。在網(wǎng)頁設(shè)計運用中，如圖下：

這樣看到上面的例子可明白，近而遠清晰的網(wǎng)頁頁面，網(wǎng)頁上的內(nèi)容搭配上，可以使頁面看起來很有空氣感，同時瀏覽內(nèi)容，也可以通過現(xiàn)場傳達的感覺很強烈。

虛與實

指出了在變化的方向由實到虛近實遠虛，滿足正常，層次感很強;在在上右圖中，真實與虛擬場景中我們都可以理解，但圖片底部為什么距我們最近的那些男人是徒勞的?我們看到下面的圖片可能更容易理解。

這張海報實際上是更接近生活的行動，在我們的生活中，它是有一個明確的焦點主題，毫無疑問，是美麗的竹桿圖。在這個時候，雖然對花草植物的前景更靠近我們，但因為他們是從我們的視線焦點(我們沒有直接去看花草)，所以，這一次花草的前景我們也要模糊，和甚至有時模糊程度比遠處的景物更明顯。這是一個需要知道。我們會看看海報中的實際情況關(guān)系在網(wǎng)頁設(shè)計中的運用。

通過上面的例子我們可以看到,把握好屏幕的實際層次水平,結(jié)合頁面的內(nèi)容,你可以讓頁面看起來更接近真實的場景,視覺體驗更為現(xiàn)實。

氛圍關(guān)系

1. 圖1通過煙了搭售和機器人的距離，煙是在距離機器人減弱，同時突出了女主，兩具有明顯的層次；
2. 圖片2中的人就比較覺暗了一下，顏色較深的背景是黑色的，如果人物的位置，直接將字符將結(jié)合背景，這里用人工增添氣氛的發(fā)光效率，碎片和其他元素，突出人物的邊緣輪廓，背光的性狀的影響分離出來，從黑暗的；
3. 圖3是以同樣的方式，但它與光和煙霧來區(qū)分層次關(guān)系的許多特征。然后應(yīng)用到網(wǎng)頁設(shè)計的大氣關(guān)系如下：

通過上面的例子可以看到,一些元素的合理使用的氣氛渲染,如光、煙、云等材料,不僅可以提高頁面的氣氛,但也突出主體,主體之外的其他元素而削弱,他成功地分開了這個主題的主要非元素之間的層次關(guān)系。

色調(diào)

畫面是有色調(diào)，是傳達圖像表達情感的一種有效方式。不同的顏色可以給人帶來不同的體驗，它是因為顏色的不同，使我們的設(shè)計更豐富。

色調(diào)統(tǒng)一

上兩圖中，離開溫暖的色彩統(tǒng)一的熱情舉動顯示圖片，并統(tǒng)一冷冷色調(diào)的為主調(diào)了。記得在處理所有元素的圖像時要進行統(tǒng)一的環(huán)境顏色處理，適用于網(wǎng)頁設(shè)計如下：

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

冷暖對比

上面三圖中，是用比色法對色調(diào)處理的形式，使圖片的細節(jié)更加豐富，同時，溫度的變化對比可以表達剩余強烈的對抗作用。應(yīng)用到網(wǎng)頁設(shè)計如下：

通過上面的例子可以看到,相比“場景構(gòu)建過程,可以用于性能良好的“對抗”和“戰(zhàn)斗”主題,此外,適當?shù)奶砑右恍嘏瘺鏊膱鼍?也可以起到突出的主要作用。

創(chuàng)意

富有海報創(chuàng)意的人不僅能很好的工作，而且能熟練地表達主題。大到整體的形式，小到文字或資料處理的細節(jié)，可以在網(wǎng)頁設(shè)計中學習和應(yīng)用。

形式創(chuàng)新

上左圖對人物躲在墻壁破裂的來體現(xiàn)畫面的神秘感，而右圖片是用破碎的玻璃來反射出一些跟男主相關(guān)的人物或場景，運用在網(wǎng)頁設(shè)計當中如下：

素材處理

上左圖對中間的復(fù)聯(lián)英雄進行了類似剪影的處理，而右圖則對人物的邊緣進行了顆?；奶幚?，運用到網(wǎng)頁設(shè)計當中如下：左邊中間的多個相似的輪廓,英雄和字符的邊緣加工造粒,應(yīng)用于網(wǎng)頁設(shè)計如下:

文字烘托

上左面的而圖片“武俠”二字為主要視覺圖像處理，而死亡的權(quán)利時直接就類似3 D電影名字后處理，很好的圖片。應(yīng)用到網(wǎng)頁設(shè)計如下：

實例

這里通過對原畫的再次處理，加強了畫面的對比度，進一步加強了冷暖對比，對距離遠近不同的人物也通過模糊、調(diào)色、添加煙霧及火光等素材進行了層次上的進一步區(qū)分，同時添加了下雨及火炮等氛圍元素。頁面的部分內(nèi)容元素相對于人物做了一個前后的處理，使得頁面整體的層次得到了進一步的加強。

小結(jié)

海報可以給我們很多的靈感設(shè)計,事實上,不僅是一張海報,設(shè)計本身是相互關(guān)聯(lián)的,所以很多其他領(lǐng)域的設(shè)計還可以讓我們?nèi)W習。這個解釋是更注重游戲,但由于我的能力有限,解釋所涉及的知識不全面,但也希望你能理解。最后給了我們一個句子:設(shè)計從生活中,我們應(yīng)該學會從生活中汲取靈感。

今天就先分享到這里，還有更多的網(wǎng)頁設(shè)計與網(wǎng)頁制作。文章下載，點擊：網(wǎng)頁設(shè)計采用海報視覺