Practical Guide for the novice color

Color is very important. Color is one of the design of expression, different colors can be changed with the goods gives the impression. We live in this colorful world, although in nature to enjoy every day to give us a visual feast, when our own turn to the use of color, but is not it also feel helpless, overwhelmed it?

Really have a sense of the rich people of color only a tiny part of the limited use of colors to create visual impact of the experts is very few. As most people of color bitter hand, there is any way to improve the color capabilities of color to avoid serious mistakes?

This article is relatively basic and simple, will introduce basic color theory and some practical color tool, color may be some help for the hard hand of newcomers. Of course, also contains its own color preferences, color is not responsible, Okamoto declared a say, different people different preferences for color, if this article can give to you after reading some of the offers in terms of color experience and help to me is a great honor thing. This article is a combination of "Color Design" and "details of the design: the classic Japanese design dialysis" part two of the book, where we recommend reading in his spare time. The following is the text content.

First, the demand always felt where not done

Whether designer or operator needs to do a new number for the public wrote an article pushing, or is it that they need to do a ppt to showcase products to partners. Toss half a day spent a lot of time and finally finished. Shouted one breath, is planning to delivery time, look closely, always felt where not.

Thinking color usually occurs before the demand made, or after the completion of inspection work, which is "always felt after page done anything wrong." Of course, such a thing is naturally there have been some problems in the color scheme, then we can proceed from what it can be corrected?

From this figure, we can feel there are indeed many sense of violation and then we separate discussion, which in the end is part of a problem, how to improve will be appropriate. We put the contents of the page is divided into: background (background), picture (shape), text. Respectively described problems in color.

1. Background, the background color is too heavy, reflected in the quiet, steady style layout when using white photo to the performance of expression is a basic principle theme. When selecting background often need to consider the background angular version of the image, and will not appear greater color contrast upon completion.

2. Pictures (graphic), is actually a more uniform wood color, but the upper and lower parts of the "round" was the use of a relatively brisk orange, a color photo obliterate itself, although the atmosphere reached a ten-attractive, it gives people a rash is not stable impression.

3. The text, if you look carefully, the color of the text seems to be too much, in pictorial presentation were using three colors. At the same time, the title used in black on a dark background creates easy to read text does not make sense.

Here for this simple example, we make some modifications:

Modified:

1. Simply use white, minimalist style in the works, generally use white performance results. White is the basic color background layout design, it can bring out the universal color of any photo.

2. Fixed color text and color graphics, so the picture is more unified and harmonious at the same time increases the readability.

Second, the basic color theory

Here, in fact, about how to select the color really have a lot of methods and theories, but also because of the designer's personality and preferences, for the same work and different opinions, really have a sense of the rich people of color only a very small a part of. We can do in the case of using theoretical methods, to reduce unnecessary errors and correct use of color, nothing more. The next part is the basis of color theory, may be relatively dull and boring, but every designer needs and dealing with color, which is necessary to grips an object.

What Color is?

What color is actually hard to say, it is the human brain and the strength of feeling for the difference between different wavelengths of light produced by birth, and with the same shape as one of the most basic visual response. The object is irradiated with light and the reflected light is accepted human brain, formed understanding of "color" in. Of course, some object is directly illuminated, for example, our screen. Light wave is an electromagnetic wave, wherein the human can be seen as "visible" The wavelength of visible light from short to long, we can identify violet, blue, cyan, green, yellow-green, ×××, orange, red and other colors.

Three attributes of color

We put color into the "hue", "lightness (brightness)" "purity (saturation)," three attributes of the color system can be classified according to three attributes. To be able to grasp the myriad of colors and use it freely, we must fully understand these three attributes.

Hue: Hue refers to the physical or psychological difference between red, blue, yellow and other color sense one of the elements, but also refers to the color itself, will be arranged in order of hue on the spectrum, is connected to the first, is formed of an annular pattern, said as the "hue circle." After determining the relationship between the hue in the hue ring, the color point practice becomes more simple.

