分享

入门级设计新手须知的配色技巧

 涂鸦吧 2016-12-25

这篇文章的目的是给你一个全面的介绍设计的最深的兔子洞:颜色。 它会把你介绍给最重要的术语和概念开始,帮助你做出更好的决策应用颜色在你的设计。

主题

像往常一样对这些指南,我们要讲一个伟大的交易,包括:

  • 颜色吗?

  • 色调

  • 色彩、阴影和基调

  • 价值

  • 饱和/浓度

  • 色轮

  • 匹配的颜色

  • 单色

  • 类型的颜色

  • 匹配的颜色

  • 强调

  • 颜色的一致性

  • 颜色的含义

  • 颜色相对论

颜色吗?

没有光就没有色,对吗? 实际上没有“黑暗”就没有颜色。 嗯? 我知道,这听起来很奇怪,但没有黑暗的颜色消失。 我们需要知道这样东西当我们为web design-choosing挑选颜色色调,饱和度和价值? 可能不是! 将色彩理论意乱情迷每隔一段时间,让你更有效的网页设计师,因此更好的“传播者”? 绝对的! 在颜色方面,我们都有大量的意见和情绪,但人们往往缺乏一个明确的知道他们是做什么。 有理论基础建立在让你更有效的设计的人。 艺术学校并不是一个地方,大多数人花大量的时间他们的生活,但你不需要花几年弯曲的颜色你的需要。 让我们了解事情的来龙去脉。

选择颜色有很多的注意事项你不会期望。 一点警告,它可以是一个兔子洞你永远不会逃避。 来弥补,我建议首先,你可能会专注于使它有趣的为用户做出合理有效的选择,支持你的设计。 这似乎是一个可控的目标颜色的新手。 我知道这听起来超级肿胀,但主体性不是你可以摆脱在谈到颜色。 假设我们可以同意选择颜色 意义 和创建 感兴趣 是一个很好的起点。

颜色可以是一个非常强大的“武器”在艺术或创造性arsenal-if产生适当的课程。 我们的网页设计,颜色通常是关于情感和视觉冲击。 如果正确使用,颜色可以引导观众最重要的和添加强调如果你别过头了。 我想这是公平地说,这可能是最重要的事情在使用web项目的颜色。 第二个问题是,您可以建立一个特定的情绪,情绪影响,品牌进一步的想法。 实际上是一个巨大的one-gigantic这整个主题。 我们将关注最重要的方面和术语来让你开始。

色调

色调是任何颜色在色轮上。

入门级设计新手须知的配色技巧

很多时候,当人们谈论颜色,他们实际上是谈论hues-which是基本,“纯”颜色,可见光谱内任何颜色。 健康人眼可以看到2.3米色调;吨变异的红色,蓝色,绿色等等。

为我们的工作与颜色设计,他们代表的起点,就像原始的或最原始的版本。 在我们的设计中,建议留下这些避免业余或幼稚的。 你有没有注意到漫画对孩子喜欢用这些颜色的字符吗? 我猜不是一个大惊喜。 你可以利用这个当然如果你去一定的审美,但大多数时候,幼稚的不是工作太好。

入门级设计新手须知的配色技巧

特使的护照 使用这种扭曲的、好玩的风格的优势。 你可以看到非常平坦,纯洁的颜色。 但是他们使用这种风格来传达一种印象或一个想法,难以描述对孩子没有模仿的艺术作品。

色彩、阴影和基调

没有色彩和色调的分寸意味着他们缺乏任何增加的白色或黑色。 这就是为什么我们正在谈论起着特定的色调。 色是白色的颜色。 当你把一个颜色和白色你着色。 更多的白色导致增加色相的明度。 添加白色的纯色调减少它 饱和 ,使颜色没那么强烈。

阴影的另一方面是黑色的颜色。 当你把一个颜色和黑色阴影。 这导致一个丰富,通常深,更强烈的颜色由于压倒性的黑色色素的性质。 许多黑人改变色调的特征,甚至通过少量。 因此他们应该谨慎使用。

