设计师必须要学习的高级配色技法

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:未知   作者:西瓜的设计

关键词

一篇关于如何配色的技巧流程,帮助大家更好的进行创意配色,并使用自己喜欢的色彩。

大家好,我是西瓜,这次和大家分享一个我之前多次使用的一种配色技巧,只要同学们跟着练习,并且多去尝试与操练几次,就会摸清这种技法的规律。

我在之前写过一篇关于配色理论的文章《色彩设计的原理》,那篇文章里我主要讲解的其实是关于色彩原理的东西,几乎文章内容的90%都是在讲最基础的色彩知识,,如果有同学没看过的,我建议去浏览一遍;虽说不是什么实战性的技法,但对于了解与理解色彩根本还是有根大用处的,那里面主要的色彩属性定位就是HSL,也就是色相、纯度、明度,这篇文章的技法也就是和HSL挂钩的。

设计师必须要学习的高级配色技法

我这简单讲之前HSL是什么,阐述一下,然后我们就开始实战技巧。

H就是“色相”:所谓“色相”,指的就是像红色或者蓝色这些色调的称呼,也就是它们的面相,在刚才我说的“曼塞尔色系”的理论(色轮)中,一共会有10种基础色相;

S是“纯度”:是指色彩鲜明的程度,比如:“鲜艳的颜色”、“暗沉的颜色”,这种表达方式就是纯度的意思,按照逻辑那么就是越鲜艳的纯度就越高,越暗沉的纯度也就越低。色轮中,无论是哪种颜色,只要它纯度越低,就一定越接近灰色;

L是“明度”:是指色彩的明亮程度,和纯度一样,也是以高和低表示。明度最高是白色,相反,最低是黑色;

好,知道了HSL是什么,我们就可以开始了。

一、设置颜色的HSL

这里指的设置其实就是选定,我们接下来所有的软件操作案例都使用Sketch为基础,在你Sketch打开后,先画一个圆形,然后打开你的圆形填充拾色器,你就看到当前圆形的基础色了;然后你需要做的第一步就是修改拾色器下方的RGB改为HSL,修改完后,对应匹配的数值,就是当前圆形色彩的色相、纯度、明度。

设计师必须要学习的高级配色技法

二、随机选色,确定主色

接下来是随机选色,这一步比较简单,意思就是在拾色器里找一个你认为好看的颜色,就这样;不过需要提点你的是,选定的颜色尽量不要是偏黑、偏灰的颜色,这是因为我们后期的色彩都是需要根据当前色彩去进行延伸的。

设计师必须要学习的高级配色技法

三、改变L数值,衍生横向色值组合

当你选完基础的颜色后,接下来,我们就要开始在L(色彩明度)身上做点文章了,你可以先将刚才画好的圆复制10份,这样我们就以一个一个的进行L(明度)修改了;这里需要开始注意了,我们10份圆形的颜色是不一样的,在保持HS不变的基础下,L是以正反“+”和“-”进行过度的。

举例说明一下:当前色彩为蓝色,L的明度为57,我们需要正反“+”、“-”各10下,“+”得出67、77、87、97,翻过来“-”得出47、37、27、17、7,这样一来,我们就一共得到了10个色相和纯度一样,但明度不一样的色卡了。

设计师必须要学习的高级配色技法

四、H值的延伸,寻找新的色相

接下来,我们开始改变H(色相)的值,我想到这里的同学应该有点感触了是么,只要H(色相)这边一修改,就会得到第二种新的色卡了;但是,随意拖动H数值是错误的手法,正确做法是依然在色相数值的基础上“+”“-”增加10或减少10下,也可累计,这里我+30,得出的色卡就是新的色彩基础了。

设计师必须要学习的高级配色技法

 收藏