在网页设计中合理使用色彩叠加效果

时间:2016-12-19 16:22:07点击:13 行业观点

当你进行网页设计的时候,色彩叠加的效果并不是万能的至少不是所有的项目都适合使用的一项效果。应当尽量防止过度使用。

需要注意的问题和值得探究的做法。今天我来深入聊聊这种色彩使用技巧在实际运用中。

使用渐变

渐变作为一种设计趋势,首先。再次回归了当你想为特定的元素叠加色彩的时候,可以尝试使用某个醒目的渐变色叠加上去。

可以使用多种不同的色彩一起构成渐变(比如品牌色)也可以使用某一个色彩进行深浅、明度、饱和度上的渐变,渐变色的好处在于。这样的设计会显得更加集中。明亮的配色方案会更加吸引用户用户,让图片呈现出某种独特的气场。

播放列表中使用了迷幻味十足的双色渐变效果,这种设计趋势很大程度上是Spotifi起的头。让唱片封面和艺术家头像变得更加富于艺术韵味。

搞定这样的设计非常简单:

    选取一张照片

    使用品牌色创建渐变色彩叠加

    完成!

使用纯色定基调

不过纯色相比于渐变所呈现的意义和氛围会更加明确。比方,纯色的叠加效果其实和渐变一样醒目。

功用和效果也是类似的使用这些明亮、鲜艳的流行色的同时,如果你选择当前的流行色。结合扁平化设计或者MateriDesign设计风,页面和UI会明显地呈现出一种现代主义和时尚的感觉。

应当仔细考虑一下色彩的饱和度和透明度。这些因素其实都是有意义的叠加的色彩图层拥有高饱和度和低透明度的时候,当你叠加纯色的时候。用户会更多关注色彩自身;当叠加的色彩拥有低饱和度和高透明度的时候,用户会更容易被底层的图像所吸引。

考虑明暗

许多色彩并不全都是靠有色半透明图层叠加出来的有时候仅仅是使用单纯的黑白灰来叠加,当然。发明出不同的明暗效果,这样也能很好的实现一些效果。

当图像更加沉郁阴暗的时候,正如你所想。压抑繁重的氛围自然而然就出现了而图像偏红色彩变浅的时候,往往会显得更加轻松,或者说更加飘忽。这个时候,并不需要单独叠加黑色或者红色,只需要调整图片自身的明度即可。

设计师在背景上覆盖了一层半透明的红色,上面所显示的这个名为 Callmelsh网站中。让用户的专注点集中到前景的文字上去,但是背景的摄影师微笑的表情依然潜移默化地影响着用户的情绪。色彩和图片的组合让访客不知不觉地同背景的摄影师发生了情绪上的互动,也许很快会打动他雇佣这名摄影师也说不定。

选择高对比度的图片

置于底层的图片或者视频是最重要的组成局部。一张平庸的图片不论你怎么叠加色彩都很难达到惊艳的效果,当你想要在设计项目中使用色彩叠加这种技法的时候。而图片自身如果有着良好的对比度,那么能够在叠加图片之后构成漂亮的明暗效果,将设计的优势最大化。

如果图片的可选范围自身就不大,当然。那么最好尝试使用PS之类的软件先提升图片的对比度,否则实际效果是不会太好的

另外一种方法就更加简单粗暴了从黑白的图片开始着手。对于初学者而言,想要达成好效果的方法有很多。黑白图片的对比度更容易控制。上面的JustAction这个网站就是采用黑白色调的突破背景,搭配黑色的半透明图层。

要么失真,要么自然

有两种处理方法:当你开始使用色彩叠加到图片和视频上的时候。

叠加的色彩应当尽可能微妙,图片尽可能自然。色彩、明暗、阴影都应该处于自然的状态。比如上面那个AbednegoCoffe网站。

发明出独一无二的效果。本文中绝大多数的案例都是这么做的图片完全异化。用完全出乎意料的色彩叠加在图片上。

可以说这两者是完全对立的这么设计的好处在于,介于两者之间的案例很少。用户会更加专注于网站内容,强化整体的设计感。

尝试局部叠加

但是这并不是唯一的选择。局部叠加同样可以带来不错的效果。

其上叠加了半透明层,KnotCloth这个网页采用了绿色的导航栏。看起来效果相当不错。

当光标悬停在特定的内容区块上的时候,而NutandWood这个网站则换了一种玩法。半透明层就叠加到上面,提示用户这些内容是可点击的这个半透明的叠加层作为视觉线索而存在提供内容浏览的路径。

结论

色彩几乎是所有网页设计中都至关重要的组成部分,无论是明亮大胆的配色方案,还是简约的黑白色调,因此你的用色将会直接影响整个设计的实际效果,一定要注意色彩的使用技巧。

点击次数:  更新时间:2016-12-19 16:22:07  【打印此页】  【关闭