/听说你们想看这个?20年经验大佬谈<配色技巧>,微博浏览破10万的教程,留着!有用!-7.GAME

听说你们想看这个?20年经验大佬谈<配色技巧>,微博浏览破10万的教程,留着!有用!-7.GAME

先点上方“七点GAME” 再点右上角“...” 最后设为星标

「七点GAME-国内极具影响力的CG自媒体平台」

本文授权转载于微博@c12的迷幻蓝天_冯伟

好久没分享过实打实的干货啦~ 之前分享过几期教程,大伙儿的反馈都是极好的!今天带来新一期关于“配色”技巧的知识点,授权转载自冯伟老师


一如既往的全是实用的料,现在没时间看的朋友,建议先收藏文章,有空了仔细阅读和实操,用处很大!后台回复【教程】获取数十个干货~




冯 伟
微博:c12的迷幻蓝天_冯伟





著名资深CG艺术家,2002-2007年在KOEI任职五年,担任颜组负责人。2007-2010年在上海悠乐网络科技有限公司担任美术总监,负责《苍茫世界online》客户端网游的开发。2010年创建元素动力概念艺术工作室并担任CEO至今。曾为《魔兽世界》绘制海报,参与制作项目包括《决战3》《天龙八部》《Legend of the Cryptids》等。个人作品多次被收录于国际权威cg杂志《EXOTIQUE 5》《Expose7》。












冯伟-个人作品



此次分享的内容是冯伟老师的通过多年积累总结出来的绘画经验,本篇整理了配色的技巧知识点  大家要做好笔记用于实践呀!




· 配色的技巧知识点 ·





在绘画过程中,配色是上色的第一环节它的重要性不言而喻,这次我们来分析上色的一些理论常识,众所周知配色指的就是对画面的色彩选择的基础配置,然而有很多同学会出现这样的状况,“配一套,画一套”就如同以下这种状况。





由上面两张图可以看出头发,皮肤、上衣提取出来的颜色是完全不一样,但事实上又感觉一样,这是为什么呢?


道理很简单,这是因为我们在创作之前脑子中已经有了这个角色固有色的概念。随着我们逐渐深入,更多光的数量加入后,固有色已经慢慢发生了天翻地覆的变化,这就会引发一个重要的配色效率的问题。也就是说一开始我配的是固有色,可光影一进入就完全不再是之前的固有色,所以会引发一个光的配色系统问题,配色系统主要有两。


“单光系统”与“多光系统”
单光系统的作品特点:





以上所有图的固有色只是在一个前景直照光下呈现固有色基本体积而已,并没有受到环境中过多光的干预,固有色本体色彩非常稳定,我们只是需要很好的还原固有色的美即可。


下侧这张照片也是单光系统就一个灯,而且仅仅体现人物的体积而已,固有色的美被呈现的非常清楚。

也就是说事实上如果下面的“图2”是你最终想要实现的画面,配色可以是左“图1”的样子。


多光系统的作品特点:


以上所有图的固有色在环境中受到各种各样的光照的影响,譬如前景光,反向光,逆光,切割光等等,固有色出现不能完全保持固有色原来的样子的效果,所以我们必须能预见到受到环境光后固有色的样子。


下侧这张照片也是一张多光系统有两个灯,可以看到光色进入后,固有色原来的本色遭到了很大的破坏,已经是新的颜色。

也就是说事实上如果下面“图2”是你最终想要实现的画面,配色可以是下面“图1”的样子。

事实上从下图左边的配色变成右边的这个最终结果,从完成过程角度讲是非常不科学的,相当于我们的配色是没有效率的,所有色彩都需要重画。



但如果从下图左边的配色变成右边的最终结果,从完成过程角度讲就比较科学,道理很简单,仅是因为我们不用颠覆性改变所有色彩就可以达到结果。


