用户|优漫动游教育超赞的网页色彩叠加效果

颜色几乎是所有设计中的关键部分 , 无论是明快大胆的配色方案 , 还是简单的黑与白的色调 , 你的着色将直接影响到整个设计的实际效果 。 最近两年 , 网页在色彩运用上有很多值得称道的手法 , 其中最有趣、最常见的应该是色彩的叠加 。
将半透明色块(纯色或渐变)叠加在图片或视频上 , 这种效果能够强化图片本身的气氛 , 赋予含义 , 并更好地吸引用户的注意 。 今天让我们一起深入谈谈色彩在网页设计培训班中的使用技巧 , 需要注意的问题和值得探索的实践 。
1、使用渐变 。
渐变设计的潮流又一次回归了 。 如果你想要为一个特定的元素叠加颜色时 , 可以尝试用一些引人注目的渐变颜色叠加 。 渐变颜色的好处是你可以用许多不同的颜色组合成渐变(比如一个品牌色) , 或者用一个颜色在深、明度、饱和度上进行渐变 , 这样的设计就会显得更集中 。 明快的配色方案将更能吸引用户 , 让图片具有一定的气场 。
2、以纯色为基调 。
【用户|优漫动游教育超赞的网页色彩叠加效果】实际上 , 纯颜色的叠加效果和渐变一样引人注目 , 不过与渐变相比 , 纯色的含义和氛围会更加清晰 。 比方说 , 棕色的叠加就能体现出一种历史的厚重 。 在迭加纯色时 , 应该仔细考虑颜色的饱和度和透明度 。 事实上 , 所有这些因素都有意义 。 在重叠颜色图层具有高饱和度和低透明度时 , 用户会更加注重颜色本身;当叠加颜色具有低饱和度和高透明度时 , 用户更容易被底层图像吸引 。

用户|优漫动游教育超赞的网页色彩叠加效果
文章图片
3、考虑到黑暗的情况 。
当然 , 很多颜色并不全是由彩色的半透明图层叠加而成 , 有时只是利用简单的黑白灰叠加 , 创造出不同的明暗效果 , 这样也可以很好地实现某些效果 。 就像你想的那样 , 在画面比较沉闷、黑暗的时候 , 压抑沉重的气氛自然就会出现 , 而图像偏白颜色变浅的时候 , 往往会显得比较轻松 , 或者更飘忽 。 此时 , 无需单独覆盖黑色或白色 , 只需调整图片的亮度即可 。
上图展示的这个名为Callmelsh的网站 , 设计师用半透明的白色覆盖背景 , 让用户的注意力集中于前景的文字 , 但背景的摄影师的微笑仍在潜移默化地影响着使用者的情绪 。 颜色与图片的结合可以使游客在不知不觉中与背景摄影师进行情感上的交流 。
4、选择高对比度图片 。
如果要在设计项目中使用色彩叠加这种技巧 , 放置在底层的图片或视频就是最重要的部分 。 一幅平庸的图片无论你怎样叠加颜色都很难达到令人惊叹的效果 , 而图片本身如果有良好的对比度 , 那么可以在叠加图片后构成美丽的明暗效果 , 将设计的优势最大化 。 当然 , 如果图片本身的可选范围不大 , 那最好先用PS等软件来提高图片的对比度 , 否则效果不会很好 。 有很多方法可以达到很好的效果 , 另外一种方法比较简单粗暴:先从黑白的图片入手 。 对初学者来说 , 黑白图像对比度更容易控制 。 以上是JustActions这个网站使用的背景颜色是黑白色 , 配以半透明的颜色 。
颜色的叠加效应并非无所不能 , 至少并非所有项目都适合的一种效果 , 因此当你在进行设计时 , 应该尽量避免使用过度 。

    经验总结扩展阅读