如何在你的网页设计中使用正确的颜色叠加

在网页设计中，颜色几乎是任何设计的重要组成部分。无论你是那些明亮，大胆色调的“忠粉”，还是喜欢更简约的黑色和白色，你所使用的颜色可以对整体设计产生很大的影响。

颜色叠加的作用之一在于，你可以在你的网页设计中使用颜色进行强调声明。这意味着你可以使用半带有透明度的颜色块来覆盖图片或视频。这种效果可以增加图像的意义，使其在整体的设计中引起更多的关注，并帮助你在大部分有限的艺术中做出选择。

1.尝试使用渐变色

渐变又逐渐成为流行趋势之一。当你想使用颜色叠加层时，渐变会创造一个非常好的（醒目的）视觉效果。

关于渐变的特别好处在于，你可以使用几种不同的颜色来搭配工作（这点需要全面综合的考虑你的品牌）或使用单一颜色创建焦点。明亮的配对可以帮助吸引用户进入到你的网站设计中，给图像制造一些闪光点。

这个趋势很大一部分可以追溯到Spotify网站，它最先开始使用渐变和双色覆盖来突出播放列表。颜色使用户用于显示的封面图（音乐家的介绍图）提供了新的活力。

这是一个很容易复制的概念：

· 选择一张照片；

· 使用你的品牌色创建一个颜色渐变；

· 享受他给你的网页设计以及你自己带来的乐趣。

2.使用纯色来设置你的“主调”

纯色覆盖层可以像梯度图案一样醒目，但通常，颜色的选择具有更多不同意义的关联性。例如，考虑一个棕褐色叠加，它能够立即引起旧时代和历史的感觉。

同样的原理可以用在使用那些流行趋势色上面。通过使用与平面或材料设计相关的明亮，饱和的颜色，你可以唤起现代主义或高级时装的感觉。

当使用单一颜色作为颜色叠加的覆盖层时，请一定要考虑颜色的饱和度和透明度。这些元素同样可以添加不同意义。更重的颜色组（更少的透明度和更饱和度）比起它背后的图像，更多的关注点在于颜色本身上。相反，更轻，更细微的颜色组合更加专注于图像上。

3.考虑暗色或亮色

你不必总是使用那些多彩的颜色本身来创建叠加层。有时它也可以是黑色，白色或灰色的。使用这些色调和主题可以真正改变你网站设计的整体“情绪”。

正如你可能关联想到的，颜色更深的覆盖层可以创建一个更弄厚的情绪环境。亮色叠加与乐趣之间有一种独特的相关联。这里还有一个贡献因素，当我们谈及黑白之间搭配做产生感觉的时候，那就是图像本身。 它是如何与色调或主题协同工作呢？图像、颜色以及消息他们能和谐的在一起产生意想不到的作用吗？

在上面Call me Ish的网站设计中，正如你所看到的，整个网页设计使用白色的覆盖层，以帮助将焦点放在黑白照片上的单词。但请注意摄影师脸上的表情：他笑得很开朗。颜色和照片组合使用形成一种无形的邀请，让你更想与摄影师互动，甚至可能雇用他工作。

4.选择高对比度图像

当你在你的网页设计项目中规划图像叠加时，照片（或视频）的组成方式是极其重要的。一个平淡的图像结果将留给用户一个平淡的颜色叠加感觉。但是，如果你开始使用具有大量对比度的照片，凸显图像的深色和浅色的空间，你将获得最佳的效果。

如果你的图片没有足够的对比度，请考虑在照片编辑软件中添加对比度或选择其他图片。否则，图像在实际中发挥的效果可能会过于平淡。

这里还有一个小窍门，并且实现这种效果是从一张黑白照片开始的。特别是对于初学者，在黑白图像中可以更容易地看到增强对比度将给图像带来怎么样的变化。Just Actions提供了一个在黑白色图像旁边添加彩色叠加的一个很好的例子（通过添加叠色，是的原本没有黑白的，没有鲜艳对比度的配图产生一种极具吸引力的效果）。

5.图片应该看起来自然（或相反）

当涉及到使用颜色叠加时，你有两个选择：

    a.添加叠色效果以后，图片应该仍然看起来自然。颜色、光照和阴影应该出现在自然的位置。叠加应该呈现的微妙一些，而不是过于强烈，如上面的Abednego Coffee网站设计。

    b.添加叠色效果以后，使得图像看起来完全改变。但是这种方式的最好方法是你要尽量不要让用户猜到你在图像上面使用了颜色叠加（例如本文中的大多数示例）。

这里没有真正的中间地带。如果你在图像上使用的不属于这些“极端”方式之一，用户可能会偏向对颜色太过认真，而不会专注于网站的内容。你不会想用彩色叠加技术来分散注意力的，相反，它应该增强整体网页设计。

6.尝试叠加强调口号

虽然前面的例子显示了对大图像使用颜色叠加的方法，例如在banner图上添加，但这并不是唯一充分利用这种技术的方法。颜色叠加效果也可以很好地使用在强调口号性的文案上。

上面的两个例子显示了有效地实现这些的不同方式。

在上面的例子中，Knot Clothing的网站设计使用明亮的绿色的，并带有透明度的导航栏。它进一步突出了在它之上的所有实线。这种效果有助于在整个网页设计中保持统一的品牌调色板，同时展示各种其他颜色。简单的效果，有助于页面看起来更柔软，比导航在一个纯色内，并且向下浏览，全部网页设计一览无余以及平淡来说，更具质感和设计感。

Nuts and Woods的网站设计则采取另一种方法。该设计使用颜色叠加层作为悬停效果，以便用户能更多地了解网站上的特定项目。获取红色叠加层的任何元素也是可点击元素。这个设计值得注意的是，颜色叠加层为用户提供了一个视觉提示，告诉他们他们想要知道什么，并为整个内容提供链接的路径。

总结

当然，使用颜色叠加只是你的设计技巧之一，他可能并不会对任何网站设计都产生效果。多数设计师发现，在他们的一到两个网站设计项目中，也仅仅能够做到在设计过于夸张之前侥幸成功（这种情况下，重音叠加层可能是更好的选择）。

与任何设计的技巧一样，确保只有在最适当的位置中应用它，并且要做好上下设计之间的关联。你不应该只是因为你受到另一个项目的启发，立即决定使用颜色叠加，你可以保存这种想法或概念，并在正确的，合适的位置将其用于你的网页设计中。

----图文来自：design shack 

----由深圳网站建设公司-Clh翻译编辑整理