可以看到在下面的频谱中,中间你会发现纯色调。 向左边,我们添加越来越多的白人通过着色和正确的我们是红色与黑色阴影。

入门级设计新手须知的配色技巧

Tint-Hue-Shade频谱

我们说话的音调混合与灰色色调,这意味着你同时有效的色彩和阴影。 音调可以比原来的浅或深hue-depending白人和黑人的数量增加了。 他们也会出现饱和,激烈的比原来的色调。 音调可以揭示微妙的色调和复杂的品质,更接近交涉我们看到“真实”世界的方式。

入门级设计新手须知的配色技巧

还是从现代艺术博物馆的 艺术方面的行动 系列

价值

值是光明或黑暗的色调。 为专业的结果值是非常重要的。 在某种程度上,他们是更重要的比选择一个正确的色调。 当我们说我们讨论一些颜色是光明或黑暗 价值 色调。 这告诉我们如何关闭它是轻的或黑暗的版本。 规模就像一个灰度值为特定的色彩。

入门级设计新手须知的配色技巧

规模上的部分被称为步骤。 每一个可以清楚地区别被明显比下浅或深。 如果你运用这些值达到更好的色调对比用现实的灯光和阴影。

很多伟大的绘画艺术历史上我们共同欣赏大师是由艺术家们在微妙的色调对比通过正确使用价值的尺度。 他们深度的变化逐步实现价值的变化数量有限的色调。

这个工作不仅与灰色鳞片,但与单色颜色(色调)。 把它作为色调的灯光和阴影。

入门级设计新手须知的配色技巧

清理——西西里海岸 安德烈奥肯博

你可以看到这种规模有效冲淡这幅画。 值不改变当你灰色的颜色。 最轻的灯光和最黑暗的暗色仍然定义一个有效范围产生一个图像不松其艺术品质。

入门级设计新手须知的配色技巧

或认为标志性的黑色和白色的照片过去的五十年左右。 他们通常有一个广泛的步骤在灰度和创建一个更强的,更有趣的contrast-ranging从非常黑暗的黑人非常明亮的白人。 业余爱好者经常得到平坦的黑白图像,因为他们没有意识到需要使他们更加充满活力与更广泛的灰度。

入门级设计新手须知的配色技巧

摘录 Guerrillero Heroico Alberto科达摘录 Guerrillero He

有趣的是,每个颜色都有自己的固有值的范围。 有些人比其他人更大的范围。 红色,例如,有一个有限的范围相比,一个蓝色的色调。 红色是在低灰度范围,很黑暗。 黄色,另一方面,在高幅度。 绿色,紫色和蓝色有最大的范围从黑暗到光明几个步骤。

入门级设计新手须知的配色技巧

我们为什么要关心呢? 价值观是一种有效的方式来呈现一个二维描述任何画布上,让它出现三维使用的相对色调色调。 这就是人们所说的更多 活着 或 充满活力的 ——相对于单调的色彩,无法实现这一效果。 这就是为什么,在一般情况下,使用更多的去饱和色调,纯色调是帮不上什么忙,看起来不成熟。 一个好的技巧是只有一个颜色,为您的网站开发价值尺度。 强调特定的区域可以使用值和其他退去轻轻入background-all同时呆在同一色相。 简单和优雅。

入门级设计新手须知的配色技巧

Netlife研究Netlife研究

饱和/浓度

饱和,也叫 浓度 ,是另一个概念我们不应该忽视。 这是“colorfulness”或色相的纯度。 这些时髦的术语翻译的强度或者辉煌感知颜色。 色度是定义如何纯色调。 当你买颜色绘画,色度的颜色你的管。 相比之下,不饱和的颜色是冲毁或灰色的和经常使用不同程度的阴影颜色。 一个完全不饱和的颜色呈现灰色。

