UED设计培训
美国上市UED设计培训机构

400-111-8989

热门课程

UE设计容易上手的配色方法

  • 发布:UED培训
  • 来源:设计教程
  • 时间:2018-03-19 14:58

容易上手的配色方法
容易上手的配色方法

谈到颜色这个话题,设计中讲究形与色的组合,生活中有了颜色给我们的生活带来了无限的色彩,我们作为设计师不仅仅在设计中使用颜色,在生活中穿衣打扮都离不开颜色,美女要出门了,今天的妆容应该画什么颜色,是通过明度的变化还是饱和度的变化(作为男人我认为可是饱和度的变化哟,适当的有一点点明度的变化会显得有立体感~~)。今天涂什么颜色的口红是五颜六色吗?(老铁偷偷告诉各位是与皮肤接近的同类色、类似色与邻近色但是饱和度都比较低一些,少数情况下可以与众不同并不是非常确切),以及是否跟气质衣服的颜色都会有很大的关系这些都是要考虑的。是不是有点小迷糊,读完下面的文章你再回过来看应该如何去涂口红了,如何去化妆,如何去选择不同颜色的衣服,就有一定的考究。前面说了这么多发现没有帅哥的事,有些漂亮的男人也需要化妆出境的(老铁是绝对不化妆的一瓶肤护品老铁能用到过期,但慢慢也在开始追求美了),但穿衣打扮,什么样子的衬衫配什么领带都值得男士们去考虑!!!

言归正传下面我们通过几个关键词来认识一下颜色构成关系,生活中我们都熟知赤、橙、黄、绿、青、蓝、紫七色(彩虹色),实际就是三原色与三间色的组合,成为一个标准的色相环。色彩也可以按照冷暖来区分为冷色与暖色,按照有颜色倾向与没有颜色倾向称为有彩色与无彩色(黑白灰),还有金属色(金、银、铜)。

以下知识点请牢记!(一万个非常重要~~~)

色相环:360度 adobe软件中色条首尾相连就是色相环;

色料三原色(印刷 绘画):青、品红、黄 三者之间相距120度,如下图;

色料三间色:橙、绿、紫 三者之间相距120度;

色彩三要素:色相(Hue)、纯度(饱和度Suturation)、明度(Brightness)。

容易上手的配色方法

生活中普通人是这样认识颜色的,如红色这样形容的,最红最红的红、浅红色、粉红色、桃红色、玫红色、暗红色、樱桃红等等,千变万化,为什么产生了这些叫法呢,是个人感受以及生活参照物导致的。实际是跟上面我们提到的色彩三要素息息相关。第一是物体色相对人的影响,第二是颜色中的饱和度与明度的变化。如果你画过颜料画就很好理解了(绘画功底比较强的童鞋可以开会小差~~~)

下面老铁带着大家模拟一下绘画中的调色方法,当我们看到一个颜色,给人的感官无非就是发粉、发暗、发灰,从颜料盒中调一个颜色,然后在通过观察它的视觉感受,无非就是通过感受调入白色、黑色、灰色(黑白都有了就是调入灰色)当黑多白少为暗灰色,白多黑少浅灰色。这样一个看到的颜色就还原出来了。绘画中还有一个媒介是加水调成半透明,使得画面能够叠加出不同的层次感。软件里可不能加水的,他是通过降低图层的不透明度来实现的。

我们通过下面这张图来观察颜色的饱和度与明度,首先看右上角这个蓝色HSB值中当SB(都为100是纯色);在最右上端纯色到白的过渡称作为明色调(饱和度变化);最右上端纯色到黑色的过渡称作为暗色调(明度变化);最左下端黑色到白色的过渡称作为灰色调(灰度变化);最右上端纯色到左下角的黑色的过渡称作为浊色调(饱和度与明度同时变化)这些都是颜色发生色彩三要素中的明度与饱和度的变化,我们从色条中可以更改色相。

老铁是不是再让你观察颜色你就很清晰明了了~~~

容易上手的配色方法

以上的理论都是为了观察调出一个准确的颜色。

02、认识色调

下面我们来认识一下画面中色调的形成原理,请看下图在读文字。色调是通过饱和度与明度的降低与升高来完成的。如纯色调是SB值都是100,向左添加白色分别为明色调与淡色调,分别是混入的白色多少决定的,没有加入黑色哟~~。纯色调加入黑色降低B的值S还是100,为暗色调。纯色加入黑白(SB都降低)称作为浊色调(黑白差不多一样)、淡浊色调 (白多黑少)。当HSB(SB为0 0 H0-360)情况下为黑色调,当HSB(SB为0 100 H0-360)情况下为白色调,中间过渡的为灰色调。