明度(亮度):明度是指色彩的明亮程度,在任何颜色中添加白色,明度上升,添加黑色,明度下降。因此,色彩中明度最高的是白色,明度最低的黑色。白色-黑色的灰度色标示明度差异的表现。同时明度也是决定文字可读性和物体外观的重要元素。两种色彩之间的差别,明度方面的对比越强烈,色彩之间的交界部分越明显。

纯度(饱和度):纯度是指色彩的鲜艳程度。新鲜水果的那种鲜艳、颜色的色彩代表的是“高纯度”,树汁和泥土等天然染料那种朴素、淡雅的色彩代表“低纯度”。纯度越低,颜色浑浊,纯度最低的是灰色(无彩色)。纯度的高低容易形成不同的气质,一般来讲,纯度越高,越有活力,充满朝气,纯度越低,则容易给人成熟稳重的印象。

色彩三属性的模式图(色立体):

其实可以简单的理解为一个以色相环为基础变化成的一个圆柱体,圆柱体的侧面分布了整个色相环;圆柱体的底面到顶面,色相环的亮度发生变化;圆柱体的轴心到侧扁表层,纯度发生变化。

当然,现实中的纯度变化会根据色相的不同而不同,并不是规律的几何变化,因此,实际上的这个“圆柱体模型”应该要复杂的多。

关于色调

大家应该经常听人提起过色调这个词语,在颜色三属性中并没有给出“色调”的定义,那么色调到底是什么呢?色调是指色彩的浓淡和强弱程度,是通过色彩的明度和纯度综合表现色彩状态的概念。也就是大家平时感觉的“这几个颜色放在一起好像是一个色调的”这样的感觉,虽然色相,不统一,但是如果调整好“纯度”和“明度”也能让画面展现统一的配色效果。

其实色调是日常生活中人们对于色彩认识非常重要的一环,很多时候我们觉得某个画面非常协调统一时,往往是色调一致给人的效果。在实际配色过程中,如果需要选择使用多种颜色或者使用到彩色的写真的时候,使用色相调和的方法就比较容易达到效果。

色相差与色调调和

在使用色调调和的配色方案时,可以使用各种各样的色调,但颜色的深浅(纯度/明度)需要控制在一个幅度之内。

三、利用例子来描述基础的配色方法

下面会以一个范例来作为模板,展示基本的配色类型。分为“由色相差而形成的配色”和“由色调调和而形成的配色”。

A:由色相差而形成的配色

1. 有主导色彩的配色:

这是由一种色相构成的统一性配色,体现整体统一性,强烈的色相的印象。如果不是同一种色相,色相环上相邻的类似色也可以形成相近的配色效果,这就是“同色系”配色和“类似色”配色的效果。这种配色展现自然与和谐的印象,但同时也容易形成单调、乏味的印象。

上图更多的想表现的是同色系的方式

类似色搭配比同色系稍微丰富

2.对比色构成的配色:

由对比色相互相对比构成的配色。可以分为:由“互补色”或“对比色”搭配构成的色相对比效果;由白色、黑色等明度差构成的明度对比效果;以及由纯度差异构成的纯度对比效果。由于色彩之间的互相衬托,运用高明度、高纯度的色彩,可以营造强烈的视觉冲击效果。

上图是色相对比的方式

B:由色调调和而形成的配色

这是有统一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的效果,即使出现多种色相,只要保证色调i 址,画面就能够体现出整体的统一性。

在营造气氛或情感时,可以通过色调调和的灵活运用来达到目的,不同的色调可以表达出“柔软”,“明亮”,“朴素”,“稳重”,“华丽”等印象。在确定使用色相前,构思好使用的色调也是配色的基础理论之一。

1. 浅色调调和

这张图想表达的是冬日的风景,冬天清澈,干净的印象使我选择了浅色调调和,同时利用了明度的变化来表现层次感。

△ 浅色调调和

2. 深色调调和