我们通过添加稀释色调 互补 颜色。 所有添加的相反色轮将有效地减小饱和度的色调。 两个颜色,你有你的中性色,棕色或灰色。 重要的是要理解,我们不是添加灰色。 实际上你是创建一个灰色,但不是通过添加黑色或白色。 使用这些灰色画家打破饱和的颜色。

为什么这是一个好主意吗? 答案其实非常实用:你不想轰炸观众以强烈的色彩饱和度everywhere-quite相反。 高度饱和的颜色可以看非常假的和便宜的。 过多,会给你的眼睛几乎没有机会休息,并没有真正关注,更多的视觉干扰。

截图

入门级设计新手须知的配色技巧

当一个网站 UXDESIGNER.TOP ,专注于用户体验,以这种方式错误,它更是难过,看在我看来。 看起来不太好,不是吗? 它有各种各样的问题,但主要颜色混乱并不是一个容易的建立层次结构来引导观众。 糟糕的用户体验!

以蓝色和橙色为例。 挨着他们的行为非常强烈。 如果你把你实现一个灰色基调可以分开他们更饱和的变体。 这个新颜色位置本身之间的高度饱和的版本和创建一个更视觉上赏心悦目的经验通过应用更现实的颜色。 这听起来一样毛茸茸的,它更有活力,更生活。 这将创建一个颜色之间的障碍更成熟的技术。 当你谈论绘画大师,这是他们牢牢掌控的事情之一。

入门级设计新手须知的配色技巧

印象,苏蕾黎凡特 由克劳德。莫奈

在设计上是一个好主意来关注一个或两个颜色,然后创建变体。 这给了你很多选择在同一个颜色。 你改变你的颜色,但呆在同一色调(年代)。 然后帮助锚定你的观众的注意力当只有很少部分选择性的高度饱和。 在上面的图片中,你会发现你的眼睛的参议员真的跳出来。

色轮

我们得到一个色轮通过光的光谱,然后将两端连接到一个圆。 这是一个经典的和有用的工具用于向我们展示颜色之间的关系。 所以如何? 首先,色轮可以告诉你如何创建最大的对比可能为特定的选择。

入门级设计新手须知的配色技巧

歌德的色轮

与其说对称的色轮 科学 但是的表示我们的大脑是如何工作的。 它指向我们如何回应感情上的反应颜色唤醒。 科学,没有相反的颜色的颜色,一个想法在我们的大脑中,或者在我们的概念放在一起组织和区分颜色。 不过这肯定有助于选择颜色。 这些观点不仅是由于我们自己的生物学也非常受到几个世纪的艺术史和各种文化之间有很大的差别。

在这些例子中我们将使用传统的“艺术家”色轮,基于red-yellow-blue(RYB)颜色模型。 这是来自画家如何创建它们的颜色mixtures-via减色法混合。 它主要用于艺术和设计这些天,比科学色彩理论,指的是青色,品红和黄色(c my)作为其主要的颜色。 c my达到一个更大的颜色比RYB模型的子集。

三原色:红、黄、蓝

红、黄、蓝是用于创建所有其他颜色,因此获得的名字 主 。 你不能让他们混合其他颜色。

入门级设计新手须知的配色技巧

这当然是一个好的起点和所有你需要知道的关于原色。 话虽这么说,我还想说,这是在过去许多颜色理论家的假设。 用油漆或墨水在现实中,例如,你只能混合有限范围的颜色不匹配的完整范围健康人眼能感知。 我们这里讨论的是一个完整的子集的颜色,也被称为域。 所以,这里为了一粒盐。

次要的颜色:绿色、橙色、紫色

绿色,橙色,紫色被结合三原色混合。

入门级设计新手须知的配色技巧

在歌德的色轮以上,绿色的基本形式。 这是两个主要的颜色黄色和蓝色的混合。 橙色是黄色和红色的,紫色是红色和蓝色的混合。

对比色

这个想法我们可以更进一步,主要和次要的颜色混合,混合颜色,彼此在方向盘上。

入门级设计新手须知的配色技巧

来源: 维基百科