有时候我们在不确定一个颜色如何命名的时候也可以称作为蓝绿色,哪个名称在前给我们的视觉感受就多一些,好比吃饭的时候点个菜,西红柿炒鸡蛋一定是西红柿多,除非你说鸡蛋炒西红柿,老板陪了(但如果多掏钱也是允许的),应该很好理解吧。

色调还与心理相关比如说是浪漫的、纯真的、优雅的、柔和的、安稳的、和缓的、希望的、进步的、优雅的、女性的、沉稳的、朦胧的、自然的、可爱的、稚嫩的、甜美的、俏皮的、单纯的、革命的、欢喜的、气派的、豪华的、奢华的、快乐的等等。这些都是我们的心理感受并没有确定的颜色指向只能用心去感受。

容易上手的配色方法

03、色彩搭配

学习完上面的颜色以及色调了,我们就开始来研究画面中的颜色是如何搭配的。还是先来认识一下色彩在色相环中的角度产生的对比关系,以180度为基准,180度相对的两个颜色对比最强,随着角度的降低,会逐渐减弱的。

下面这张图是老铁喜欢用来提取颜色的网页,我叫它配色神器。

配色网站地址 http://www.peise.net/tools/web/

容易上手的配色方法

通过上面的图解我整理出颜色的对比法则有以下几点:

单色:通过改变一个颜色纯度(饱和度)与明度来完成色彩搭配。

同类色:两个颜色相隔15度以内。

类似色:两个颜色相隔30度。

邻近色:两个颜色相隔60度-90度。

对比色:两个颜色相隔120度-150度。(三角形搭配 矩形搭配)

互补色:两个颜色相隔180度。

黑白色:当改变黑与白的明度色彩,会产生不同的灰色,在两端的黑与白也是最强对比。任何有彩色与无彩色(黑白)都是对比,在有彩色中黄色明度比较高,上面如果放白色的形状会看不清,我们可以将所有有彩色去色后发现其中也有明度的深浅变化,当白色放到有彩色上观察能不能够看清楚再去合理使用。

通过上面颜色在色相环上不同的角度产生的对比关系,我们来分析一下版面中的颜色搭配方法是使用了哪种对比!!!想把画面的颜色搭配好需要考虑的方面很多,画面中色彩给人的感受,这是在感性认识。我们还要从理性的角度分析与色彩三要素息息相关。一个颜色纯度(饱和度)和明度不同,给受众的视觉感受也大不相同。在色调确定上应该将一个颜色明度与纯度以及同类色、类似色、邻近色都考虑在内。面积的大小是我们确定的标准,同类色、类似色、邻近色是为了丰富画面的视觉效果必不可少的因素。有时我们还以色彩的冷暖为依据来形容画面的色调。

下面我们拿几个广告版面去分析色彩搭配分析,版面中色彩需要遵循以下几点来进行色彩搭配:

色调:画面中面积最大的色彩倾向,或冷或暖。

对比:在色相环中的角度,以及面积多少都能产生不同视觉感受。

视觉流程:色彩的搭配是否符合视觉阅读的先后顺序。

造型:色彩与造型密不可分,画面中的版式创意以及与产品之间的关系,这些都是建立在色彩的基础之上。

色彩的黄金法则 60:30:10

主色是60%的比例,次要色彩是30%(对比关系的颜色)的比例,辅助色彩是10%的比例。世界最好的设计基本上都脱不了这个法则,这是很简单的道理,但我们往往都会忽略它。有一双会发现色彩的眼睛很重要。我们经常去旅游,也拍了很多照片,更多人会热衷于对美景的赞叹和对当地的风土人情的介绍,但是很少人对色彩有分析。其实60:30:10多少也是得到了自然界的启发。我想在我们整个自然生涯中,旅行就是很好的色彩课。

勿忘黑色

现在我们看到很多所谓现代简约风格都会利用黑色,但是要灵巧运用黑色,而不是用太多的黑色。黑色能够让任何一个色彩看起来干净,但它本身并不是一个重点,它能够给家庭营造一种对比平衡。巧妙的运用黑色,可以是一个黑色的箱子,画框,做一种点缀,效果是十分不错的。

容易上手的配色方法

色调:明色调(暖色调或橘红色调)

对比:同类色(橘红、橘黄、大红、白色)

