色彩幾乎在所有的設(shè)計(jì)工作中都是很重要的一項(xiàng)內(nèi)容，無論你喜歡鮮亮的色彩，大膽的色調(diào)亦或是極簡抽象的黑白配色，你所使用色彩都會(huì)對(duì)整體設(shè)計(jì)的風(fēng)格產(chǎn)生一定的影響。

在我們的設(shè)計(jì)工作中通常用到的一個(gè)方法就是色彩疊加，例如在一張圖片或一個(gè)視頻上面疊加一個(gè)半透明的圖層，這種方式會(huì)給圖片增添一份特別的韻味，不僅能牢牢地抓住用戶的眼球，而且還能給用戶留下無限的想象空間。

今天我們通過幾組不同的案例來揭密色彩疊加是如何發(fā)揮作用的，希望能夠拋磚引玉，為你們的設(shè)計(jì)工作帶來靈感。

使用漸變色

漸變色是非常酷的，當(dāng)你考慮使用色彩疊加的時(shí)候漸變色是個(gè)不錯(cuò)的選擇，它不僅具有強(qiáng)烈的視覺沖擊力，而且對(duì)用戶來說是非常具有吸引力的。

漸變色的特別之處在于我們可以使用一組顏色進(jìn)行搭配，即可以加入品牌色，也可以使用一種能夠使用戶聚焦的色彩，明亮的配色不僅能夠吸引用戶并且給會(huì)圖片帶來一種熱情的感覺。

這種風(fēng)格我們自然會(huì)想到Spotify(Spotify是全球最大的正版流媒體音樂服務(wù)平臺(tái)，2008年10月在瑞典首都斯德哥爾摩正式上線)，它使用同色系的漸變突出顯示播放列表。這種方式賦予了圖片新的生命力并且得到了用戶的喜愛。

這是一個(gè)很容易學(xué)習(xí)并融會(huì)貫通的技巧。選擇一張圖片,使用品牌色疊加到圖片上，調(diào)整色彩的透明度即可。

純色決定圖片基調(diào)

純色同樣具有引人注目的效果，而且純色能夠傳遞出更加鮮明的色彩情感，例如，在圖片上疊加深褐色圖層，立刻就會(huì)有一種古樸的歲月感。

同樣的為了傳遞出時(shí)尚現(xiàn)代的感覺，我們可以使用鮮亮的、飽和度高的色彩。這種簡約明快的色彩會(huì)給人以現(xiàn)代感和時(shí)尚感。

當(dāng)我們使用一種色彩的時(shí)候，就要考慮它的飽和度和透明度，因?yàn)檫@些參數(shù)的大小直接會(huì)影響到整體的基調(diào)。透明度和飽和度低的重色調(diào)，會(huì)使用戶把更多的精力聚焦在顏色圖層本身;而透明度和飽和度高的色調(diào)，則會(huì)把用戶的吸引力全部聚焦在圖片之上。

考慮黑白色調(diào)

你也不必只考慮使用有彩色來做疊加圖層，有時(shí)候我們可以考慮使用黑白灰色調(diào)，使用這種經(jīng)典的配色可以改變一個(gè)項(xiàng)目的基調(diào)和氣質(zhì)。

我們的經(jīng)驗(yàn)告訴自己，暗色調(diào)會(huì)營造一種憂郁的情緒，淡色調(diào)會(huì)有種歡快的感覺。而影響這種感覺的除了色彩之外就是圖片本身。圖片是如何跟色彩發(fā)生化學(xué)反應(yīng)的呢?還是圖片、色彩和文字信息互相作用的呢?

Call me Ish(上圖所示)的黑白圖片上覆蓋了一層白色透明遮罩，這就使用戶的所有注意力都集中到了遮罩上黑色的標(biāo)題，但是需要注意圖片人物的表情：他咧嘴微笑，自然的色調(diào)融合好像在向你邀約合作拍照一般，并且我們也極有可能在這種感覺下與他合作。

選擇高對(duì)比度的圖片

當(dāng)我們?cè)诠ぷ髦锌紤]使用這種方式的時(shí)候，圖片(視頻)的內(nèi)容構(gòu)成也是很重要的。如果想要營造出柔和的感覺，那么就要選擇一副清新的圖片搭配一種溫和的色彩;相反的，如果你開始使用的圖片的內(nèi)容是色調(diào)明暗對(duì)比強(qiáng)烈的畫面，那么根據(jù)以上技巧同樣也可以簡單的獲得不錯(cuò)的結(jié)果。

如果你的圖片內(nèi)容并沒有明顯的對(duì)比，那么你就要考慮使用軟件進(jìn)行圖片合成了，否則，輸出的結(jié)果是不會(huì)很理想的。

另一個(gè)能達(dá)到相同效果的方法就是使用黑白照片，這個(gè)方法對(duì)新手來說很容易上手，因?yàn)樗軌蚋尤菀椎膮^(qū)分和提升整體的色調(diào)對(duì)比。Just Actions就很好的展現(xiàn)出黑白圖片與彩色遮罩圖片搭配所碰撞出的強(qiáng)烈對(duì)比。

圖片應(yīng)該看起然很自然

工作中如涉及到色彩疊有兩條建議送給大家：

圖片應(yīng)該是很自然的，不論是色彩還是光影關(guān)系都應(yīng)該符合客觀邏輯。在Abednego Coffee(上圖所示)頁面中，色彩疊加的圖層有些微妙。

圖片看起來完全強(qiáng)了主題的風(fēng)頭，色彩遮罩似乎并沒有起到削弱圖片對(duì)比度的作用。

這些規(guī)則并沒有中間的立場(chǎng)，如果圖片并不具備被一定的對(duì)比度，那么設(shè)計(jì)者在挑選圖片的時(shí)候可能會(huì)比較困難，并且無論如何搭配色彩遮罩，用戶都不會(huì)把注意力完全集中到網(wǎng)站內(nèi)容的主題上。

突出重點(diǎn)

前面的案例詮釋了大圖如何搭配色彩疊加，以上兩個(gè)案例展示了達(dá)到這種效果的不同方法。

Knot Clothing(上圖一)使用了明度比較高的綠色背景導(dǎo)航，并且通過頂部的純色疊加進(jìn)一步突出了導(dǎo)航。這種效果使得網(wǎng)站在色彩比較多的時(shí)候更好地維護(hù)了品牌色彩的主體性。而且具有一定透明度的柔和感比用純色的色彩做背景給人的感覺更加的親和，具有人情味。

Nuts and Woods則采用了另外一種方法，當(dāng)用戶鼠標(biāo)滑過圖片的時(shí)候會(huì)有一個(gè)顏色遮罩來告訴你這個(gè)項(xiàng)目的相關(guān)信息，并且這個(gè)紅色遮罩是詳情頁的入口，點(diǎn)擊后可查看跟多的信息，這個(gè)方式在我們的設(shè)計(jì)工作中應(yīng)用的比較廣泛。

總結(jié)

色彩疊加僅僅是眾多色彩應(yīng)用技巧中的一種，它也并不是每個(gè)項(xiàng)目都適用。它看似簡單，其實(shí)需要我們?cè)诠ぷ髦腥跁?huì)貫通，靈活使用。

對(duì)于任何的設(shè)計(jì)技巧而言，都有它適用的范圍。我們應(yīng)該在實(shí)際項(xiàng)目中，了解清楚需求及相關(guān)內(nèi)容后在進(jìn)行視覺風(fēng)格的構(gòu)思。今天只為拋磚引玉，希望能給大家?guī)韼椭?/p>

最新評(píng)論