完这个偏差得到如下:

  • 黄绿色:黄绿色

  • 琥珀色:黄橙色的

  • 朱砂:橙色

  • 红色:紫红

  • 紫罗兰:蓝紫色

  • 蒂尔:蓝绿色

注意,这个符号的二次颜色是主要的颜色。

邻近色

类似的 颜色是相邻色轮,挨着。

入门级设计新手须知的配色技巧

它们形成一个简单的关系,通常是非常好看的,创造一个和平的、舒适的心情。 所以如何? 最有可能的,因为在本质上,经常可以看到这种颜色组合。

互补色

色轮,互补色互相反对。 互补色是一个非常受欢迎的组合,因为他们请眼睛“自然”。 红色和绿色是特别受欢迎。

入门级设计新手须知的配色技巧

但是记住不要使用它们同样,决定而不是一个主要的颜色。 一般较弱的颜色应该使用更广泛和更强的增强。 想匹配的衬线和无衬线字体的颜色组合。 平衡是非常重要的。 互补色也能够创建为每个色调最强烈的色彩对比。

三原色

三原色是等距放置在色轮上。 他们现在更多的先进的组合和使用这些初学者很难得到正确的我预料,但是不要让我阻止你。 你练习越多,等等…

入门级设计新手须知的配色技巧

他们通常对漫画和超现实的场景,意味着一定的趣味性。

类型的颜色

这是一个新的RYB色环表示:

入门级设计新手须知的配色技巧

温暖的颜色

暖色的右边代表色轮。 他们倾向于更瞩目,精力充沛,真的很大,至少在我们通常的看法。 不要忘记这些非常人类属性无关的光的现象。 这些颜色可以抓住我们的注意力很快被认为是非常活跃的。

入门级设计新手须知的配色技巧

SmartBribe

你可以使暖色有效工作,但是这里有一个例子失败在建立信任,由爆破安全性和信心,你大量的暖色。 最重要的是,这个设计在建立一个坏的工作强调他们的主要行动。 他们的电子邮件订阅按钮有相同的颜色作为背景,视觉上消失。 它可能是更微妙、更有效的如果只有按钮使用暖色脱颖而出更清楚如果背景是不使用这样一个活跃的颜色数组。

冷色

左侧,另一方面,代表冷色。 这些更舒适和稳定。 他们也往往容易褪色的背景成分和不太“跳出”。 他们被认为是更被动。

这个色轮的左侧是非常受欢迎的这些天在流行网站。 像facebook和推特只是看一看,你会发现大量的知名项目制造这些颜色固有颜色调色板。 为什么? 因为web项目总是要打击他们的没有一个物理位置,个人和信任连接可以更容易。 网站迎合出现无数人需要稳定,值得信赖的,放松和市场的平静是安慰。 这些都是凉爽的颜色类型可以帮助你。

入门级设计新手须知的配色技巧

Etsy

中性色

黑色,白色,灰色和棕色被认为是中性的。 在这个意义上,他们是支持“颜色”。 如果应用得当,这些中立者可以在上面的莫奈绘画结合在一起的一切。 他们提供了一个明亮的强度,更强烈的颜色更容易吸引眼球。 在这个意义上,中性色感兴趣的基础和variation-like西红柿意大利面和肉丸子。 意大利面是中性的粘合剂。

背景的中性退去时带来更多的饱和的颜色混合。 在每一个伟大的颜色词汇,他们扮演了重要的角色,因为他们帮助你创建一个巧妙的平衡你的工作。 想象一下,如果一切都是大喊color-wise。 不会是非常有效的,我们将再次得到颜色“噪音”。 中性色是你的秘密武器来创建一个锋利的焦点在需要的地方。 在实践中,这意味着你建立你的作文主要是中性色调,然后决定重点在哪里,眼睛应该是吸引的地方。 这就是饱和色调发挥作用。

入门级设计新手须知的配色技巧

Cinebody

