什么是色彩疊加?
色彩疊加這種風(fēng)格我們經(jīng)??梢栽诤芏啻髲S設(shè)計(jì)中看到。從它的名字我們就知道這是一種通過顏色混合的一種表現(xiàn)手法。色彩疊加在色彩構(gòu)成學(xué)上叫色料混合, 也叫第二混合。兩種或者多種顏色混合后所產(chǎn)生的新顏色,混合的色彩不但色相發(fā)生變化,明度和純度都會(huì)產(chǎn)生變化。它是多個(gè)顏色通過不同模式進(jìn)行混合,可以得到不同的顏色,通過色彩模式疊加的運(yùn)用,讓它的細(xì)節(jié)層次更豐富,色彩的飽和度也高。下面我來解刨一下它的特點(diǎn),你也可以通過這些特點(diǎn),輕松掌握這個(gè)設(shè)計(jì)技法哦!
色彩疊加特點(diǎn)一:鄰近/互補(bǔ)色搭配
在色相環(huán)上采用鄰近色搭配,顏色多以明亮的高飽和度為主,使得頁面更具時(shí)尚活潑感。
鄰近色是色環(huán)相鄰的兩種顏色,色相在60度以內(nèi),這樣的顏色搭配色彩過度比較平和也會(huì)顯得頁面有層次。互補(bǔ)色是色環(huán)相對立的顏色,色相相距180度,這樣的顏色搭配對比會(huì)非常強(qiáng)烈,視覺效果會(huì)鮮明。
鄰近/互補(bǔ)色在網(wǎng)頁的運(yùn)用
在視覺表現(xiàn)上運(yùn)用互補(bǔ)色對比,搭配柔和的漸變過渡,給人一種年輕有活力的視覺感受。
明亮的鄰近色搭配作為頁面的背景、卡片背景設(shè)計(jì),頁面年輕活潑,通過色彩的疊加,有空間感。
色彩疊加特點(diǎn)二:混合的質(zhì)感
搭配混合模式的運(yùn)用,營造一種空間感,給頁面形成不一樣的質(zhì)感,通過明亮、色相形成一種空間感、層次感、通透,形成不一樣的感覺。
混合質(zhì)感圖標(biāo)中的運(yùn)用
鄰近色色彩搭配作為背景,搭配簡單的圖形和色彩混合和不透明度運(yùn)用,整個(gè)圖形給人一種多彩、通透的視覺感受。
色彩疊加特點(diǎn)三:簡單的幾何圖形
通過簡單的幾何圖形,主要是圓形、正方形、三角形等;加上混合模式的質(zhì)感,給人一種高級感。加上透明度、疊加的光影,簡單的幾何圖形背景呈現(xiàn)出空間感。圖片上通過運(yùn)用一個(gè)單色漸變,搭配方形的重復(fù)色彩疊加,給我的視覺感受是有層次的、立體的空間感。
如圖所示,飽和度高的背景搭配幾何圖形的運(yùn)用,再運(yùn)用顏色不透明的漸變,加上形狀的重復(fù)和變化,使得這個(gè)設(shè)計(jì)給人通透、高級的視覺感受。
幾何圖形在海報(bào)中的運(yùn)用
很多變化豐富的設(shè)計(jì)都是通過簡單的幾何圖形處理的,簡單的幾何圖形也可以作為設(shè)計(jì)的抓手,在暗色背景上,通過幾何圖形的放大,搭配時(shí)尚的混合漸變,這樣的效果很有科技感、洋氣。明亮的色彩搭配塊面感的幾何圖形,這樣的設(shè)計(jì)手法是不是很簡單。
這樣的幾何圖形我們在設(shè)計(jì)網(wǎng)站上經(jīng)??梢钥吹?,通過重復(fù)幾何圖形的組合加上混合模式的疊加,在設(shè)計(jì)上別具一格。同時(shí)讓我們的設(shè)計(jì)多一種表現(xiàn)手法也增加我們的行業(yè)競爭力。
通過鄰近色/互補(bǔ)色搭配,運(yùn)用幾何圖形作為背景裝飾,這樣的配色與布局會(huì)讓設(shè)計(jì)很出彩,并且活潑舒適平和。這樣的設(shè)計(jì)對色彩的搭配要求較高,我們可以通過配色網(wǎng)站進(jìn)行多種組合搭配練習(xí)。示例是菜鳥的首頁,在 banner 入口它運(yùn)用了色彩疊加的設(shè)計(jì)手法,同時(shí)金剛區(qū)的圖標(biāo)也是運(yùn)用了色彩疊加的樣式,整體給人一種年輕、時(shí)尚的感受。色彩疊加還可以運(yùn)用在引導(dǎo)頁、閃屏頁面。通過疊加、柔和的過渡,整體呈現(xiàn)的視覺效果還是很時(shí)尚、符合主流的設(shè)計(jì)趨勢。
明亮的顏色搭配混合模式和不透明度,出現(xiàn)出另外一種效果。
色彩疊加運(yùn)用在icon上居多,飽和度高的色彩加上不透明度的疊加,整體的視覺效果都偏年輕、時(shí)尚,如果你的產(chǎn)品是面向年輕的用戶,這樣的設(shè)計(jì)手法你可以考慮運(yùn)用上哦!這個(gè) app 中,金剛區(qū)位置上采用了色彩疊加的視覺手法,通過簡單的幾何圖形,搭配混合模式,使整個(gè)頁面具有全新的視覺感受,傳遞的是一種年輕時(shí)尚感。
Apple 的今年官方宣傳采用簡單的正方形搭配明亮的色彩,加上不透明度、混合模式的運(yùn)用,達(dá)到不一樣的視覺效果。google 家的品牌升級,我們也看到了最新的趨勢,運(yùn)用 google 經(jīng)典的顏色,搭配混合模式的漸變,同時(shí)具有品牌識別性。
1.選擇深色的顏色(#0A00BC),畫一個(gè)圓角,填充藍(lán)色漸變背景。
2.畫一個(gè)圓,填充紅色的漸變,模式選擇提亮的效果,剪貼蒙板在圓角背景上。
3.畫第二個(gè)大圓,填充紅色的漸變,模式選擇提亮,透明度調(diào)到70%,剪貼蒙板在圓角背景上。
4.畫第三個(gè)圓,填充紅色-黃色的漸變,模式選擇正常,透明度調(diào)到85%,剪貼蒙板在圓角背景上
5.畫第四個(gè)圓,填充藍(lán)色的漸變,模式選擇提亮,透明度調(diào)到90%(可以自己試著調(diào)整),剪貼蒙板在圓角背景上。6.我們看到示例圖交叉處是黃色漸變,把第三個(gè)和四個(gè)圓進(jìn)行復(fù)制,選擇交集,生成一個(gè)交叉的圖形,把這個(gè)交叉的圖形改為黃色漸變,模式改為加暗。
7.最后一步,右下角的高亮,通過藍(lán)色徑向漸變,調(diào)整到我們滿意的效果即可,模式選擇變亮,透明度90%。
8.加上文字效果,這個(gè)圖標(biāo)就完成了,是不是很簡單,通過不同模式的疊加,出現(xiàn)不同的效果,你也快點(diǎn)試一下吧!
色彩疊加這種設(shè)計(jì)手法經(jīng)常出現(xiàn)在海報(bào)/icon。包括 apple 在品牌宣傳上也運(yùn)用了這種視覺手法,重復(fù)運(yùn)用簡單的幾何圖形,加上混合模式的疊加,構(gòu)成頁面色彩空間感、通透;視覺感受上也有沖擊力。我們做設(shè)計(jì)的也知道往往具有高級感的設(shè)計(jì)就是通過簡單的幾何圖形加上色彩的混合漸變,也會(huì)讓我們的設(shè)計(jì)具有層次感、簡約。