5

大神级的配色指南,轻松配出高级感

 3 years ago
source link: https://www.shejidaren.com/gaojigan-peise.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

前言:设计师你有没有常常因为配色问题头疼,色感把握不准,觉得 配色水平难以提升 。很多设计师往往是通过自己的直觉或者反复的实验来确定最终的色彩方案,当然,这种方法需要设计师有良好的色彩感觉也比较费时费力。其实 配色 看似复杂,但并不神秘。今天分享的配色经验,让你轻松配出高级感的色彩。文末还为大家准备了各种配色资源,不要错过哦。

FruE3eN.jpg!mobile

一、色彩基础

为什么我配的色彩 就是没那个味儿?

mei na ge wei er

眼高手低 是在成长过程中, 很常见 的一个阶段。看着 别人的配色 或者是 高级的作品 ,经常感觉自己也能搭配出这样的,但自己一动手,才发现怎么调都调不出别人那个味儿。其实这很正常,主要还是 缺乏经验与方法 的体现。那么有哪些方法,可以提升配色基础的?

要想搭配出 好看的颜色 ,我们得先来分析一下,

什么是 高级 的色彩,什么是不高级的色彩。

看图感受比较直观,咱们先感受下面两组案例:

FRZ7Vba.jpg!mobile

如果感觉差别不大,可以再感受两组:

7fq2e2V.jpg!mobile

通过看图对比,是不是发现了什么?

比如 不高级的配色 组合,往往 颜色种类多 ,且 饱和度较高 ,比较刺眼,而 高级的配色 组合,往往 颜色简洁分明 ,不会混搭太多其它的色彩。

接下来,咱们就来归纳一下,高级的 颜色搭配 ,会有 哪些特征

1)饱和度 小于90%

打开 HSB取色器 ,我们发现颜色 有三个梯度 ,一个是 色相 ,另外两个交叉融合的,则就是 明度与饱和度

这个饱和度,也就是HSB里的 S值。 S数值越高,相应出来的 颜色就越鲜艳

MZfYfy7.jpg!mobile

而那些 越鲜艳的颜色 ,特别是组合起来的时候,往往越给人 不高级 的感受,

比如感受一下下面这波 辣眼睛的组合

FzEbyim.jpg!mobile

那么为什么这些颜色,我们会觉得土?

我也分析了一下, 一方面原因 是我们已经养成了一种 认知习惯 ,越 廉价的物品 ,颜色越 鲜艳 ,正因为这些鲜艳的颜色,你才能注意到它。而高级的物品,或者是色彩,是不需要依靠颜色来吸引你的,它的价值并不需要过多的衬托,比如下面这幅场景。

Q7NR3eA.jpg!mobile

往往 越高级的色彩 ,颜色的 浓艳程度反而越低

大家可以看看 无印良品 的设计,是不是基本上都是 低饱和度 的产品,甚至连店铺里降价的Sale标签也是。

uYZVbuQ.jpg!mobile

第二个原因,是归功于几千年物种进化大自然积累的结果。

颜色鲜艳 的物品,会让我们先天性的 感到警惕 ,注意力过于集中,因为在自然界这可能代表着危险的信号。虽然我们现在已经不需要为此感到担心害怕,但潜意识里,总会有这样的反射条件存在。

因此那些 低饱和的颜色 ,更能让我们 感受到安全 ,更舒适更放心。

比如这几组 Google智能音箱的广告图,就很高级,颜色温和很舒适。

rmEFRfe.jpg!mobile

AfiyQbB.jpg!mobile

2)色相 不超过3种

除了颜色不宜过于饱和,颜色的种类也不宜过多。这里的种类指的是 色相 ,泛指色彩的样貌,比如 红橙黄绿青蓝紫 ,这些都是不同的色相。

eAZnum.jpg!mobile

作品中的色相越多, 视觉越花哨 ,我们欣赏起来其实也会越困难,因为大脑需要 花更多的时间来理解 这些色彩。另外颜色的分散也会起到 噪点作用 ,五花斑斓的色彩,会让 信息的噪点 呈几何倍数的增加。

如果你对 色彩噪点 的掌控力度还没到专家级,那么无妨试试 色相减少 一些, 控制在3种以内

immMRz.jpg!mobile

比如下面这几组作品,色相就控制的 合理 ,除了绿色跟黑色及过渡的灰色,很难再看到其它颜色的影子,看起来 非常的舒适。

3euA32Y.jpg!mobile

aQR3ea.jpg!mobile

3)主次分明 层级关系清晰

除了饱和度与色相,色彩的 层次关系 同样非常重要。这个层次主要体现在两个方面,一个方面是 颜色明度的进阶 ,不同的颜色明度,会让页面更 具备空间感

另外一个则是主色与次色的 比例 ,通常次色的面积 <主色的70% ,比如主色在画面里一共占用了 100px 的面积,那么次色就不能大于 70px避免喧宾夺主