视觉评论:背景的主色为明色调中运用了橘红、橘黄通过改变了它们的明度与纯度来丰富画面的空间感,模特的衣服也是运用了大红色也是同类色与背景反差不是很大。文案的字体运用了白色很明显符合视觉流程以及对比关系,排在第一位。苏宁大家电爽11主场文字在背景明度比较低上非常明显突出但字体比较小没抢主体文字,排在第二位,其次才是下面文案与背景颜色差别不大属于同类色排在第三位。以及做为点元素的产品起到点缀作用颜色上给了不透明度以及反光的黄色。模特有时候在画面中与主文案一起排在第一位有的高于文案跳出来作为第一位都是合理的,当前这张排在字前面,字的地方有所遮挡,这与版式构成有关联。也遵循着视觉从左而右从上而下,在结合颜色就更好的体现了。画面虚实结合、动静结合、点线面运用合理。

容易上手的配色方法

色调:明色调(暖色调或橙色调)

对比:类似色(橘红、橘黄、大红、黄色、白色)

视觉评论:背景主色运用了橘红与橙色的相互叠加产生的类似色对比关系。白色的主文案为了能够更加突出采用白色(加入了比背景色更重一些的橘红为了投影突出文字)。画面中产品的冷灰色给画面增加了冷暖对比,以及其它地方的点缀元素也用了灰色(带有一定的色相)。左上角的标志也运用明度的变化更好的把标志凸现出来。主要产品为带有色相灰色错落摆放在前面,以及运用了与背景有所区别的类似色黄色来进行突出。

容易上手的配色方法

色调:暗色调(暖色调或大红色调)

对比:邻近色(大红、黄色、白色)

视觉评论:背景的暗色调只是B的值降低了一些但不是很多,有些许的明暗颜色的变化,通过模特衣服红色明度、饱和度的变化产生了空间感。以及模特的身体影子,还与背景中点的元素(三角形有光线的变化)的运用密不可分。画面中的黄色以及产品中略带有的黄色,相机的红色这些面积都不是很大。但是很好的构成了邻近色对比关系,画面也拉开了层次关系。5折以及超省来袭的广告运用了黄色来进行邻近色进行对比来突出文案的作用性。还有画面中的白色(主文案以及产品的白色)与红色的对比关系也很明确符合视觉流程的主次关系。

容易上手的配色方法

色调:纯色调(冷色调或蓝色调)

对比:对比色(蓝色、青色、黄色、白色)

视觉评论:背景采用蓝色作为主色调加入了渐隐的青色进行过渡,运用点的元素与线的元素进行丰富画面增加空间感。产品都是蓝灰色比较暗没有抢主文案的视觉。只有联想电脑的橘黄色很明显的跳出来,但是面积比较小没有抢到作为画面主视觉的模特与字体(字体给人的感觉是安排在人物的后面,正字可以很明确的看到处理在人的后面)以及处理投影关系也很好的增加了空间感。

容易上手的配色方法

色调:暗色调(冷色调或紫色调)

对比:互补色(紫色、黄色、白色)

视觉评论:背景采用紫色作为主色,加入了点元素线元素以及饱和度降低的浅色增强了画面的空间感。与上一张的造型表现比较相似,但在颜色的处理上采用色相环上相距180度的互补色,采用的是原色与间色的对比关系。还有白色与紫色的对比以及少许的红起不到大的影响作为点缀出现,可以被作为区分层次以及装点画面的作用。周围的产品颜色都做了不透明度的处理与背景融合在一起起到很好的融合作用。

以上都是通过理论的学习来完成对配色的理解,除了色调、色彩搭配色彩通过颜色给人的感官还能产生不同的性格倾向,下面为老铁们介绍色彩性格。

色彩性格

无论是有彩色还是无彩色,都有各自的表情特征,任何色彩的表情都有其积极的一面和消极的一面。

红色系

红色象征生命的热情,使人兴奋、引人注目,富于刺激性,让人联想到火焰的燃烧。由于鲜艳程度不同,红色的表情也不尽相同,有的红色直率而有动感,给人生动活泼的感觉,有的红色则柔和、伶俐,给人浪漫、甜蜜的感觉。红色是东方民族喜爱的色彩,中国人婚庆、节日、尚红,挂红灯,穿红衣、配红花。但西方人主张用红色做小面积点缀装饰。红配绿,醒目艳丽,比例合适,华丽效果。红配黑,效果明显,具有活力。

粉红色系

粉红色是温柔的颜色,代表健康、梦想、幸福和含蓄,是温和的颜色,粉红色系属于浪漫天真的色彩组合。

橘色系