想象一下,如果我们有大量的饱和的颜色。 这将是更加困难的预订按钮凸出来。 因为他们是这个行业的核心,他们需要高度强调,以免迷路。 背景的白色和灰色地带退去,让几个颜色强调流行了。

匹配的颜色

在我们继续之前,将各种不同的颜色在一起谈谈。 我表示,这个过程真的可以类似于选择字体。 尝试提交一个,或者两个主要颜色为你的设计。 玩有很多变化通过调整值,语气,亮度、饱和度或使用中性色,等…如果你不发疯和吨的颜色,你会实现一个更连贯的result-one将整个块紧密结合在一起的有意义的和优雅的。

从一种颜色,其他颜色反弹了,看看你可以把它多远。 更好的如果你开始用一个简单的灰度和等待你把颜色进入方程。 玩光明与黑暗在你早期的方法。 用于突出显示部分主要颜色很少,而允许支持颜色做后台工作。

单色的选择

我也应该迅速提到你需要知道单色的颜色选择。 还记得上面这个色卡吗?

入门级设计新手须知的配色技巧

这是一个单色颜色红色色调的规模。 下面是一个很好的例子使用单色的有效方法。

入门级设计新手须知的配色技巧

Boom

强调

如果您使用稀疏主导颜色,您可以创建有效的强调。 避免夸大太多,浪费机会突出关键设计元素与节省了“樱桃”。 用它来关注元素是最重要的信息交流的关键。 这个“主”你的调色板的颜色通常与灰度很有效,因为它很容易淡出,支持有效的主要颜色。

入门级设计新手须知的配色技巧

RIF6 只强调了一个成功的业务事务的关键项目。 在这个例子中,很难不注意到按钮,让你买这个项目。 没有指导的眼睛迅速接口项目,促进了用户的主要行动。 所有在使用的主要颜色,该公司作为一个品牌认同。 简单而有效的! ,没有废话。

颜色的一致性

一旦你建立一个用户的心理地图的颜色,重要的是不要打破它。 如果你故意选择打破它,做它巧妙地和目的。 例如,保持联系当他们做同样的事同样的颜色是至关重要的,特别是如果你有吨的页面上的内容。 同时,保持头颜色一致的为用户提供锚定他们的旅程。

保持背景颜色相似的也可以是非常有效的。 这不是做了很多伤害时忽视,但可以绑在一起时很好地观察到。 最重要的是,你是设置对用户的期望,和您想要方便用户理解旅行到哪里去了。

入门级设计新手须知的配色技巧

模式

模式是一种新产品 Etsy 和它很好使用颜色一致。 甚至桌子上的书和东西的形象扩大优雅的品牌颜色和呆在这个范围的模糊,温暖的颜色。 gray-ish墙在后台提供了完美的背景将注意力集中到网站的主要行动呼吁。 显然说“ETSY”没有尖叫在你的脸。 两个大拇指!

Etsy也做一个伟大的工作一致的颜色在他们的主页,但他们也把球一点。 我认为这是公平地说,有足够的空间来创造更多的凝聚力通过使用他们的主要页面内颜色更加一致,特别是关于背景。 看看自己,你是法官:

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

入门级设计新手须知的配色技巧

颜色的含义

在不同的文化中,颜色可以表示不同的含义或关联。 他们唤起不同的感受,不应该被低估,当我们在跨文化区域的项目工作。 为避免误解和有效的沟通,我们需要考虑到这一点。

下面是一些常见的含义,颜色被认为是附加到他们。 你可能会发现他们肤浅,但不过最好能够了解这些联系,提交他们的记忆。

蓝色的

蓝说话的信心,稳定和业务不像其他颜色。 它还意味着信任和专业精神。 荣誉和被可靠的是正确的。 (蓝色)没有限制!

入门级设计新手须知的配色技巧

排序

绿色

绿色意味着增长,和谐、自然、财富、乐观和钱(当然)。

入门级设计新手须知的配色技巧

Zpotdrop

红色的