所以我们会发现一个问题,在画一幅画的时候我们的脑子不能只局限在固有色本体的样子去思考,还要考虑到事物受到很多光以后最终的样子。当然,如果你想画的事物只是一个很简单的光照射的样子,也就是这个事物受的光不会影响固有色,那你就可以按固有色原本的样子去配色。

所以如果画一张下面这样的图,我们需要怎么对它进行配色呢?

下面是我们准确预见到事物受到逆光,切光,等等光现象后事物颜色最接近最终结果的样子,大家可以比对一下完成图的色彩的成分,并没有发生太大的变化。


然后,如果我们配色配成下面这张图的样子,虽然我们脑子想的固有色可能是这个样子,但我们画起来可就麻烦了,我们必须对这个色彩成分进行大幅改变,那么试问这个配色的意义在哪里?

以下是“单光系统”与“多光系统”下,两组角色设定的案例,我们来分析一下它们的区分。

这张单光系统不难看出最终配色的样子和脑海中固有色的样子相同,因为光的种类不多,不会影响固有色。

下面这张就不一样了。


这张多光系统,不难看出最终配色的样子可以和脑海中固有色的样子完全不同。因为光的种类多,我们要考虑固有色受光后的样子。

单光系统和多光系统想明白后,真正的配色之旅就要开始了


 一:我们制造色彩的目的是什么?

如果单纯的从宏观的角度上讲,答案只有一个,那就是创造色彩对比形成的冲突,对比形成了整个波澜壮阔的色彩世界,没有对比就没有我们看到的色彩的一切。那么对比包含几种?

一共有三种:色相对比、纯度对比、明度对比

用以下四种状况讲明白三种对比如何存在才能产生出美的感觉:

所以以上四张图证明,单纯在一个颜色上增加纯度和明度的关系是得不到完美答案的,控制配色的奥妙很大程度来自于色相的前提下通过明度,饱和度给人带来的对比变化


当我们明白了色相,纯度,明度在色彩分配中的基础意义后,我们就可以独立的去分析一下每一项的具体内容。

 二:黑白对比下孕育的色阶问题 

我们把从最白到最黑的灰阶条分为0——100,然后再把它平均分为三阶段,由此可以把它灰度分成高阶区域,中阶区域,低阶区域,非常像音乐中的高音区,中音区,低音区,事实上颜色会随着不同的光影强度呈现高阶区,低阶区,和中阶区的不同,不同区的色彩放在一起会产生不和协感。


从上边的色条可以看出三种颜色在灰阶上都有三个位置,高阶红,中阶的红,低阶的红,高阶的绿,中阶的绿... 事实上每一种颜色都有明度上的三个阶段,如下


譬如我们经常会出现这种状况,看一张图的皮肤颜色觉得特别好看,想提取出来用在自己的画上,可是吸下来放在自己的画上效果却大相径庭。


这张图上皮肤的颜色实在太棒了,我的画皮肤也是这种略微黄色一点的,那赶紧吸下来用用,一用发现完全不是那意思,这就是不同阶的图颜色不能放在一起统一使用,仔细观测左侧固有色的整体色阶还是偏高的,右侧则是偏低的(注意圆球的部分),所以一定会出现这种不和谐的感受。

根据以上我们列举的色彩的三个不同的阶,我们可以把画面分成三种不同色调类型:高阶色调、低阶色调、全阶色调


下面是一张高阶色调的照片,不难发现整个色调在灰阶上是普遍偏高,从数值上看基本是在0-33的区域的。

这是一张全阶色调的照片,不难发现整个色调在灰阶上是全区域都有的,从数值上看基本是在0-100的区域的。

下面则是一张低阶色调的照片,不难发现整个色调在灰阶上是普遍偏低,从数值上看基本是在66-100的区域的。

高阶色调就是平常我们看到的整个画面颜色很浅,很飘渺那种类型,涉及版权就不列举了,相信大家之前都见过那种很文艺很清新的感觉的作品,应该脑补得出来。


低阶就是那种很厚实很阴暗甚至是比较阴间感受的那种作品,调性整体偏低