是光感明度比红色高的暖色,又称橙色,充满了暖色感,是一种红中带黄的色彩,象征美满幸福、代表兴奋活泼、欢快喜悦、华美富丽、是非常具有活力的颜色。橘色长令人联想炎炎夏日,是最能让人感到温暖和快乐的颜色。橘色配褐色很相称,在冷色系里施以少量橘色烘托,很好的视觉效果。在与橘色配合的全部色彩中,只有它的补色蓝色才能让橘色淋漓尽致地展示出其明亮、迷人、快乐的个性以及太阳般的光辉。只要有少量蓝色搭配,橘色就非常抢眼并给人强烈、深刻的印象。

黄色系

黄色是亮度最高的颜色,具有光明、希望的含义,给人以辉煌、灿烂、柔和、崇高、神秘、威严等感觉。黄色洋溢着年轻、快活、明朗的气息。具明快感的黄色,可以和冷色系的蓝紫色或其他的蓝色相搭配,使黄色更突出。

绿色系

来自大自然的色彩象征和平、安详、平静、温和,给人安全、自然、有生命感的印象。适于配白、灰、褐、灰棕、苔绿色宜配金褐色、配黑。

蓝色系

又称青色,深远而神秘,具有吸引人的魅力,并给人寂静、透明的感觉,能表现无限的空间感。中国自古以来对蓝色情有独钟,一贯把它看做典雅、朴素、庄重和智慧的色彩,并由此建立了独具华夏民族意蕴的文化系列,如青花瓷、蓝染布、蓝印花布加入了少许紫色的宝石蓝色。能化解纯蓝色原有的 冷与硬,带有一股柔和的优雅味道,将鲜明的蓝色和白色搭配,可以产生清爽无比的效果。

紫色系

是大自然中比较稀少的颜色,具有高贵、优雅、神秘、娇丽的性格。在我国唐朝,紫衣为贵官的服装,在日本,紫色是最高级的官服色彩。在古希腊,紫色为国王的服色,随着佛教的传播,紫色在我国被赋予了高贵、吉祥的意义。日照香炉生紫烟、紫气东来、紫禁城、体现了高贵祥和。紫色与粉红色、白色、金色、银色等搭配时,最能引发梦幻般的意境。

黑色系

使人联想万籁俱寂的夜,表现虚无和泯灭、同时具有庄重、超俗、渊博的含义。在与纯度较高的色彩并置时,能把并置的颜色衬托得既辉煌艳丽,又协调统一与任何一种颜色混合成暗色时,都会使对方具有稳重、含蓄的表情特征

白色

最明亮的颜色,公正、单纯、洁净。

写到结尾了有时候感受配色就在我们身边,可以听从自然的教导只要是在地球上 ,你看到地球是什么颜色,是大地土壤,中间是群山。它是介于深和浅之间。配色是个感性大于理性的思考,需要不断的摸索与研究,老铁能力有限暂时分享这么多希望能够给做设计的小伙伴们提供点理性的思路,欢迎交流学习。

答应童鞋穿衣的配色指南来了~~~

1、红色 配白色、黑色、蓝灰色、米色、灰色。

2、粉红色 配紫红、黑色、灰色、墨绿色、白色、米色、褐色、海军蓝。

3、橘红色 配白色、黑色、蓝色。

4、黄色 配紫色、蓝色、白色、咖啡色、黑色。

5、咖啡色 配米色、鹅黄、砖红、蓝绿色、黑色。

6、绿色 配白色、米色、黑色、暗紫色、灰褐色、灰棕色。

7、墨绿色 配粉红色、浅紫色、杏黄色、暗紫红色、蓝绿色。

8、蓝色 配白色、粉蓝色、酱红色、金色、银色、橄榄绿、橙色、黄色。

9、浅蓝色 配白色、酱红色、浅灰、浅紫、灰蓝色、粉红色。

10、紫色 配浅粉色、灰蓝色、黄绿色、白色、紫红色、银灰色、黑色。

感谢大家阅读由UE设计教程分享的“容易上手的配色方法”希望对大家有所帮助,更多精彩内容请关注UED培训官网

免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除

免费预约企业总监级讲师试听课

怕钱不够?就业挣钱后再付学费!     怕学不会?0基础入学,达内定制课程!     担心就业?近12万家雇主企业,推荐名企就业!

上一篇:【图标设计】APP应用图标设计方法
下一篇:用户体验设计大师的14个好习惯

WEB布局基础知识点图解

没选对颜色就设计,难怪土掉渣!

交互设计师如何与开发哥哥和平共处?

新闻资讯类App的UX设计浅析

选择城市和中心
贵州省

广西省

海南省