浅谈色彩功能——主色、副色、点缀色

设计 INFO院院长 50℃ 0评论
浅谈色彩功能——主色、副色、点缀色 图1
浅谈色彩功能——主色、副色、点缀色 图2
无论是设计作品还是大千世界,最容易使人获取信息且传递最快的往往是通过视觉,而其中最重要的一个因素就是色彩。色彩本身包含着各种不同的作用,虽然可以从不同的角度去分类,但是最基础的功能划分就是大家耳熟能详的主色、副色、点缀色,而掌握好色彩的功能划分必然会让你的配色过程保持思路清晰从而提高效率,并且使得设计作品日趋优秀,那么本期文章我们就来浅谈色彩的功能——主色、副色、点缀色。
往期回顾
浅谈色彩功能——主色、副色、点缀色 图3
http://www.zcool.com.cn/article/ZMTQwNTY0.html
时光总是在不经意中流逝,距离上一次谈及主色与副色的文章已经过去了两年时间,感兴趣的同学可以去温习一下,而这篇文章可以算是一个补充和升级版,通过对这两篇文章的综合学习,相信你一定会掌握好如何利用色彩的功能去配色这一思路。主色与副色这篇文章是两年前在站酷网更新的,感兴趣的同学可以复制图片下方的网址链接,到站酷网阅读。

