首页 > 万博娱乐平台注册 > 详细内容

平面设计和网站设计配色方案技巧指南

来源:万博在线娱乐注册 时间:2017-11-01

当你在设计网站时,采用的色彩会传达出一模一样的思惟和情绪,所以为你的品牌选择合适的色彩异样的主要。比方,如果你给美国的顶级沙滩设计网站,和你创造一个像groppon一样的在线商城,你肯定会用差别的配色设计它们,由于它们传达的是不同的信息——一个网站传达的是让人心境抓紧,而另一网站传达的是由于做了一次异样棒的交易而让心跳减速兴奋。

对比是网页设计的永远话题。对比度是页面上的两个工具之间的清晰水平。最值得留心的包括段落、链接和标题文本。如果文本和背景色彩之间不充足的对比,那么文字就很难阅读(太亮或太暗)。

思考一下,图标或占有行动召唤能力的按钮,在设计中所需要的对比度级别。协调的高对比度元素,天然能引起人们地存眷。当某个按钮或许注册地区需要更多的存眷,高对比度每每是一个很好的处理方案。色彩如果运用得当,能发生均衡的对比。

除了令人称奇的配色生产器,也有一些其它工具,值得保存以供未来参考。我以为这些工具和资源,对数码设计,比方如图形或网站设计最有赞助。但你应该从中精选那些最有利于你的工作流的资源。

然而,当涉及到数字设计,有很多其它网站,你可以前往学习。一个在线工具check my colours,可以将任何网站拉出去,检查文本和背景色彩之间的对比度。这是一个优质的资源,用来测试其它网站以及你自己的设计。

饱和度(或纯度)与一个色彩的纯度和娇艳度相干。可以把饱和度当作是色彩的强与弱、浊与清。大多数人辨认饱和度就是经由过程对比香蕉黄和粉笔黄的差别。粉笔色更为“发白”,好像缺少娇艳度,由于它的饱和度更低。从下图的munsell color system(孟塞尔色彩系统)图表中,可以失掉更好的懂得:

从艺术的角度来摸索色彩,它可以使主题愈加鲜明。这就是一张绘图和一幅绘画主要的差别,只管它们能传达相似的信息。这个情理实用于任何设计包括网页设计。

一个精良的开端是色相(hue)、饱和度(saturation)、明度(value)(或hsv)。你可能懂得这些测量色彩的术语,然而我想告诉你这些值确实异样主要。明度是你在黑白照片上失掉的信息——就是差别色度的灰色。把一个网站截图,将它转换为灰度图,你就会看到它的原始值。

纯黑色与其它色彩比拟,反差异样大。这一点让我很苦恼,但即使是一点踊跃的差别,仍是有差别的,所以我的建议是防止运用#000。

大多数色彩实际文章探讨的观点是,每种色彩当面的思惟和它们表现出的情绪。我以为情感的话题太客观,虽然它是精确的。选择一个配色方案,不仅仅是凭情绪,相反,我要研究色彩是如何工作的,以及如何开端自己训练。

另一种选择是colrd,它从图片照片和其它图形中提取色彩。这是一个奇怪的web运用次序,由于它不一定总在网页设计领域颇有助益。但你可以经由过程研究图片,和它们相干的色彩学习到很多。正常来说,天然总是精确的,所以如果你认真观察生活和照中,你会从中失掉配色的新思路。

为了实际这一观点,只管防止在较亮的背景上运用#000。取而代之,选择一个暗灰色,可能是混合色(深蓝色,深绿色,深橙色等)。我老是以为,在白色背景上的深灰色文字,比纯黑色文字的可读性高出10倍。

有了合适的扩大,全部这些浏览器都可以转换为色彩的资源,而不需要开启另一个次序。

四色式(矩形搭配)是最难以折衷的,均衡的适当会使画面显得绚丽多彩。这种配色方案利用两对互补色,它们之间隔两个色格,这四种色彩在色环上的连线造成一个矩形。在设计过程中若让一个色彩成为主色,效果会愈加,同时要留心冷暖色的均衡。我不建议在一开端就采用这种配色方案,由于如果不教训,很难去控制它。然而它在较大的设计中运用会显得异样漂亮,所以它值得被牢记。

因而,当在斟酌色彩时,记取,色彩很少用来做页面的结构的划分和搭建。你应该用灰色来构建一个规划,就可以让人懂得到界面的整体结构关联。拜访者在阅读网站界面时,色彩可以带给拜访者愈加丰硕的信息内容。