爱是一个主要的与红色,但权力,色情和力量搭配。 它有点棘手工作是它也可以意味着危险,血液,邪恶和紧急状态。 勇气,是同义的。 小心的背景和意义这一个因为它可以唤起非常强大的,潜在的负面内涵。

入门级设计新手须知的配色技巧

的网站 SpeedX豹 使用红色的非常巧妙。 它增强了自行车本身的颜色,但只有很少强调行动呼吁。 抹红到处都不会显得那么优雅。

黄色的

黄色象征着希望,快乐,阳光,兴奋,但也警告。 因为它是如此的明亮,它可以在你大声“尖叫”。 大多数时候,这不是我们,作为用户,需要。 在下面的示例中,可能会更少。 为一个项目“安全”和“家庭”在它的名字,黄色的可能不是最好的选择。

入门级设计新手须知的配色技巧

FamilyInSafe

紫色的

皇室的颜色正名。 不是我的那杯茶,但这个颜色是用来传达奢侈的想法,魔法和诸如此类的事。 有趣的是,我觉得朋克和。 协会与皇室和豪华可能源于自然昂贵的紫色的过去。 很难产生(一些故事,涉及吨 小蜗牛 等),因此只有那些社会食物链中最高能够负担得起。 如今,当然这不是一个问题了。

入门级设计新手须知的配色技巧

有趣的, 引导 ,一个非常流行的开源项目,使用紫色在一个完全不同的背景下很成功。 或许开源项目有更多的回旋余地,遵守不同的物理。 太棒了!

白色的

这是另一个棘手的项目列表中。 白色可以传达纯洁、洁净柔软,成熟,优雅,神,婚礼,皇室成员和积极性。 在其他文化中也可以明确识别与死亡和悲剧。 白人和黑人可以有非常不同的含义取决于你在哪里。 小心!

入门级设计新手须知的配色技巧

Cinebody

黑色的

最后,但并非最不重要的是,良好的神秘,性感,成熟的黑色。 为什么这么严肃的黑色? 它的工业,机械,也可以联想到“结束”,死亡和邪恶。 最重要的是,它是叛逆的。

入门级设计新手须知的配色技巧

Impossible

就我个人而言,我认为这些联系有点做作。 但这完全取决于你! 做你的研究,当你工作在一个项目中,尤其是如果它达到你的文化舒适区以外的人,但有很多盐的准备。 最重要的是,玩得开心,让你的创造力流! 设计严格按照书死了无聊——一个确保杀死心情肯定的方式。

颜色相对论

让我提东西很快在我们头上。 深受周围是什么颜色。 在某些时候,我们谈论的是凉爽和温暖的颜色,但它是一个相对比。 颜色可以出现在彼此的关系。 他们可以温暖或凉爽取决于环境。 我们人类的眼睛有点愚蠢。 看看下面的颜色相互影响以及灰色的边界内的广场出现在每一个不同的光谱。 这是所谓的 颜色相对论 。

入门级设计新手须知的配色技巧

在一些极端的例子的颜色可以看到完全不同的,完全傻瓜人眼。 看看这个经典的“检查器阴影错觉” 爱德华·h·阿德尔森 :

入门级设计新手须知的配色技巧

信不信由你,广场A和B是相同的颜色。 需要看到一些证据吗?

入门级设计新手须知的配色技巧

使用你最喜欢的颜色选择器来检查,如果你喜欢。 在路上精神食粮。

最终的想法

颜色可以是一个强大的情绪改变。 使用它你的优势或灭亡。 这真的是你,因为它是一个强大的武器使用。 慢慢来学习更多,不要气馁的规模在你面前。 在网络上,你应该使用颜色来创建一个特定的情绪和突出的元素是特别重要的。 与设计原则,少即是多。 如果一切都强调通过颜色,没有突出,你会得到一个不利的信噪比。

不迷失在色彩理论不过一次! 你有一生来实现可能只有一小部分完全理解。 放轻松,享受过程! 一旦你打开你的眼睛,这整个主题,您将看到世界通过不同的镜头。


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多