什么是色彩叠加？

 色彩叠加特点一：邻近/互补色搭配 

在色相环上采用邻近色搭配，颜色多以明亮的高饱和度为主，使得页面更具时尚活泼感。

混合质感图标中的运用

通过简单的几何图形，主要是圆形、正方形、三角形等；加上混合模式的质感，给人一种高级感。加上透明度、叠加的光影，简单的几何图形背景呈现出空间感。图片上通过运用一个单色渐变，搭配方形的重复色彩叠加，给我的视觉感受是有层次的、立体的空间感。

很多变化丰富的设计都是通过简单的几何图形处理的，简单的几何图形也可以作为设计的抓手，在暗色背景上，通过几何图形的放大，搭配时尚的混合渐变，这样的效果很有科技感、洋气。

这样的几何图形我们在设计网站上经常可以看到，通过重复几何图形的组合加上混合模式的叠加，在设计上别具一格。同时让我们的设计多一种表现手法也增加我们的行业竞争力。

通过邻近色/互补色搭配，运用几何图形作为背景装饰，这样的配色与布局会让设计很出彩，并且活泼舒适平和。这样的设计对色彩的搭配要求较高，我们可以通过配色网站进行多种组合搭配练习。

示例是菜鸟的首页，在 banner 入口它运用了色彩叠加的设计手法，同时金刚区的图标也是运用了色彩叠加的样式，整体给人一种年轻、时尚的感受。色彩叠加还可以运用在引导页、闪屏页面。通过叠加、柔和的过渡，整体呈现的视觉效果还是很时尚、符合主流的设计趋势。

 

色彩叠加在icon上的运用 

明亮的颜色搭配混合模式和不透明度，出现出另外一种效果。

色彩叠加运用在icon上居多，饱和度高的色彩加上不透明度的叠加，整体的视觉效果都偏年轻、时尚，如果你的产品是面向年轻的用户，这样的设计手法你可以考虑运用上哦！

Apple 的今年官方宣传采用简单的正方形搭配明亮的色彩，加上不透明度、混合模式的运用，达到不一样的视觉效果。google 家的品牌升级，我们也看到了最新的趋势，运用 google 经典的颜色，搭配混合模式的渐变，同时具有品牌识别性。

 

色彩叠加-设计小教程 

1.选择深色的颜色（#0A00BC），画一个圆角，填充蓝色渐变背景。

2.画一个圆，填充红色的渐变，模式选择提亮的效果，剪贴蒙板在圆角背景上。

3.画第二个大圆，填充红色的渐变，模式选择提亮，透明度调到70%，剪贴蒙板在圆角背景上。

4.画第三个圆，填充红色-黄色的渐变，模式选择正常，透明度调到85%，剪贴蒙板在圆角背景上

5.画第四个圆，填充蓝色的渐变，模式选择提亮，透明度调到90%（可以自己试着调整），剪贴蒙板在圆角背景上。6.我们看到示例图交叉处是黄色渐变，把第三个和四个圆进行复制，选择交集，生成一个交叉的图形，把这个交叉的图形改为黄色渐变，模式改为加暗。

7.最后一步，右下角的高亮，通过蓝色径向渐变，调整到我们满意的效果即可，模式选择变亮，透明度90%。

8.加上文字效果，这个图标就完成了，是不是很简单，通过不同模式的叠加，出现不同的效果，你也快点试一下吧！

 

最后