配色教程笔记之配色流程

来源:网络   作者:热心网友   发布时间:2017-06-15    浏览次数:157

一:配色流程


我们在做设计时,一般都是先确定版式,然后再调整配色。(可以先做成黑白稿,再配色)

刚开始的时候我也尝试过一边做版式一边做配色,很累,而且效率不高,最后可能全部推翻(血的教训)。所以说设计和绘画一样,不要一开始就抠细节。


流程:


cdf4591da18cb5b3086ed4cb5ebd.jpg

二:配色步骤拆分


1:调性分析

这个相当于项目分析,是非常重要的一步,如果这一步错了,那后面做的再怎么好都没用。比如说原始需求是要表现出强有力的感觉,而你表现出了小清新的感觉,那这个设计就不准确,因为没有达到设计的目的。


我们要先做正确的设计。

在开始设计一个东西时,我们的思维方式应该是:这个活动(或产品)应该用什么风格。而不是:这次设计我想用什么风格。因为你用什么设计风格别人并不关心,别人只关心这个设计达成的效果。所以说设计不要以自我为中心。

在做调性分析时,可以看一些竞品,或与本次设计调性相似的产品,从这些设计中得到灵感。


为什么配色也要找参考?

看了很多色彩教程之后,我以为我可以不看参考单靠分析去配色,结果发现参考还是很重要的…为什么呢?比如说要做促销广告,我们都知道暖色是促销的,橙色或红色都可以。但事实上大家去看网上的促销设计,不止橙色和红色,还有紫色黄色,很多种搭配。也就是说一个调性不止一个搭配。如果我们只是脑子里想想的话,不容易得出结论,所以还是找相关参考,相互比较再确定。(说不定会有自己没发现的惊喜,毕竟自己的配色水平没那么高)


2:确定主色

其实很多时候我都是主色辅助色一起确定的。主色的作用是烘托氛围,辅助色是为了平衡主色。(上一篇有说过,如果只有一种颜色的话人看了会疲劳)

TIPS:我们经常会有一种错觉,以为主色是我们需要突出的颜色,其实不是的,主色是面积最大的,用来烘托气氛。很多时候突出的颜色是辅助色。

就像下面这张图:主色是红色,但强调的却是黄色

5f05591daf1fa801216a3ed5bb72.jpg


3:确定辅助色

确定辅助色的方法有很多种,可以看参考,也可以自己通过色彩理论来确定。但是用这个色彩一定要说得出理由才行。比如说是用补色呢,还是用相似色?为什用这种颜色?如果是比较活泼的作品,那可以用补色,看是否能突出主题。(当然,这个阶段即使确定了辅助色,也不一定是最终的,这个后面的“调整阶段”是很重要的)


4:调整

确定主色和辅助色后,就进入到了调整阶段,这个阶段非常重要。

因为即使确定了主色和辅助色,你的画面也不一定好看(设计的使命就是,不仅要准确的设计,还需要设计的好看)

有句话相信大家都听说过:只有难看的搭配,没有难看的颜色。

举个栗子:

5eae591db4afa801216a3e020832.jpg



所以说如果你的配色不好看,千万不要怪主色选的不好,也不要怪辅助色,是你的搭配有问题…

再举个栗子:

809d591dbaeab5b3086ed45f72f6.jpg



那么如果觉得两个颜色在一起不好看,怎么去调整呢?

方法:

1:调整明度和饱和度

建议先调整其中一个的明度饱和度,因为一个画面不可能有两个主角,总得有一个人让一让 >_<< p="">

当然也可以两者同时调整。但两者同时调整时,要注意整个画面的调性是否会改变。就像上面的例子中,一不小心整个画面的调性就变了,双方同时变暗调时,就变得有质感了;双方同时变明调时,就变成小清新了。

4c2b591dba21a801216a3e4992a0.jpg

2:救场王:黑白灰

当你觉得两种或三种颜色配合的很好,但是总觉得画面有些别扭时,可以尝试使用黑白灰这些无色相的颜色,会给你带来意外的惊喜。


白色:很有透气感,简直屡试不爽。

33d8591e590ba801216a3e5ab398.jpg

b190591dc0d6b5b3086ed4ea029f.jpg

灰色:灰色也是一种很好用的颜色。当白色显得有些廉价时,那这个时候就可以加点灰度进去;当黑色显得沉重闭塞时,可以用灰色代替。(在UI设计中文字的颜色一般为#333333,很少有纯黑的,因为一大片纯黑很不自然且太压抑,带点灰度读起来不累。)


建议:如果调整颜色的时候觉得画面好像有点满了,或者需要一点客观的颜色,可以尝试黑白灰。

(下一篇我会整理一些经典的颜色搭配,还会再总结一些关于黑白灰的用法)


总结:(对自己的要求)

1:知识积累:配色的时候要多思考,这样配色才有方向,有效率,而不是瞎调,需要积累理论知识。

2:审美积累:只有多看作品,才知道什么叫好的配色,这是前提。

786f591e5df1b5b3086ed44cc6ae.jpg

联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/6053.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通