什么是色彩疊加？

 色彩疊加特點(diǎn)一：鄰近/互補(bǔ)色搭配 

在色相環(huán)上采用鄰近色搭配，顏色多以明亮的高飽和度為主，使得頁面更具時(shí)尚活潑感。

混合質(zhì)感圖標(biāo)中的運(yùn)用

通過簡(jiǎn)單的幾何圖形，主要是圓形、正方形、三角形等；加上混合模式的質(zhì)感，給人一種高級(jí)感。加上透明度、疊加的光影，簡(jiǎn)單的幾何圖形背景呈現(xiàn)出空間感。圖片上通過運(yùn)用一個(gè)單色漸變，搭配方形的重復(fù)色彩疊加，給我的視覺感受是有層次的、立體的空間感。

很多變化豐富的設(shè)計(jì)都是通過簡(jiǎn)單的幾何圖形處理的，簡(jiǎn)單的幾何圖形也可以作為設(shè)計(jì)的抓手，在暗色背景上，通過幾何圖形的放大，搭配時(shí)尚的混合漸變，這樣的效果很有科技感、洋氣。

這樣的幾何圖形我們?cè)谠O(shè)計(jì)網(wǎng)站上經(jīng)?？梢钥吹?，通過重復(fù)幾何圖形的組合加上混合模式的疊加，在設(shè)計(jì)上別具一格。同時(shí)讓我們的設(shè)計(jì)多一種表現(xiàn)手法也增加我們的行業(yè)競(jìng)爭(zhēng)力。

通過鄰近色/互補(bǔ)色搭配，運(yùn)用幾何圖形作為背景裝飾，這樣的配色與布局會(huì)讓設(shè)計(jì)很出彩，并且活潑舒適平和。這樣的設(shè)計(jì)對(duì)色彩的搭配要求較高，我們可以通過配色網(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ì)趨勢(shì)。

 

色彩疊加在icon上的運(yùn)用 

明亮的顏色搭配混合模式和不透明度，出現(xiàn)出另外一種效果。

色彩疊加運(yùn)用在icon上居多，飽和度高的色彩加上不透明度的疊加，整體的視覺效果都偏年輕、時(shí)尚，如果你的產(chǎn)品是面向年輕的用戶，這樣的設(shè)計(jì)手法你可以考慮運(yùn)用上哦！

Apple 的今年官方宣傳采用簡(jiǎn)單的正方形搭配明亮的色彩，加上不透明度、混合模式的運(yùn)用，達(dá)到不一樣的視覺效果。google 家的品牌升級(jí)，我們也看到了最新的趨勢(shì)，運(yùn)用 google 經(jīng)典的顏色，搭配混合模式的漸變，同時(shí)具有品牌識(shí)別性。

 

色彩疊加-設(shè)計(jì)小教程 

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)就完成了，是不是很簡(jiǎn)單，通過不同模式的疊加，出現(xiàn)不同的效果，你也快點(diǎn)試一下吧！

 

最后