浅谈色彩功能——主色、副色、点缀色 图4
任何一个设计版面中通常都要有一个最主要和突出的颜色作为画面的主角,其他作为辅助或衬托的颜色则会作为配角按照各自关系和强度呈现,而这个在色彩中占据主角地位的我们就称之为主色。
浅谈色彩功能——主色、副色、点缀色 图5
浅谈色彩功能——主色、副色、点缀色 图6
浅谈色彩功能——主色、副色、点缀色 图7
浅谈色彩功能——主色、副色、点缀色 图8
浅谈色彩功能——主色、副色、点缀色 图9
浅谈色彩功能——主色、副色、点缀色 图10
我们用饱和度高的青色和明度高的黄色来举例,在二者面积相等的情况下,饱和度高的青色会显得重一些、力量更大一些。
浅谈色彩功能——主色、副色、点缀色 图11
当我们扩大黄颜色的面积时,按照面积原理黄色将作为主色,但是需要注意当明度高的颜色作为主色时画面会产生不稳定感,会受到饱和度高的颜色的干扰。
浅谈色彩功能——主色、副色、点缀色 图12
相反我们将饱和度高的青色面积放大,这样就可以起到稳定画面的效果,而黄色便自然而然的成为了副色。
浅谈色彩功能——主色、副色、点缀色 图13
而当两种颜色的基调相同时那么所占的面积就起决定作用了,毋庸置疑谁的面积大谁就是主色。这些技巧都是需要在实际应用中注意的。
浅谈色彩功能——主色、副色、点缀色 图14
设计中的主色就好比人的面貌,是区别人与人的重要因素,同时也影响带给他人的第一印象,因此主色的确定可以为设计奠定一个基调,这个基调也影响着作品所要传达的信息和风格。而主色在色彩非常鲜明的情况下也可以起到吸引眼球的作用。
浅谈色彩功能——主色、副色、点缀色 图15
浅谈色彩功能——主色、副色、点缀色 图16
浅谈色彩功能——主色、副色、点缀色 图17
浅谈色彩功能——主色、副色、点缀色 图18
当两种颜色处于力量感相当的情况时,会让人很难判断出究竟谁才是主色,对于这一点其实没有必要纠结,因为色彩是应用科学而非理论科学,设计亦是如此,色彩本身就是主观和客观相结合的产物,每个人对色彩的感受都各不相同,对色彩的敏感度也就不一样。这里给大家提供一个参考:哪种颜色最先进入你的视野、给你感官的刺激最大或者当你的视线离开时脑海中最先回忆起哪个颜色,那么对你来说它就是主色。
浅谈色彩功能——主色、副色、点缀色 图19
在学习副色之前我们需要为大家阐述一个原则性问题,如果在一个设计当中只用一种颜色就能够完美呈现所要传达的效果,那么其实也就没有必要添加任何其他辅助色彩了,但是这只是过于理论化的东西,因为毕竟单色会给人单调的印象,除非你的设计有此特殊需求。
浅谈色彩功能——主色、副色、点缀色 图20
浅谈色彩功能——主色、副色、点缀色 图21
浅谈色彩功能——主色、副色、点缀色 图22
浅谈色彩功能——主色、副色、点缀色 图23
浅谈色彩功能——主色、副色、点缀色 图24
在设计当中,副色最主要的作用就是突出主色以及更好的体现主色的优点,在完成传达信息的同时又使得整个画面更加饱满。副色在强调和突出主色的同时,也必须符合设计所需要传达的风格,如此才能最大化的体现出副色的作用和意义。
浅谈色彩功能——主色、副色、点缀色 图25
浅谈色彩功能——主色、副色、点缀色 图26
浅谈色彩功能——主色、副色、点缀色 图27
浅谈色彩功能——主色、副色、点缀色 图28
从点缀色的名称上就不难理解点缀色就是为了点缀画面而存在的,和副色一样,点缀色可以是一种色彩也可以是多种色彩,但是不及副色对主色作用那么强,点缀色可以装饰版面并为画面增添丰富的效果。
浅谈色彩功能——主色、副色、点缀色 图29
浅谈色彩功能——主色、副色、点缀色 图30
浅谈色彩功能——主色、副色、点缀色 图31
浅谈色彩功能——主色、副色、点缀色 图32
浅谈色彩功能——主色、副色、点缀色 图33
点缀色的特点主要是面积小、色相清晰、醒目突出,由于点缀色自身的特点所决定它的功能通常体现在细节上,对于配色有如画龙点睛的作用,可以使得整个画面的效果更加生动不呆板,而针对文字信息量较大的版面,点缀色可以起到引导阅读的作用。
浅谈色彩功能——主色、副色、点缀色 图34
浅谈色彩功能——主色、副色、点缀色 图35
浅谈色彩功能——主色、副色、点缀色 图36
浅谈色彩功能——主色、副色、点缀色 图37
当你在进行实际的色彩分析中你会发现并不是所有的设计都能套用主色、副色、点缀色的色彩功能去划分,这是因为主色、副色、点缀色主要是基于三色配色或者多于三色的情况,并且你也会发现当我们在分析主色、副色、点缀色时并没有一个绝对的固定标准,往往是从不同角度思考综合考量的结果。总之对于主色、副色、点缀色的划分并不需要严丝合缝,在分析他人作品时做到心中有数就可以了,最重要的还是在设计中如何去运用。
浅谈色彩功能——主色、副色、点缀色 图38
了解了什么是主色、副色、点缀色以及它们的功能之后就需要开始在设计中实际应用了,如果在配色的过程中能够保持思路清晰,那么在具体选择颜色上就再简单不过了,比如我们之前文章中提到过的从图片上吸取颜色或者从配色网站上寻找搭配好的色彩,再或者借鉴优秀设计作品中所使用的色彩等等,总之方法有很多,但是关键在于选择的颜色要符合你的设计所要传达的气质。
浅谈色彩功能——主色、副色、点缀色 图39
浅谈色彩功能——主色、副色、点缀色 图40
* 案例信息为模拟信息,不具备任何实际效应和用途
浅谈色彩功能——主色、副色、点缀色 图41
根据文案信息,我们提取“思贤师心”四个字竖排放大作为画面主体,由于展览的主题是比较偏向文化类的,因此选择一款宋体比较贴合整体风格,然后对主标题进行加工刻画,这里我们添加了肌理和斑驳效果。
浅谈色彩功能——主色、副色、点缀色 图42
为了使主体更加具有变化和效果,这里我们通过笔划替换的技法来继续刻画主体。根据文案内容我们选择了具有中国传统文化特色的素材来替换笔划。
浅谈色彩功能——主色、副色、点缀色 图43
将刻画好的文字主体置入到版面当中,然后确定好所占的位置,将其余文字信息依照层级关系编排到版面中,排版部分到此基本就完成了。
浅谈色彩功能——主色、副色、点缀色 图44
浅谈色彩功能——主色、副色、点缀色 图45
版面确定了之后就要进行填充颜色了,首先需要为画面确定主色,针对于这个版面而言确定主色大致有两种方式,一是通过填充大面积背景色;二是通过填充大量文字色,由于这里我们想突出强调文字信息,因此我们选择第二种确定主色的方式。而这里的主色我们选择的是色调较深的蓝色,因为暗色调具有认真、朴实、沉着等特性,蓝色具有理智、知性、公正等特性,两者相结合与文案的风格相搭配。
浅谈色彩功能——主色、副色、点缀色 图46
浅谈色彩功能——主色、副色、点缀色 图47
确定了主色之后我们就需要为主色添加辅助它的副色了,当我们确定以文字色为主色时,那么背景色的选择就需要特别注意了,也就是我们俗称的不能抢了主色的“风头”,因此选择同色相的颜色是比较安全的做法,这里我们选择的是淡蓝色,可以传递出雅致的感觉。当然本文中的案例所使用的主色、副色、点缀色都不是一定的,你在设计中具体使用什么颜色是由你自己决定的,这里教给你的是思路和方法,为了照顾一些基础薄弱的同学帮助他们理解,在此说明一下。
浅谈色彩功能——主色、副色、点缀色 图48
浅谈色彩功能——主色、副色、点缀色 图49
如果感觉整个版面的色彩有些平淡,那么就可以考虑使用点缀色,这里我们想突出“免费入场”以及时间的信息,因此我们在二者之上使用点缀色,需要注意点缀色的色彩尽量要明显一些,不能过于平淡。
浅谈色彩功能——主色、副色、点缀色 图50
如果想让整个版面的感觉更灵动,那么还可以通过添加无彩色来调和,这里我们通过画笔为背景涂抹一些白色,使得版面更加透气,这个案例就制作完成了。这个案例在配色部分相对来说比较简单,相信大家都能够很好的理解,那么接下来的案例我们添加了图片元素,仍然也可以运用这个方法去配色。
浅谈色彩功能——主色、副色、点缀色 图51
浅谈色彩功能——主色、副色、点缀色 图52
* 案例信息为模拟信息,不具备任何实际效应和用途
浅谈色彩功能——主色、副色、点缀色 图53
这个案例中含有图片元素,因此第一步先将图片置入到版面当中,由于图片自身的缺陷,这里我们只能将图片贴近靠左或者靠右的边缘以规避。
浅谈色彩功能——主色、副色、点缀色 图54
将文字信息编排到版面当中,然后依据网格大致约束一下位置,版面确定了之后接下来就开始填充颜色了。
浅谈色彩功能——主色、副色、点缀色 图55
由于图片本身带有色彩,因此在配色之前先要对图片的色彩进行分析,比较简单的一种提取方式就是将图片马赛克处理,然后提取大致的色彩倾向。图片的色彩通常不会很纯粹,大多数情况下都是以色调的形式存在而非具体某一颜色,提取出来的颜色在配色时是需要考虑的,也可以直接调整后使用。
浅谈色彩功能——主色、副色、点缀色 图56
浅谈色彩功能——主色、副色、点缀色 图57
这里为了整个版面配色的和谐,所以我们直接使用从图片中提取的颜色,通过尝试你会发现如果使用图片中面积最大的颜色来作为主色填充背景的话那么会造成图片与背景的颜色拉不开层次,使得图片的色彩不够突出。因此使用图片中较小面积的蓝色然后通过调整饱和度和明度来作为版面的主色。
浅谈色彩功能——主色、副色、点缀色 图58
浅谈色彩功能——主色、副色、点缀色 图59
主色确定之后开始填充副色,如果这个版面中文字全部使用一种颜色虽然可以作为副色,但是这里有一个问题就是图片的不完整性就会暴露,但是我们又不想改变版式,这时就可以在图片下方添加色块然后填充颜色作为画面的副色。副色的选择仍然是从图片中提取出来的蓝色的对比色黄色,因为主色蓝色和副色黄色在面积上存在着主次关系,因此既有对比又有统一。
浅谈色彩功能——主色、副色、点缀色 图60
浅谈色彩功能——主色、副色、点缀色 图61
整个设计的过程到此基本可以了,文字的部分不建议添加有彩色,因为图片本身就有很多色彩了,过多的色彩会使画面凌乱,所以文字最好使用无彩色来调和画面,理论上黑色和白色都是可以的,具体的还要看设计者想要传达给受众什么样的感受,黑色会凸显文字,白色会显得轻快。那么整个画面主色是蓝色,副色是黄色和图片中大面积的棕色和肉色,假如下方的色块使用的不是黄色而是其他颜色的话,那么人物中的黄色为点缀色,所以色彩的功能也是可以切换角色的,并非固定不变。
浅谈色彩功能——主色、副色、点缀色 图62
通过对优秀设计中色彩功能的分析以及实际案例的演示,相信大家很容易理解关于主色、副色、点缀色的用法,而分析优秀作品的颜色最重要的一点就是色彩面积的使用,相信大家也或多或少听过关于主色、副色、点缀色面积的比例一说,但是这终究是理论化的东西,所以文章中我们并没有给出具体的比例,因为在设计中存在着许多色彩因素,并不能像数学一样去具体测量,只要掌握好大概就可以了。并且从色彩的功能角度出发去配色也不是唯一的配色思路,但是你可以把它作为第一步,然后通过学习色彩的其他知识,最后综合运用才能达到炉火纯青的地步。如果本期文章能够为你带来些许帮助,那么请记得点赞呦!
浅谈色彩功能——主色、副色、点缀色 图63

转载请注明:INFO院 » 浅谈色彩功能——主色、副色、点缀色

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址