如果你是一个opera的用户,可以找到一个名叫color picker的扩大运用。你会发明它与photoshop里的界面风格雷同。

这个例子是一个风趣的比较关联,同样还要留心差别部分滚动时,色彩关联的变更。在色彩实际的世界里,最好的效果是绝对的。

这就是说,明度是明暗水平,表现色彩的明与暗,也被称作亮度。色相是最基本的色彩术语,平日用来权衡现实的色彩,如蓝色、红色或黄色。色相是相称简略的,你可以经由过程记传统的色轮来记取它的法则。

网站barcamp omaha 2014 在持续滚动的页面地区,采用了大量差别的色彩。最突出的一点是,文本设计很好地融入到每一个背景部分。页面上对比度最大的,每每是图形或按钮。你可以在全部网站中都看到这种效果。

看duplos的网页,你可以看到一些色彩差别的对话气泡,运用雷同的白色文字。由于背景色彩够深,文字在各种色彩背景下都可读。这种不是纯真的基于文本的界面,值得我们在设计中去学习寻求。

paletton是我个人最喜好的,由于它提供了一系列基于调整饱和度的绝对色。它还提供了基于你所选择的色彩,雷同的色彩规模的预设方案。最主要的是,它是完整免费的!

最安全的选择是一直退回到一个明暗标准——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上愈加明显,反之亦然。然而,一些色彩经常发生一种不协调的效果,如红色和绿色。这种对比在某些情形下是精美的艺术, 但不是任何情形下。在规划当中,如果碰到色彩丰硕的处所,在给链接和按钮用色时要异样小心。

邻近色在色轮上紧邻相互。很显然如许的配色方案不会发生高对比度。但在设计图形、banner、纹理或许背景,这些需要匹配全部网页色系的元素时,这是异样实用的。毕竟在总体规划上,并非全部都应该是需要高对比度。

迩来我发明了ian storm taylor写的一篇文章, ,标题叫做《不要运用黑色》。它指出,经由过程防止在界面上运用纯黑色,能更其实地反应现实世界。这可能是一个有偏见的说法,不外近些年来,我发明这是一个极好的建议。

互补色是色轮上绝对的两个色彩,它们之间的色彩对比异样激烈。比方,紫色按钮在黄色背景上异样的突出,由于它们是高对比度的配色。虽然,这还取决于每一种色彩的饱和度,经由过程实际来懂得是最好的。请记取:对峙对比!

入门色彩实际,最简略的方法可能是从一个单一的色彩开端着手,并运用在线指点工具。不人与生俱来就懂得色彩的选择。但随着一直的反复,它就变成了你的第二天性。

在线web运用,如paletton是晚期的方案设计中必不可少的。你输入一个单色,然后选择你喜好的(邻近色,三色式,四色式等)匹配方案。每种配色方案允许额外弥补一个,与你选择的色彩相反的色彩。

这个图是值得我们去懂得的,由于色彩都是绝对的。所以,一个“冷”色,像蓝色用在淡色中就不那么冷了,同样的“暖”色,在暗色中也就不那么暖了。色彩系统是一个奇怪的话题,由于它经常与其它色彩相互作用。如许听起来好像是不意思的,但你可以把它作为学习的例子,在现实的项目中一直训练。

将色彩添加到设计中使画面的抒发愈加丰硕。图形、字体、按钮和超链接,全部都可以在某种水平上匹配总体的基调。比方,葡萄园网站的色彩和水族馆网站的色彩是差别的。为什么呢?由于这是两种完整差别典范的网站,它们试图传达差别意思、目的或许情感给自己的目的受众。

当谈到提炼自己的配色方案,我激烈建议选择这两个中的一个。它们都是基于web的免费工具,并提供充足的功能,让你开端结构可憎和丰富多彩的项目。

当选择一个配色方案时,你有很多差别的情势可以遵守。虽然不是每个人都懂得如何选择色彩,幸好网络上有很多方便的资源,来赞助我们完成这个义务。我以为这些色彩折衷的网页做的很精彩,然而让我们探讨一些更风趣的选择吧。

本指南探索的主题是对网站和平面设计的色彩。学习进步的色彩实际最好的方法,是经由过程实际,而不是实际。然而为了进步,你必须有一个起点。除了有效的配色技巧和观点,你还可以发明很多宝贵的资源散落在整篇文章中。

