您好,欢迎光临一网学 请登录 免费注册

网页设计培训、UI设计培训和淘宝美工培训机构-一网学!

7 * 24小时全国免费咨询电话

400-655-3664

您现在的位置:首页 > 免费专区 > 设计教程

设计教程

最简单实用的新手配色指南是什么样的?【网页设计培训】

作者: 一网学   最后更新时间:2016-05-11 14:05:57

小编:今天的色彩搭配教程是针对零基础的新手写的,分别是<基础:色彩的组成>、<进阶:色彩的搭配>、<高阶:调色三要素>3个部分,有图有实例,文末推荐了一个网站一个视频,都是帮你提高配色技巧的,建议阅读。

1. 基础教程:色彩的组成

关键词:原色 间色 复色 色环

29wb20160510

所有的色彩都是源自”红黄蓝”三种原色。有人可能会潜意识地认为三原色是”红绿蓝”,但其实不是。红绿蓝是显示上的三原色,和美术上的三原色不一样。

28wb20160510

红黄蓝两两混合后得到三个二级色即“间色”绿橙紫。

27wb20160510

原色与间色混合或间色与间色混合而形成越来越多的颜色,称之为“复色”。

26wb20160510

最后由三种原色、三种间色和六种复色组成的系统就统称为十二色环(colorwheel),也是学习色彩搭配的基础。

2. 进阶教程:色彩的搭配

关键词:单色 近似色 补色

十二色环的存在并不只是一个摆设,它巧妙地建立了配色系统。

常见的色彩搭配有:单色搭配,近似色搭配,补色搭配,分散互补色搭配,三角对立的配色搭配……

单色搭配(monochromatic)

25wb20160510

这个不用解释,就是只用一种颜色的搭配。

类似色搭配(analogous colors)

24wb20160510

色环上任意三个相邻的颜色,被称为类似色。通常认为,它们放在一起会很和谐。

类似色是选择相近颜色时十分不错的方法,可以在同一个色调中制造丰富的质感和层次。理所当然成为配色法则中最经济适用的一条。

23wb20160510

一大片近似色将梵高叔叔的忧郁高冷展现的淋漓尽致。

22wb20160510

再放眼时尚圈,同类色也是除了黑白灰以外最安全的穿搭法则哦!

21wb20160510

但是在选择的时候要注意比例上的调和,选一个为主要颜色。

20wb20160510
补色搭配(complementary colors)19wb20160510

色环上相对的两种颜色,被称为互补色。放在一起,会形成对比效果。比如蓝色和橙色、红色和绿色、黄色和紫色等。

互补色有非常强烈的对比度,在颜色饱和度很高的情况下,可以创建很多十分震撼的视觉效果。很多广告和招贴为了吸引眼球经常会使用,用作强调提示作用效果是极好的。

18wb20160510

但是记得,在文本中使用互补色是很糟糕的。

要用好互补色,最好的办法就是:改变明度、降低纯度,看起来会柔和许多。下面看几个例子。

17wb20160510

降低纯度后的互补色相当和谐。

16wb20160510

《天使爱美丽》中的这个场景,是一个典型的红绿互补色。

15wb20160510

室内装修中互补色也很管用,清新又不失活泼。

分散互补色搭配(split-complementary colors)

14wb20160510

寻找三种颜色,其中两种互相类似,另一种与它们形成对比,这就是分散互补色搭配。分散互补色搭配是初学者很好的选择,怎么搭都很好看。

13wb20160510

红、深蓝与浅蓝搭配,完美突出对比感,画面又不失和谐。

三角对立配色(Triadic colors)

12wb20160510

此外,如果要寻找三种互相平衡的颜色,可以选择12色环上任意三个三角对立的颜色。

11wb20160510

要成功地使用三色系产生和谐效果,需要谨慎地在色彩间取得平衡——只用一种主色,其他两种颜色作烘托。

3. 高阶教程:调色三要素

关键词:色相 饱和度 明度

要精准的调出每一种颜色,其实包括三个要素:色相、饱和度和明度。

10wb20160510

色相(hue):指饱和度和亮度都为100%的颜色。我们肉眼所见到于是能说出来的颜色就叫色相,所有的色相都可以用色环来展示。

9wb20160510

饱和度(saturation)即纯度,指色彩的鲜艳程度——颜色中含有灰色的程度。饱和度越高,颜色越纯,色彩越鲜明;饱和度越低,颜色中灰色成分越大,色彩越黯淡。

8wb20160510

明度(value),即色彩的亮度。反映的是色彩的深浅变化,如粉红、大红、深红,都是红,但一种比一种深。

7wb20160510

明度的变化来自于颜色中白色的成分变化。一般情况下在颜色中加入白色,明度提高,加入黑色,明度降低。最大值时,所有颜色都变成白色,最小值时,所有颜色都变成黑色。

下面来看一下明度(Value)的具体应用。

TINT:HUE+WHITE

6wb20160510

在色彩中加入白色。这种基调给人更加明亮、和平但缺少活力的感觉,更体现女性色彩,适用的行业有spa、美容等。

5wb20160510

SHADE:HUE+BLACK

4wb20160510

在色彩中加入黑色。神秘、黑暗、罪恶、危险色调,更体现男性色彩。使用纯色或更明亮的阴影色时,与渐变能很好搭配。

3wb20160510

TONE:HUE+GREY

2wb20160510

在色彩中加入灰色,调性不至于太黑暗但能突出冰冷的感觉。

1wb20160510

最后给大家推荐一个视频,一个网站和一本书。

一个视频:<A Brief Lesson on Color Theory>,Vimeo上的视频,上面文章里的一些色环截图都是来自这个视频。搭梯子访问

一个网站:Color Hunt,每天更新两条很有想法的配色方案,缺乏灵感的时候不妨一看。

欢迎关注作者的微信公众号「ZUO设计」

zuoshejiqr

推荐阅读:

提升网页可用性的优化小技巧(三)【网页设计培训】

交互设计新人职场中都踩过哪些坑?【UI培训】

新手视觉设计师怎样做好设计工作?

设计人物:让更多设计师认识你,获取更多设计师资源!

点击:1413关键字: 色彩搭配   网页配色技巧   配色方案  
 

还要名师指导?
还想学更多?
想成为一名优秀的设计师?

赶快报名我们的就业培训吧

加入一网学(免费获取设计视频)

加入我们QQ群

  • 94479624(满)
  • 300641383 (满)
  • 325055490(满)
  • 208130525

扫一下,加我微信

    姓名:
    我要报名,免费试听,素材索取都可以
    给我们留言。同时也可以咨询在线客服。
    郑重承诺:我们不会泄露您的任何资料。
    电话:
    Q Q:
    答案:
    邮箱:
    留言:

    客户服务中心(7×24小时):

    4006-553-664

    • 电话:0755-25849300
    • 传真:0755-25849300
    • 邮箱:editor@ywxue.com

    深圳市一网学教育咨询有限公司 版权所有 2008-2016|一网学手机站

    一网学专注网页设计培训UI设计培训平面设计培训淘宝美工培训7年 | E-mail:editor@ywxue.com
    Copyright © 2008 - 2016 ywxue.com. All Rights Reserved 粤ICP备12037495号-2