说起配色,相信大多数设计师都感到很头疼,这是因为颜色数量千千万,感觉无从下手,很多人在制作作品时只凭着自己的感觉进行搭配,最后的效果当然不是自己想要的。
关于颜色,一些基本概念如什么是色环、色相,相信大家都有了解(需要温习的同学可参考课后的拓展资料),这节课就不作赘述,本次课主要讲一些简单的规律与建议,希望能给大家一些启发。
一、案例分析
案例1:招生类海报
◎问题分析
- 颜色运用过多,仅一个标题就用了5个颜色,加上装饰图片、背景条纹的颜颜色运用过多。饱和度也有些偏高,因此让整体看起来没有重点;
- 用户作品:修改了背景颜色,替换标题文字与颜色,但整体颜色搭配不太和谐,文字识别性差;
◎修改思路
1)根据主题定主色调:由于该海报是面向少儿的美术招生主题,因此整体色调想走小清新、柔和的道路,可以选取绿色为主色调,选取黄色、橙色作为辅助色调,暗红色为点缀色让整体画面色彩有对比;删除原图中粉色、蓝色等颜色避免色彩过多让整体没有重点。
2)字体颜色好识别:
- 原作品标题颜色过多,由于主色调是绿色,因此标题选用深绿色,副标题选用同样的颜色作为衬底让标题部分更为整体;
- 原图中标题、白色衬底运用了中灰色的阴影,没有颜色倾向且颜色较重让整体看起来有些脏,因此修改时将题目与白色衬底的阴影修改为黄色,让整体色彩更加丰富不至于太过于单薄;
3)素材配色统一,修改原图中素材的颜色,如调整人物配图不和谐的颜色、修改装饰素材描边颜色为深绿色、修改地球绿色的明度及色相,修改素材颜色这步主要为了统一颜色;
最后,观察用户作品,发现所有用户都加上了logo和联系方式,因此左上角添加logo、底部留出联系方式的位置
◎效果对比
修改前 修改后
案例2:活动促销类海报
◎问题分析
- 原作品主题为母婴促销,背景却选用深紫色,主题与颜色不太搭配;
- 紫色背景搭配黑色字体,识别性较弱,且两个颜色搭配起来不够通透,让画面有些沉闷;
- 紫色背景搭配红底logo有些冲突感。
◎修改思路
1)根据主题定主色调:首先由于该海报是面向婴幼儿的母婴主题,因此整体色调选择了浅蓝色,与母婴主题更加契合;
2)字体颜色调整:字体颜色选择饱和度较高的蓝色和白色,蓝色与主色调一致且饱和度较高给画面添加亮点,白色与背景浅蓝搭配让整体感觉更加柔和;
3)素材配色统一:
- 背景添加一些白云充实画面,也让背景颜色富有变化;
- 为统一整体颜色,将原人物照片调整偏蓝粉一些与背景搭配的更为和谐;
- logo红底删去,logo本身选用白色,为防止识别性差,添加蓝灰色投影。
◎效果对比
修改前 修改后
二、常见配色问题总结
1、招生类海报:同一版面运用过多颜色
该类海报是颜色滥用的重灾区,尤其是美术教育、幼儿园招生这两个品类,画面颜色过多达到7、8个之多,颜色使用过多会使版面看起来过于杂乱没有重点。
2、活动促销类海报:颜色搭配不和谐
- 主题与颜色不太适合;
- 版面中标题与正文文字颜色与背景颜色搭配不佳,造成识别性差等后果。
3、招聘类海报:颜色过于跳跃
为表现出招聘类积极活泼的特点,经常会出现画面中某个颜色过于鲜艳的问题,而其他颜色没有搭配好导致有的颜色饱和度过高有的饱和度太低,整体看起来不是很和谐。
三、配色规律与建议
1、尽量减少同一版面内颜色的数量。
版面中颜色数量越多,越考验设计师搭配颜色的功底,因此在制作作品时,可将画面整体颜色控制在3种以内,其中黑白灰作为无彩色不包含在3个之内,同时同一色系也可算作一种颜色。
反面案例:
2、版面中饱和度偏高的颜色尽量不要拉满,且饱和度高的颜色面积一定不能过大。
一些画面中的颜色我们看起来虽然很亮,但其实饱和度并没有那么高,即使饱和度拉满也一定要控制颜色面积,除了一些特定风格如抖音故障风、潮流风外饱和度无须调到最高,否则会给人刺眼、不舒服的感觉。
例如:
这幅作品我们乍一看感觉颜色搭配很鲜艳,但其实吸色来看发现除了面积很小的绿色格子,其他颜色的饱和度都没有自己想象的那么高。
3、颜色搭配时需考虑文字可识别性。
文字与背景颜色搭配的时候一定要考虑文字可识别性,比如两个低明度的颜色搭配或亮黄色搭配白色文字、亮蓝色搭配亮红色都会造成文字识别困难,需要避开这些搭配。
4、需根据制作的主题确定主色调。
主色调决定了画面给人的主要感受,因此在主色调的选择上大多选择与主题贴合的颜色,如食品类多选红黄等暖色调、母婴类多选蓝粉色、春节过年类多选红色……如选择与主题相去甚远的颜色有可能会造成主题不清晰、看起来不舒服的感觉。
例如:
食品类主题的海报选用暖色调为主色调,暖色有刺激食欲的作用,看起来食物更加诱人
科技类主题的海报多选暗色为背景,亮绿、亮蓝、亮紫色为点缀,给人科技感非常先进的感觉
母婴类主题多选用低饱和度低明度的蓝色、粉色、绿色、紫色等,整体色调比较清爽、柔和、舒适,与主题契合
四、模板配色方法提炼
通过观察上面的案例和用户的作品,我们可以看出用户在修改模板时几乎没有能力去修改背景、素材、字体等的配色,这说明了我们在需要在制作的时候就把颜色搭配好,这样用户修改出的作品效果才会好,用户作品完成率高才能增加我们模板的下载量。
那如何从一开始就让我们的模板在配色这块做到完美呢?我们总结了模板配色的6步法:
1、确定画面色相
首先需要根据画面要求确定画面色相冷暖是什么,例如上面提到的:
- 食物类主题的海报,由于食物给人温暖的感觉,因此可以选择整体画面为暖色调;
- 科技类主题的海报,多选暗色为背景,亮绿、亮蓝、亮紫色为点缀,给人科技感非常先进的感觉;
- 母婴类主题的海报,多选用低饱和度低明度的蓝色、粉色、绿色、紫色等,整体色调比较清爽、柔和,给人舒适的感觉。
2、确定画面主色调
这一步根据画面主体确定大的颜色,如画面主体是热腾腾的面包,背景可选用黄色,有激发人们食欲、购买欲的效果等。
3、确定画面副色
根据画面中主题确定副色,副色的颜色选择需与主题契合,副色的颜色可选择1~2种,数量不宜过多容易让整个画面变“花”。副色可运用到各种位置,例如标题、描边、文字等;
4、确定画面点缀色
我们在看很多优秀作品中会看到很多画面中会有非常小面积的点缀色,这块颜色的作用是添加整个画面层次感,运用好了会起到画龙点睛的效果。
5、调整颜色面积比例(60:30:10)
大致的配色完成后,我们需要调整颜色的面积比例。我们都听说过色彩的黄金法则60:30:10,这是一个很基本的法则,主色60%的比例,副色30%的比例,辅助色10%的比例,这个法则是黄金法则,在任何时间地方都是非常正确的,世界上很多最好的设计都脱不了这个法则。因此我们在制作的时候也需要记住调整颜色比例。
6、调整颜色明暗关系
简单来说,就是记住明暗关系的处理,背景暗前景亮,背景亮前景暗。同时需调整文字与背景的明暗对比,避免造成识别性差的后果。
大家可以尝试上边的配色方法做出更好的作品~不管有多少配色方法与理论知识,能配出好看颜色最好的的途径就是多多练习了。
五、资料推荐
1、配色网站的推荐:https://color.adobe.com/zh/create/color-wheel
2、颜色基础知识:《色彩浅淡》https://shimo.im/presentation/t0rRUBvHnHw8H4oR/