为网页设计创建有效的配色方案

2016-02-17 03:02 7 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - 平面设计 】

网页设计吸引人的地方在哪里?是图片还是对内容的布局?或者说是网站的内容决定了网站的价值。所有这些因素都会发挥其作用,但正是配色方案决定了设计是否出彩。有经验的专业人士会告诉你很多诀窍,比如说,一种配色方案可能适合一种设计,但未必适合于另一种;配色方案选择应该在布局内容之前还是之后?今天我们就要找到这些问题的答案,本文中,你也能找到很多免费资源供你选择配色方案。

请注意:这个话题内容很广,单这样一篇小文章是无法涵盖所有内容的。因此,我提供了相关资源的链接,以备你在学习本文时借鉴,这是个不错的选择。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

对色彩组合的介绍

选择色彩组合方法有多种。让我们快速地浏览下它们。

为网页设计创建有效的配色方案,PS教程,图老师教程网

单色(法):这是我最喜欢的方法,它有一个单独的颜色打底,我们只需要调整其色度并着手设计即可。单一色彩看起来典雅漂亮,且容易将纯色融合在内。但是要通过单一色彩组合来创建吸引眼球的设计却不是一件容易事。

色彩补充法:一个冷色系和一暖色系的色彩相搭。例如,你的标题是暗黑色的,但内容可以是白色的。这也是网站设计使用最多的方法。

三色组合法:顾名思义,该方法使用色轮中等色度距离的三种色彩搭配。(色轮如上图所示)

四色组合法:与三色组合相同,四色组合法使用了四种色彩搭配。(上图显示为四色组合法的搭配图)

模拟法:模拟法是我第二喜欢的设计风格。这种方法借用了色轮中的邻近的三个色彩,比如说,紫色、红色和橙色。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

这些是最基本的配色方案方法。设计师也能设计其它的配色法,如果你有一定经验的话,也可以设计自己的方法。对设计师而言,熟能生巧。

颜色及其适用性

为网页设计创建有效的配色方案,PS教程,图老师教程网

 

正如你知道的,每种颜色都带有一种情感色彩,你可以通过上面紫色的图例来体会。与柔美主题相关的网站通常使用红色,因为红色代表激情。如果你想了解更多色彩及其适用性,可以参看这个信息图《网页设计师的色彩心理学》,以了解相关信息。由于模板布局也带有一定色彩,这就解释了为何一种颜色只适用于一个设计模板,而不适应与另外的模板。当你改变配色方案时,它就与模板的整体感觉不搭。举个例子,如果你设计了一个页面,该页面鲜明的图像边界点鲜明就象征着力量,这种页面适用于健身房一类的网站;如果你把配色方案设计为粉色和紫色,那这个模板就泡汤了。

布局和配色方案

为网页设计创建有效的配色方案,PS教程,图老师教程网

现在问题来了,我们应该在设计之前还是之后选择配色方案呢?根据客户的需求,你会得到一些配色建议,最好的选择就让客户做决定。

如果客户选定了最基本的配色方案,你在设计时就不会感到困惑。这样,你的设计色彩迎合了客户的喜好,客户很可能会对你的工作满意。

因此,在设计布局之要前决定色彩方案,这种方法适合我。我认为你也该试试这一技巧。

结论

无论何时接到客户,你要根据客户业务的性质罗列一些适当的色彩。询问客户最喜欢的色彩,并依此他们的喜好来设计布局。

来源:https://www.tulaoshi.com/n/20160217/1577889.html

延伸阅读
颜色的使用在网页制作中起着非常关键的作用,有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说,往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外,笔者认为多学习一些著名网站的用色方法,对于我们制作美丽的网页可以起到事半功倍的作用。所以,笔者总结了一些著名网站的颜色搭配...
标签: Web开发
在实用美术中,常有"远看色彩近看花,先看颜色后看花,七分颜色三分花"的说法。 这也就说明,在任何设计中,色彩对视觉的刺激起到第一信息传达的作用。因此,对色彩的基础知识的良好掌控,在网页设计中才能做到游刃有余。 为了使下面的网页配色分析更易于理解,我们先来了解 色彩的RGB模式和HSB模式 。 RGB是表示红色绿色蓝色又称...
扁平化设计从2012年开始就已经流行起来,我觉得flat design有点类似极简主义设计,同样是追求简洁、简约,不同的是,扁平化设计是一项运用简单效果,或者是刻意进行一个不使用三维效果的设计方案。一个好的扁平化设计必然不可能出现阴影、浮雕和渐变等效果。 扁平化设计看上去非常简单、直观,并且使用方便,所以在手机界面和网页设计中变得越...
之前发布过一篇文章《浅谈如何使用软件从零开始,高效高质设计一个完整的配色方案》,那篇文章主要是分享了一个傻瓜式的配色方案制作方法,但是没有实际运用的例子,让很多朋友都不了解具体怎么运用。 为了提高自己的实际运用能力,也为了能和大家一起分享学习交流,共同进步,欢迎大家指出优缺,扬长补短,提高实际操作能力喔~ 这次专门写...

经验教程

535

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部