全阶色调就是我们最常见的比较明快的画面类型的作品。画面中高阶色,中阶色,低阶色,都存在且分布均匀,这样的类型好控制且对比强烈,是商业绘制中经常出现的类型。


可能有同学会问为什么没有中阶色调,中阶色调也是有的只是画面整体都集中灰阶33-66的话脑补也可想象的出来,如果操作不细腻就会拉不开,所以此类型不太典型就不再列举。


以上的三种类型不是说,高阶色里不能出现重色,也不是讲低阶色调不出现亮色,只是从宏观的角度分析整体的色彩成分而已,统计画面主要的色调出现比率而已。



 三:纯度对比下孕育的高级灰问题 


平心而论,我们平常在创造色彩对比时几乎无时无刻都会使用明度对比,譬如一个亮红配一个暗红,也会频繁地使用到一个低纯度红去衬托一个高纯度红。


想要拉开一个色彩的层次,毫无疑问这种手法立竿见影,但是却缺乏细腻高级的视觉感受。我们通过以下色实验可以感受到色彩的兴奋度的不同。


由上图可以感受到第一组,几乎毫无活力,第二组好了一点点,第三组非常棒,第四组虽然整体降低了纯度但依然非常棒,可是第三组和第四组是为什么会产生非常棒的感觉呢?


原因很简单,我们看到第三组的第一个圆球的色相偏黄,而第二个圆球色相偏红,第三个则偏紫,这就是色相拉开产生的色彩活力。第四组的圆球虽然纯度有所下降,但是色相的差距依然保持得很好。由此证明,事实上只要色相保持了不错的对比,画面的活力就能释放,即使纯度降低活力依然存在。


我们再做一个实验:


上面第一张图我们看到色相几乎是拉不开的基本是从浅褐往深褐的过度,右图单纯的提高了面的纯度,效果也是相当不理想的,由此可见,如果没有色相对比加强纯度是没有用的。


下面这张就不一样了,可以看到配色阶段就已将色相拉开,色彩的活力固然也就非常饱满。


综上所述,色彩的活力并不是单纯靠明度,和纯度的对比才能做得高级,如果控制好色相的对比,即使纯度偏低色彩依然可以非常精彩,这就是我们常说的高级灰了。


 四:色相对比中的色彩成分问题 


以下这段落是整篇色彩配色原理中最核心的问题,也是非常烧脑的一部分,让我们从最基础的色彩原理开始讲起。


我们人眼可以捕捉的可见光色一共有六种,分别是红(R)绿(G) 蓝(B) 青(C) 紫(M) 黄(Y) 以及它们组合在一起形成的白色光。如果白光通过棱镜又可以反向分离出红,绿,蓝,青,紫,黄就如同下图

所以我们可以用来配色的典型可见色是八种,分别是:红,绿,蓝,青,紫,黄白,黑,这几种基础色。就是我们常说的三原色三基色。为了看明白它们的排序状况我们可以把光谱打开观察一下六种颜色的排列次序(当然要除了白黑,因为白黑是他们叠加而来)。

当我们把色彩平衡的界面打开会惊人的发现:青色和红色对应;紫色(洋红)和绿色对应;黄色和蓝色对应。在色轮上它们也是正对面的关系,这证明了一种现象,就是说正对应的色彩是不包含彼此的任何一点信息的,譬如黄色和周围相邻的两个颜色绿色和红色,你可以感受绿色中和红色中都是有黄色成分的,即便是再远一点的青跟紫,你都能多少感觉到一点黄色,然而蓝色中是一点黄色都不包含的。


所以当你可以打开色彩平衡界面,当你控制旋钮往一个颜色方向拉动时,相近的颜成分增加,远离的色彩成分减少


事实上我们反复强调的色相就是颜色的成分了,每一种颜色都还可以包含别的颜色的色相倾向(成分)譬如以下的色彩例子:


