当前位置:首页>>网站制作>>配色方案>>正文

实战简单图片配色讲解设计配色技巧

2018-08-16T12:24:14 来源:站酷 作者:Tommy子言

设计是为品牌服务的。关于为品牌服务一般有两种情况,一是“服务的品牌”,即你在为“他人的品牌”服务;二是“个人的品牌”,即你正在打造属于自己的个人品牌。

一般情况下,服务“他人的品牌”需要做的是提升该品牌的价值和产品的销量,你需要根据品牌原有的VI风格进行配色,或根据要求打造一种品牌配色;而打造“个人品牌”则需要思考打造这个品牌的目的是什么,比如说提升个人影响力、实现自我价值或者为创业、面试铺路等,这就需要想清楚你要做什么风格的品牌,再进行配色。

作为设计师,色彩的运用真的是至关重要,色彩是设计师永远的话题。如果想得心应手地运用色彩,你的心中需要有一个色环。色环就是在彩色光谱中所见的长条形色彩序列,将其首尾连接在一起形成一个圆形,使红色连接到另一端的紫色,色环是由红、橙、黄、绿、蓝、紫六种色彩渐变连接而成。

通过图片的简单配色讲解设计配色技巧

配色实战:一张图片的简单配色

通过图片的简单配色讲解设计配色技巧

以上所见是一个还未进行配色的六宫格草图(白模),很多设计师在做这种作品的时候,经常是将别人作品的颜色直接复制粘贴来做,但其实你也可以参考下我以下的分析,看看我是如何做配色的。方法十分的简单,希望对大家有所启发。

1、配色的分析:为何而做?

如果是“服务的品牌”,那就根据该品牌原有或具体要求的配色风格,来做配色即可。而以下的案例完全是我的 “个人的品牌”,我要突出的案例主题是“梦想”,因此没有太多的条条框框限制,纯粹是做我感兴趣的、符合我个人风格的作品。

2、配色的执行:寻找主次辅、设计主次辅

“方块理论”是我原创的设计理论,要学好它,只需学会两点:寻找主次辅、设计主次辅。而这个理论在配色中同样适用。

由于该案例的主题是“DREAM(梦想)”,那么,首先我为这个主题定义了关键词,并且在心中形成一个色环。“自由”(蓝色)、“有趣”(粉色) 、“阳光”(橙色)、“草地”(绿色)等。同理,你也可以根据心中的主题,自由定义作品的关键词哦。

1) 字母D

我们从字母D开始说吧。在这里我采用关键词联想法:“自由”让你联想到什么呢?我想到的是蓝色。然后再思考“蓝色”的情侣色是什么颜色?是红色。但是红色是比较正统的颜色,为了使颜色更有趣,我把红色改为粉红色(当然你也可以发挥你的想象,为你定义的关键词找到合适的配色)。

通过图片的简单配色讲解设计配色技巧

配色的主次辅解析:字母D中,(主)色调是蓝色,(次)色调是粉红色。

2) 字母R

这里可以同时使用关键词联想法和呼应法。这里我选的是“阳光”,阳光很明显是跟黄色相关的,因此主色调是黄色,如果是需要跟“天空”结合,那么就选蓝色作为次色调,也可以加入一些有趣的元素,我选择粉红色。

通过图片的简单配色讲解设计配色技巧

配色的主次辅解析:字母R的(主)色调是黄色,(次)色调是蓝色和粉红色,而蓝色与粉红色刚好跟之前的字母D是相呼应的。

3) 字母E

这里同样可以同时使用关键词联想法和呼应法。根据色环,黄色的近邻色是橙色和绿色。为了给画面的颜色层次增加一些细节,我们可以增加辅助的颜色,比如说绿色是中性色调,紫色也是中性色调,加入一点点的紫色会使画面看起来更舒服,但不会喧宾夺主。

此外,在画面中可以装载很多图形,这些图形所占的面积不大,因此可以用不同的颜色少量点缀,如画面所见的红色、蓝色、橙色、绿色、黄色等,都是与主题相呼应的。

通过图片的简单配色讲解设计配色技巧

配色的主次辅解析:(主)色调是橙色,(次)色调是绿色、(辅)助的颜色是紫色和各种小量点缀的颜色。

4) 字母A

根据呼应法橙色和绿色的近邻色是黄色,黄色跟红色也是近邻色的关系,而橙色是两者中的过度颜色。

通过图片的简单配色讲解设计配色技巧

配色的主次辅解析:(主)色调是黄色,(次)色调是红色,再少量加入黄色的近邻色绿色、以及红色的情侣色蓝色作为(辅)助的点缀。

5)字母M

最后一个字母,希望其感觉是比较有趣比较酷的,因此使用了高级黑作为主色调。

通过图片的简单配色讲解设计配色技巧

配色的主次辅解析:(高级)黑色是万能的颜色,跟任何颜色相配都可以。于是选择了黑色作为(主)色调,而跟关键词“有趣”相配的粉红色作为(次)色调,然后再选择跟“阳光”相配的黄色、跟“自由”相配的蓝色、跟“草地”相配的绿色作为(辅)助色互相呼应,让画面更为丰富。

加分题

除了需要关键字联想法和呼应法之外,如果想作品更加具有设计感,还需要配合整体的排版。以下画面配色完成后是一个六宫格(图1),感觉有点单调,而我们可以试着把它改成九宫格,并配合一定的排版(图2)。作品的设计感就出来了。

通过图片的简单配色讲解设计配色技巧

图1(配色完成效果,非最终排版效果)

通过图片的简单配色讲解设计配色技巧

图2(最终排版效果),出自2017年的《种梦年度总结:精选作品合集》

题外话:如何为一张“贴图”做的简单配色

通过图片的简单配色讲解设计配色技巧

在做创作练习时,我们有时候会找一些颜色丰富的图片,如果我们把其作为材质的贴图,那我们应该如何为一张“贴图”做简单配色呢?

其实方法也很简单,场景搭建及材质贴图完成后,我们可以从这个颜色丰富的贴图中找其中一些合适的配色作为呼应,如粉色、蓝色、黄色,小面积的使用,不会打乱整个画面的风格,而为了整体氛围的烘托,我们可以使用发光材质。关于C4D灯光、材质、渲染的技巧可以查看我之前所写的相关文章。以上就是一些常用的配色基本思路。

通过图片的简单配色讲解设计配色技巧

总结

在给作品配色的时候,很多人都会脑袋里一片空白,不知该采用什么配色方案,在这时候,先思考为何而做(到底是服务的品牌还是个人的品牌),然后心中要有一个色环,通过色环确定主色调。一切就变得简单了。

另外,你需要清楚地了解,无论是一套作品、还是一张图片,它们的配色都是有主次辅的。我们可以通过关键词联想法和呼应法来完成这个作品。最后希望大家学会独立思考,举一反三,当然记得多练习。