利用低明度,中高纯度的颜色调和而成的夜晚景象。画面表现出安静,祥和的气氛。

△ 深色调调和

3. 柔和(明亮)调和

虽然使用了多种色彩,但是由于控制好了色调的波动,使画面的色彩依旧在一个相对和谐的区域内。

△ 明亮色调调和

四、“知道了理论方法,关于实践这件事”

这一个章节,我讲讲述一些我自己平时使用的配色方法和工具。希望能对读者您的日常工作提供一些简单的帮助。

1. Adobe color CC

它的原名更为著名,也就是Kuler ,不知道什么时候开始改了名字,不过功能没有发生太大的变化。这是一个由设计师分享配色方案的一个平台,已经保存了成千上万的预制配色方案。在photoshop上自带了一个插件,你可以直接调用上面的色彩方案,并且非常方便的应用到你的设计稿中去。

2. Colorgg.com

我经常使用这个网站用于,我只确定了一个主色的情况下,它能帮助我扩展这个色彩,搭配出数种方案,甚至还有色盲修正方案。如果你只能确定一个必须使用的颜色,选择这个工具或许能获得一些灵感。

3. Color Scheme Designer

这是一个在线的配色工具,相比于Adobe color ,它拥有详细的色彩修改方法,和简单的颜色演示工具。国内有个旧版本的汉化版,不过还是建议去官网使用最新的。

4. 有趣的日本传统色

这个网站专门列举了250种日本传统色,且拥有了不错的动画过度效果。如果你对日式的色彩感兴趣,这里或许能得道一些灵感。

五、城里面的配色套路

懂得那么多道理,依然配不好颜色(捂脸)。如果你实在是对配色苦手,没办法得心应手的获取想到的色彩,那么或许,是时候借助一下巧妙的办法了。

1. 从写真中获取色彩

你总能看到一些非常美丽的图片,当然你的手机里或许也有一些,那么何不从中吸取一些颜色用到你的设计中去呢?色彩收集是一个伟大的灵感源泉,你可以快速在通过自己的素材库或者互联网渠道,去寻找你想要的色彩,提高你的设计效率。

2. 手动保存的颜色(渐变色)

如果你实在没办法从色环中提取出你想要的颜色,那么在日常的阅图过程中,收集优秀的配色方案,吸取并保存这也是一个很讨巧的方法。如果你每天都能保存2份色彩方案,或者仅仅是两个渐变色,一个月后,你就能导出一份《我最喜欢的渐变色选集》

3. 正确的颜色设计步骤

一个正确的设计步骤必须从开始的时候就选择正确的道路,为了避免“页面做完之后总觉得哪里不对”的情况出现,我们需要在每一个步骤都提前为设计做好准备。

设计开始时的问题:

  • 你要制作的是一个什么样的内容?

  • 你想要传达什么样的情感?

  • 颜色在这个内容中的作用和定位。

  • 你设计的对象是谁,或者说,你为谁设计?

这将很大程度的帮助你去选择一个合适的设计,颜色设计有时很难确定这个就是正确的颜色,或者你调出来的这个颜色就是最合适的,所以这时候你就的在产品目标,用户群图,使用场景等等做出筛选分析。从而确定颜色选择。

设计进行时的方法

  • 我们通常把一个作品(这里指移动端或者web端页面设计,当然插画其实也是适用的)的颜色拆分为几个部分分别进行色彩的选择。背景色、主色调、辅助色、高亮色(提醒色)

  • 在正确的地方使用正确的颜色,想必在这个时候,你应该有了一个大致的颜色方案,那么注意不要犯一些常见的错误。比如在正确与错误的选项上使用了错误的色彩,就像是在通行过道上使用了红色背景的指示牌。

结语:

其实我本身也对于配色也相当的苦手,像大多数人一样,在色彩上根本没有什么称得上的特长,写完这篇文章,反而对自己的配色能力更加担心了。希望大家能在文章中得到一些收获。


Guess you like

Origin blog.51cto.com/2010376/2422056