人们常说的冷红暖红其实也就是包含了暖色倾向或冷色倾向的红色而已,下边的绿色也一样有暖绿冷绿倾向,所有的颜色也均是如此的,其实严谨的讲任何一种颜色的倾向不单只有冷暖而已,而是在上面色彩平衡面板有很多种倾向的混合,有些倾向会把固有色的本色抵消掉,无法准确形容固有色,所以不再被形容成原本的固有色。因此冷暖倾向只是用来形容外部表现出来的不破坏固有色本来面貌的色彩而已。

颜色讲到这里,大家应该明白了配色这件事其实就是明度,纯度,色相(色彩倾向,成份等等都是一件事)把你设计的小人身上的所有区域用或强或弱的对比拉开:


只是了解倾向对比的类型还是远远不够的,我们需要在色轮上找到基本的配色公式,以及产生和谐色彩感受的基础方法。

 五:配色公式 

1、相邻色

相邻色是指在色轮上任意选取一个颜色,它的左右两边的颜色与它组合,形成的配色方案,这种配色色域幅度较小,色彩之间互相包含,形成的视觉感受和谐而平静


选中搭配的颜色后可以提高和降低明度与纯度再相邻的颜色进行搭配,从而呈现更丰富的配色类型与方案(以下的配色公式均适用)。


相邻色的配色画面呈现的感官较保守,和谐性大于侵略性,画面较温润

2、互补色

我们常说成的对比色(也叫互补色)是指在色轮上任意选取一个颜色,他的正对面的颜色与它组合,形成的配色方案。这种配色彼此之间完全不包含彼此成分,所以形成的视觉感受强烈而激荡

互补色的配色画面呈现的感官冲突大,有很强的对比性,形成了非常活跃色彩感受。


3、分裂互补色

我们常说成的分补色(也叫分裂互补色)是指在色轮上任意选取一个颜色,他的正对面的颜色两旁的色彩与它组合,形成的配色方案。这种配色冲突的成分之中又孕育着彼此的关连,所以视觉感受平和中略带激荡


互补色的配色画面呈现的感官冲突大,有很强的对比性,形成了非常活跃色彩感受。


4、三元色

三元色指在色轮上用一个等边三角形选取三个颜色,形成的配色方案。这种配色冲突的成分适中色彩变化丰富,视觉感受独立而鲜艳且彼此之中相互渗透



三元色的配色画面呈现的感官冲突强烈且平稳,色彩之间独立鲜明,形成非常

活跃感受的色彩。



5、四元色

四元色指在色轮上用一个1:2长方形选取四个颜色,形成的配色方案。这种配色冲突的成分两两对立,各自的阵营又互为补充,色彩变化丰富,视觉感受对比强而醒目彼此之中相互补充



四元色的配色画面呈现的感官冲突大,有很强的对比性,各自阵营又有临近色辅助,形成了非常活跃且丰富的色彩感受。



其实这些配色公式很容易让人觉得是非常繁琐的,但仔细思考还是非常有逻辑的,而且从宏观的角度去看似乎用色相来去创造搭配也只有这几种大的配色方向,但是同学们也会发现事实上这些色相虽然有深有浅,但却没有包含黑色,白色,灰色,当你把黑色灰色白色和这些组合混合在一起效果又是另一种状况。

你能看出以下色彩搭配的逻辑吗?

 六、色彩分布 

当我们解开色彩搭配的奥秘后还有很重要的一个环节,那就是如何将看着舒服的色彩分配到设计的人物身上。

今天的分享就到这啦~ 本期知识点你get到多少?建议收藏文章,仔细阅读和实操,用处很大!


更多教程类的文章,可如下图在后台回复【教程】获取数十个干货~

本文主要是分享冯伟老师的两个实用教程,冯伟老师的作品,可如下图在后台搜索【冯伟】获取

-END-

声明  文中所有图片作品版权归原作者所有仅供分享交流不作商业用途。商务合作微信:Seven-game

本文来自微信公众号“七点GAME”(ID:SEVEN-7GAME)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。