网页设计中的实用配色技巧

发布时间:2020-06-07 08:38:00

网页的视觉层次主要由形式(或布局)、颜色、图片和文本信息组成。设计师通常更注重形式,因为视觉冲击、设计差异或创新大多依赖于形式的呈现,而色彩主要影响整体感知、设计质量和受众情绪。在许多情况下,我们设计了一个好的形式,但未能使这是一个遗憾的手稿,其应有的质量?

网页的视觉层次主要由形式(或布局)、颜色、图片和文本信息组成。设计师通常更注重形式,因为视觉冲击、设计差异或创新大多依赖于形式的呈现,而色彩主要影响整体感知、设计质量和受众情绪。在许多情况下,我们设计了一个好的形式,但未能使这是一个遗憾的手稿,其应有的质量?

形式需要思考和创造,图片资料需要学习和加工,文字需要整理和整理。但网络色彩是否需要自然的色彩感、丰富的理论和多年的经验才能自由操作呢?

网络上关于网页颜色匹配的文章很多,有的甚至泛滥。对其稍加关注的学生应了解“色轮”、“色卡”等辅助配色工具。但它们更多的是从彩色系统扩展到印刷介质上,这并不完全适用于网页,甚至造成很大的局限性。例如,你真的通过色轮选择网页颜色吗?例如,通过下面提供的颜色组合,您可以自由地响应相同类型的web设计要求吗?

由于CMYK和RGB颜色模式的不同,网页上呈现的颜色数量很大,选择应该更加自由。然而,在色彩搭配中,往往存在设计作品脏、灰色设计、花哨设计等大问题,需要解决。

网页的颜色不应超过三种

是的,但更重要的是色调(红橙色,黄绿色,蓝蓝色和紫色)。

色调有明显的差异,所以很容易选择主色调。常见的方法有对比色、邻接色、冷暖互补色,可以简单设置,也可以直接借鉴成功作品中的主辅色比例,如常见的朱红色点缀深蓝、明黄色点缀深绿等。

但总的来说,我们需要在设计要求中面对更多的色彩分布问题:

(由于我从事游戏网页的可视化设计,案例以游戏网页为例,其他网页类型可以扩展思考或仅供参考。)

如上所示,根据网页信息量的大小,对颜色区域的层次划分和文本信息的层次划分将有更高的要求。然后,在网页“不超过三种颜色(相位)”的原则下,我们只能找到更多相同颜色系统的颜色来改进设计,也就是说,我们可以做关于“饱和度”和“亮度”的文章。

这就是本文要解决的“自然”配色技术:重叠软配色。

折叠式软配色技巧分享(以下为文字,胡说八道)

这个方法很简单。它不需要知道三角函数、四次运算、颜色索引和直方图,甚至不需要知道色阶曲线和亮度,甚至可以没有颜色感。

只需要理解三个关键词:叠加、柔和光和透明(填充)。

如果你不知道这三个关键词,记住它们在哪里(如下):

注意:透明度与填充略有不同,填充不影响混合选项,而透明度应用于整个层。

顺便说一下,花几分钟时间来学习这种配色技术的工作原理:

即:用纯白色(?ffffff)和纯黑色(?000000)通过“叠加”和“柔和光”的混合模式(效果类似于调节饱和度和亮度)得到任何颜色上最匹配的颜色(然后通过调节透明度来选择最合适的辅助色)。

(在上面的例子中,在fold/soft模式下调整黑白色块的不同透明度(以10%到100%的整数值为例),得到40种有明显差异的不同颜色。通过这项技术,理论上,每种颜色都可以很容易地得到无尽的“自然色”,而且是“0错误”!)

由于叠加和柔光模式对图像的最突出部分和最阴影部分没有调整,所以颜色匹配方法对纯黑色和纯白色没有影响。

设计论证:

不,只要理解上面的方法,你就可以忘记图表,在你的设计工作中自由发挥!

两个简单步骤:

① 黑白渐变(可以是点、线、面甚至字体)

② 调整透明度(1%-100%随意,省心的方法是直接键入一个整数值,如:20%-40%为感光页,60%或以上为重感光页)

无论你使用哪种主色,都可以通过添加黑白或柔和的灯光,轻松获得完美的配色系统

这不仅适用于色域的划分或几种辅助颜色的提取,如下图所示:字体颜色、细节线、按钮渐变、角点高亮、笔划阴影都可以使用黑白肆意挥洒!

如果此方法应用于按钮

通过“阴影、外部光、跟踪边(不适用于柔性方法)、内部阴影和内部光”的混合选项,可以自由描绘5层像素级细节(当然,实际使用中通常描绘1到3层)。

无论形状和颜色如何变化,这些细节都会随着形状和颜色的变化而变化。重新调整细节或盲目选择颜色可以节省很多时间!


17742004931 联系我们,谈您的需求

立即咨询 立即建站