aUz2QfI.jpg!mobile

如果一副画面里面的 色彩 ,没有 主次之分 ,就好比一部电影里没有主角,全部都是配角,索然无味。而有了主次,马上层级关系就会清晰明了。

比如下面这幅作品, 大面积的奶白色 ,搭配了一个 小面积的蛋黄色 ,没有太多过于干扰性质的颜色。

uqqmMvF.jpg!mobile

我们可以尝试利用 主色与次色 对信息做区隔,同时 配合明度的变化 ,来克制页面色相的数量,让画面更具有节奏感与空间感。

不信大家可以试试 把自己绘制的界 ,用下面我提供的 这套色板去配 ,同时页面不能再有其它颜色,看看是不是会 精致许多

bQviIfb.jpg!mobile

二、如何提升

我怎么样才能 成为配色大神?

how we are

上面咱们解析了, 高级感颜色 具备了哪些 特征

根据这些特征,我们就能基础了解色彩的一些误区,避免踩雷。

Inq6J3r.jpg!mobile

下面,我就来给大家讲讲,我们在 日常工作干活 中,用哪些方法,可以快速提升自己的 配色动手能力 的。

1)吸色 大法

虽然这个操作很简单,但这是最实用的方法了。吸别人的 颜色 ,可以说这是 最入门的操作 了,不用觉得羞耻,也不用觉得这是在抄袭,这就好比我们在小的时候,刚学写字,也是从 临摹开始

站在 巨人的肩膀 上,怎么说也不会比别人矮太多如果感觉自己配色一直不长进,那么不妨先去吸一些 配色特别好的作品 开始。

比如下面这几组作品的配色,我们在练习的时候,都可以吸吸看~~

neI3YrA.jpg!mobile

yAbqaqa.jpg!mobile

事实上,当你吸多了后,慢慢摸索,就会 总结出 一些 客观规律 的,比如经典的 红黄 怎么搭, 蓝紫 怎么搭,又或者是 黑金 怎么搭,慢慢你都会掌握。

NfIf2qn.jpg!mobile

不过要注意的是, 审美 还是要有的,起码 吸的作品要足够高级 ,不能太次,这样你借鉴才能学到点啥。如果你的 色彩基础 不是很好,我真的很建议你先吸一吸 潘通的基础色。

因为 潘通的颜色 ,确实每一个都是经过 精挑细选 的,作为新人,你吸 潘通的颜色 总不会错。比如我也经常喜欢吸这套潘通色板里的颜色!

NjMZN3y.jpg!mobile

包括今天 封面的这个配色 ,其实我也是用了这 套潘通色卡 里面的 Cyber Yellow ,非常的 干净明亮,有活力!

AZ3myu7.jpg!mobile

知道你们肯定也想要我收藏的这套 潘通色卡JPG合集 ,不要慌,我肯定会分享给大家, 先把文章看完,下载地址就在文末。

2)多收藏 优秀色板

还记得之前给大家分享过几个 搭配色板的网址 ,虽然很全,但打开总是有点麻烦。我更建议大家平时可以自己去收藏一些色板的图片 存在本地 ,这样没有 配色灵感 的时候,就直接去打开文件夹 找找色板 ,说不定会带来新的启发。

zQb6ZfV.jpg!mobile

比如我收藏的这几组 png ,日常就存在电脑的文件夹里,有需要就可以 多打开看看

AVVzyiI.jpg!mobile

N3ERNj7.jpg!mobile

这两张就是我的收藏夹里,还不错的两张(文末有我收藏夹的下载地址)。大家日常也可以收藏一些 自己喜欢的色板 ,这样说不哪一天 找灵感 的时候,就能用上。

3)多收藏 好看的图片

最后这点,对新同学 尤为重要 ,因为很多时候配出来的颜色不够高级,往往是 审美能力还不够高 ,关于对审美的提升, 优质图片的积累 是直接提升手段。

多看看一些美图,你的审美才会逐步提升!

RBf6Bri.jpg!mobile

比如我自己 建了几个画板 ,经常没事就会去收藏那些 色系的优质图片 ,这样后面我无论想搭配哪种颜色,都可以去 借鉴 里面的 色彩 ,搭配出来的色彩也会 比较高级

NJJ7Jjn.jpg!mobile

因此日常的积累 ,也是 提升实力的一部分 ,养成好习惯,自然你的 动手能力审美能力 都会稳步上升。

4)文中色板合集 资料下载

最后,有一些作者收藏的一些 潘通色卡经典配色的色板 、还有一些 图片的取色 ,都进行了 打包zip 。下载方法在文末

v2u6n2.jpg!mobile

设计需要理论和实践相结合的,在理论支持下想要更好的掌握,离不开更多的练习哦。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK