從層次/色調/創意三方面設計網頁（二）

02. 色調

畫面的色調，是傳達畫面所要表達情感的有效途徑。不同的色調可以給人帶來不同的體驗，正是因為有了不同的色彩，才使得我們的設計更加豐富。

色調統一

上兩圖中，左圖統一的暖色調彰顯了畫面的熱情激昂，而右圖統一的冷色調則表現出畫面的冷酷。在處理時切記對畫面中所有的元素都要進行統一的環境色處理，運用到網頁設計當中如下：

上面幾個例子中，為了更進一步的融入大環境中，設計師都對原始素材進行了色調上的二次處理，整個網頁的風格在色調上保持統一。

冷暖對比

上三圖中，在色調處理上都運用了冷暖對比的形式，使畫面的細節更加豐富，同時，冷暖的對比可以表達出超強的對抗性。運用到網頁設計當中如下：

通過上面的例子可以看出，冷暖的對比在網頁的場景打造過程中，可以用來很好的表現“對抗”和“戰鬥”方面的主題，另外，整個冷調的場景中適當加入些暖調，也可以起到突出主體的作用。

03. 創意

豐富的海報創意不僅可以抓人眼球，而且可以很巧妙地表達出主題。大到整體的形式，小到文字或素材的細節處理，都是可以學習並且運用到網頁設計中的。

形式創新

上左圖通過人物躲在牆壁破裂的一角來體現畫面的神秘感，而右圖則通過破碎的玻璃來反射出一些跟男主相關的人物或場景，運用到網頁設計當中如下：

素材處理

上左圖對中間的複聯英雄進行了類似剪影的處理，而右圖則對人物的邊緣進行了顆粒化的處理，運用到網頁設計當中如下：

文字烘托

上左圖將書法的“武俠”二字作為畫面主視覺進行處理，而右圖則直接將死侍坐在類似3d處理後的電影名字上，很好的融入到了畫面中。運用到網頁設計當中如下：

04. 實例

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

小結

海報可以給我們的設計帶來很多靈感，其實不止是海報，設計本身就是相通的，所以很多別的領域的設計也可以讓我們去學習。本文的講解更偏重於遊戲，而且由於本人水準有限，講解涉及到的知識並不全面，還望各位看官能夠理解。最後送給大家一句話： 設計源於生活，我們應該學會從生活中汲取靈感。