三色式是在色轮上等距隔开三个独立的色彩,三种色彩在色轮上要呈正三角散布。当要摆弄这种配色方案时,一定要选出一种色彩作为主色,其他两种作为帮助色,均衡色彩,决议它们应该如何融入整体规划。饱和度在此中表演主要的脚色,然而整体的配色方案仍然不会因此发生大的变更。

从美学界失掉一些建议,就是防止纯黑色。当你看到现实生活中的物体,你简直看不到纯黑色。现实看起来很暗,但它的hex色值(十六进制)不太可能是#000。你乃至可以实验拍摄照片,并在photoshop中测试它的hex色值。

如果你正在寻找预建的配色方案,有很多可用的网站。一种选择是colorschemer,它有大量的附加功能,如移动运用次序和桌面软件。但该网站本身是免费的,并提供了用户生成的一个大型的配色方案展示库。

iforex water 是一个视差网站,展示有关水资源消费的信息。不像我最后一个例子,此网站在每一屏都运用雷同的色彩,然而背景在一直变更。然而由于色彩都是深色,它们仍然可以作为背景畸形工作。

结果以表格情势列出来,说明了每个页面元素,在对比度和亮度方面的差别。这虽然也不是完美的,但它确实为新的设计师,提供一个精良的开端。

我喜好用具体实例来说明色彩的选择,而不是列一堆网站。这些例子可能不是色彩匹配的绝对典范,但它们确实为网页设计师提供了一个牢靠的学习教训。

但你会发明全部规划,还有其它的高亮色彩。橙色和浅蓝色的出现异样突出,与暗色背景造成对比。要记取在选择一个配色方案时,运用2个或3个差别的色彩,由于如许很可能会设计出一个异样棒的网站。

我们大多数人都知晓adobe产品中有拾色器,如photoshop或许illustrator。这是一个迫切需要的工具,由于它提供全部色谱,以及一个rgb和hex值。但当初大多数web浏览器插件,可以复制一个相似的色彩选择器。

选择配色方案的时间,会在启动一个web项目并网络设法(线框图,草图,页面元素)之后。这可能发生在设计一个简略的模型之前或许之后,但方法仍然是雷同的。只需选择一种色彩,可以与基于内容、情势、风格或情绪的规划很好地工作。

chroma是谷歌chrome浏览器为设计师和色彩爱好者,提供的一个免费扩大运用。它有一个正方形和圆形的色彩选择器,以及很广泛的差别明度的配色工具。 mozilla firefox浏览器有一个相似的扩大运用,叫做colorzilla,它有吸管功能,可以从网页选择色彩,并显示它的rgb及hex色值。

另一个盛行的选择是adobe color,它有异样相似的设置,但界面有些复杂。你仍然需要基于输入一个单色,来选择配色方案。不外adobe color运用色轮展示匹配的颜,每一种色彩是灵巧的,易于移动的,在保持色彩情势一致性之内。

决裂互补色异样像前面的互补色方案,但轻微有些变更。该配色方案是从色轮上的一个点开端,搭配与它绝对的两个相邻色,运用邻近色来取代互补色中的一个。决裂互补色的对比仍然异样激烈,但它并不会像互补色搭配那样刺目,使人感到不舒畅,它给色彩的选择提供了一点回旋余地。

虽然这种风格可能并非实用于每个站点,但他它却是混色的一个很好的例子。页面很轻易阅读,但并不以为对比度太强。找到一个甜蜜均衡的色彩是一个设计师的最终义务。

digimurai是一个更简略但典范的网站。不言而喻,网站的设计规划主要会合在暗蓝色的色彩中。这给人的印象是,蓝色占主导位置,并控制了大部分的设计。

最后,我生气这个指南能提供牢靠的起点给列位数字艺术家和网页设计师。色彩实际异样像音乐实际,此中主要的原理是经由过程实际获悉,而不是传统的实际分析。然而在起步阶段,可能会感到有些困难,等你积聚了相称一部分资源和实际基础之后会感到越来越顺畅。

如果你真的想懂得配色方案的选择,那么就要保持训练。刚开端的期望值不要太高,由于很有可能你在初始阶段的实际结果不会很成功,然而随着时间的推移,你会做得越来越好。

案例资讯
case
热点新闻
news