这么黄的教程，我看了2小时就关了！

Posted 2021-01-09 leolei

前言

色彩学，或者说是配色技能，是我们设计师最需要的技能之一，普通人来说，谈论一个物体外在，经常用到的2个纬度，那就是形色，形是指轮廓，色当然就是指它表现出来的颜色，色彩。

 

 

原理

我们看到的任何颜色的物体，其实都是没有颜色的，是包含了各种颜色的光线，照射到物体的表面，例如一个绿色的苹果表面，它吸收了阳光的大部分的色彩，唯独绿色无法吸收，那就反射了绿色，你的眼球看到了这个反射的光线，于是你的大脑判断，这个苹果是绿色的。

 

 

 

对色彩的认知和配色的技巧，对于大部分人来说，都是靠天生的色彩感知和后天的环境影响，天生的感知来自眼球对色彩的敏锐度，大部分人都非常接近，甚至是一模一样，但是后天环境的影响就大不同了。

 

黄色，人类最喜爱的颜色之一，尤其是男性朋友。

 

就如下面这张不知道日出还是日落的图，就知道黄色是来自大自然的希望之色，生命之色。

 

如果用一句话概括黄色的特点，那就是：最明亮的颜色。

 

 

学过画色彩的同学都知道，颜料三原色分别是红黄蓝，红和黄都是属于暖色，而黄就是真真正正的暖了，而不是热。

 

 

上面说的是大自然赋予世界的颜色意义，而人类社会赋予黄色的意义又是什么呢？

其实非常多，例如在中国，黄色代表收获，权力，高贵，辉煌，举个例子，如果你还记得《卖炭翁》一文，里面有一句“翩翩两骑来是谁？黄衣使者白衫儿。”

黄衣使者就是指在朝里当大官的人。你就说黄色屌不屌？屌不屌？杰伦说：“超屌的！”

 

但是在西方，黄色并不是什么好东西，除了象征爱情这个比较靠谱之外，其它大部分都是贬义词，例如，腐败，例如，胆小，例如，卑鄙等等，哎，他们的世界我们不懂，我们只讨论和学习中国的黄色用法，OK？

 

 

 

01 高贵

在中国古代，黄色常常被看作君权的象征。这起源于中国农业民族的“敬土”思想。按照上古的阴阳五行之说，黄色在五行中为土，放在五行中是“土为尊”。而在儒学中也认为以汉族为主体的统一王朝是一个“中央土”的帝国，有别于周边的“蛮夷”，从而将黄色与“正统、尊贵”联系起来，为君主的统治提供了合理性的论证。

 

为了强化皇家的权威，黄色就只能皇家的人才有资格使用。慢慢地，黄色在中国也就成了高贵的颜色。

普通老百姓可以穿什么呢？

 

嗯，就是这种几乎没有什么鲜艳色彩的衣服，这就是“布衣”，材料和色彩都是有强烈的廉价感，不过这个的确只是在古代，看看现代，这个配色几乎就是高品质的代言词啊！

是不是特别潮？

 

但是如果你穿上一身鲜黄色，那可能会有“帝王之气”了！！

世界变得有点太快了，我们要跟得上世界运转的速度才不会被抛弃。

 

好了，车开歪了，我们继续回到讲色彩配搭上。

 

需要特别指出的是，在很多情况下，我们都将黄色与金色混为一谈，而实际上，金色并非单一的一种颜色，而是作为一种质感呈现的。在实际的使用当中，需要应用到多种黄色的组合才能实现，而在印刷中，也需要用烫金等特殊的印刷方式才能实现。

 

02.色*情

到了现代社会，我们却更多的将黄色与色*情、低俗联系到了一块。如小黄片、黄段子等说法。

 

这个观点主要是起源于19世界末的英国，当时英国创办了一本名为《The yellow book》的杂志，里面的内容经常涉及到一些色情内容，并且杂志的封面也被设计成黄色。碰巧当时法国的许多廉价小说也喜欢将封面做成黄色的，慢慢地，黄书就被认为是难登大雅之堂的低俗之作，久而久之黄色就有了色情、低俗的寓意。

你看，知识太重要了！哪怕是流氓，你也得做一个有文化的流氓是不？

 

 

03注目

黄色是一个高可见的色彩，这个高可见是明显引人注目的，因此它常常被用于健康和安全设备以及危险信号中。交通标示、安全岛的涂色、减速板、警告标线、火车涂装等等皆多采用黄色（与黑色相间）来提醒人们的注意力。

 

也正是因为黄色的这种高可见，所以在屏幕中可能过于吸引眼球。位于白色背景中的黄色看起来非常吃力。想要黄色有比较良好的阅读舒适性，最好是搭配黑色应用。

 

 

每一个颜色，都可以分裂为千千万万种，例如电脑上就是用256个明度和纯度级别去表达颜色，那么黄色我们设计中经常使用到的有哪些，又该如何使用呢？

 

 

黄色给人的印象就是这样的，柠檬黄当然是鲜活轻快，偏向橙的黄，会辉煌，而深沉的黄，就变成了怀旧甚至是污染。

 

 

这次我们换一个方式去表达，直接说一下黄色和其他颜色是如何配搭的，怎么搭才更好看。

 

 

黄色与黑白搭配的组合是个非常经典，而且很有个性的配色方案。由于黄色明度非常高，因此很少出现搭配白色单独使用。在大多数状况下，黄色与白色、黑色这两个无彩度的颜色可以搭配得相当好。

 

色彩明亮度、视觉强烈的黄色可以很有效地点亮纯黑的沉寂，黑色的重量感也恰好可以压住黄色的轻飘，因此黄黑配色是既冲突，又和谐的配色方案。

 

 

 

黄色为主色，黑色为辅色

有了黑色稳重，无论黄色怎么跳脱，整个画面都是和谐统一的。

 

黑色为主色，黄色为辅色

由于黄色的高亮度，作为点睛色也非常合适，能将画面主题很好地突显出来

 

黑色为主色，暗黄色为辅色 

在深色的衬托下，黄色更容易呈现出厚重感，形成我们常见的金色

 

下一个

黄+绿

黄色配绿色，让人一下子就问道了酸酸的味道，当然，那也是年轻的人味道。

 

 

由于在色相环上相邻，黄色与绿色的搭配是调和性相当高的色彩组合，并且也是自然界中很常见的色彩组合：想营造春天与自然的原野视觉效果，试试黄色与绿色的组合吧。

 

 

黄色为主色 ，绿色为辅色

由于黄色的高亮度，作为点睛色也非常合适，能将画面主题很好的突显出来

 

绿色为主色，黄色为辅色 

由于明度差的关系，黄色可以很好地从绿色中跳出。

 

黑色为主色，黄色为辅色 

低饱合度的黄色与绿色搭配，有种沧桑感，很有复古的风格

 

 

 

到了黄紫这个最让人舒服也足够潮的配色了。

 

 

色彩环中，黄色的互补色是紫色。它们是对比度差异大的一组互补色配色。由于紫色在视觉心理上带有迷幻、神祕的感觉，但黄色可以很有效地平衡这种心理感受。也因此黄色与紫色的搭配容易产生相当强烈的视觉强度。

 

黄色为主色，紫色为辅色 

由于黄色的高亮度，非常活泼，如果辅助色比较冷静，那么一下子就可以把辅助色很好地突出，如右边这个海报，不过，这个海报的标题字不应该和人物的脚重合，破坏了这个字体的完整性，当然，这个和配色无关，我就是多嘴说一句而已。

 

紫色为主色，黄色为辅色 

紫金，高贵、神秘的配色方案，刚刚说了，黄色和活泼，紫色很安静，那么如果紫色占据大面积的时候，黄色必然非常非常跳！ 很适合做一些需要强力突出主题的设计。

 

 

好了，终于说到红黄配搭了。

这个配色，全中国到处都是！！

 

不过，说真的，在画这2个色块的时候，我脑海中马上出现了一个品牌，是哪个？

哈哈

这个啊！

 

如果你还是不太熟悉，下面这张你应该认识。

哈哈哈~这个logo设计得太强大，过目不忘啊！

 

说回到正经的。

黄色和红色可谓是黄金搭档。它们同为暖色系的色彩，并且在色彩环上拥有邻近的共有色。大面积的黄色与红色搭配让人感觉版面非常温暖甚至炎热，用在促销、运动类的设计上简直最合适不过。

 

在中国传统配色中，常使用视觉感受接近黄色的金色，来搭配红色使用，容易让人感受到华丽、节庆的气息。

例如。。。

这个配色好不好看先不说，它必须是好吃！

对不对？

 

好了好了，看点正经的设计。

 

 

黄色为主色，红色为辅色

虽然同样是暖色，但是红黄的对比还是非常强烈的，而且特别有买买买的冲动，也是有流口水的冲动。

黄色作为底色，红色一下子就跳出来了。

 

 

红色为主色，黄色为辅色 

红色为主，其实就是非常的喜庆，随便你怎么配，反正都是热情和喜庆。

 

 

而暗黄配暗红，就是非常有故事性和质感的配色了。

 

 

 

黄蓝，是标准的对比色配搭

 

黄色与蓝色的组合亦具有相当高的对比度，并且都是鲜艳的色彩，所以容易营造出高彩度、活泼的感觉。

 

黄色与蓝色可以合成绿色，因此在画面中加入绿色，则可以减淡冲突性，让颜色对比更协调。

在自然界中，色彩鲜艳的动物亦常演化出黄蓝的配色组合。

 

当然，蓝黄也是非常具有高贵的帝王之气，例如龙袍就是黄中带蓝。

又或者你看看今年腾讯的月饼。

就是黄蓝配搭的。

 

 

黄色为主色，蓝色为辅色 

在浅蓝和柠檬黄的配搭上，非常青春活力，经常看这种配色，会让你觉得自己年轻了几岁。

 

蓝色为主色，黄色为辅色 

蓝色是冷静的，如果想打破这种平静，一个跳跃的黄色就是最佳选择。

左边这个饮料是蓝色的，所以广告选择了蓝色主题，为了创造活跃的气氛，设计师选择了柠檬黄的字体+动感的人物素材，一下子就活力十足了。

 

黄蓝的深色系配搭

几乎不用多说了，这种高贵感，一般配色根本出不来这个效果。

给一张大图大家感受一下对比。

下面这瓶啤酒的高贵感，根本不比轩尼斯少。

无论是设计方式和配色方案，都是一级棒！

 

 

最后，讲一下褐色。

复古色-褐色

在黄色中加入适度的灰色，就可以形成一种完全不像黄色的黄色——褐色，我们也常称作咖啡色、茶色。它完全不具有黄色原本明亮、轻快的特征，而是呈现出浑浊、滞重的感觉。

 

暗淡的褐色在视觉上给人传递出颓废、消沉的情绪，不太适合用在积极的主题上，但它却非常适合营造工业化、复古的氛围，配合纹理、材质的使用，可以给人饱经岁月打磨的厚重感。

 

 

基本上，案例就讲完了，我们来总结一下。

 

 

 

在大多数的设计中，我们之所以选择黄色，是因为想表达充满能量、温度、生命力的主题，所以我们多数会选择明度较高的黄色。大面积运用明亮的黄色，可以让整个页面充满活力。

 

由于黄色高明度的特性，在网页页面配色的时候可适当添加明度较深的颜色，色阶层拉开，并起到协调刺眼的艳度作用。黄色饱和度、明度的不同变化传达不同的意义和作用。

 

虽然黄色并不如红色那么抢眼，但也足以夺人眼球，从增加页面的吸引力的角度来看，黄色甚至是优于红色的。

 

 

讲得那么好听，你倒是操一个案例啊！

 

好，操！

 

我们来以TFBOYS的专辑为素材和内容，设计一个宣传网站。

 

一、确定主色调及大框架

1、选择明黄色为主色调，能很好的体现TFBOYS青春、阳光、正能量的形象气质。  

2、采用左右均分非对称的页面结构。

 

二、将内容排版好

1、字体选择简洁无衬线偏现代的字体。

2、字体颜色以黑色为主，压住明度高的背景色，辅以红色，丰富页面对比度。

 

三、排版细节解析

 

 

四、添加对比模块

1、由于当前文字占版面比例比较大，加入图片及色块模块可以很好的丰富页面视觉效果。

2、增加高饱合度的对比色，使页面在视觉上有跳跃性。

 

 

duang~~~ 一个页面的大部分设计完了~

 

 

看一下细节的处理

中英文字体大、小 、粗、细有明显对比，形成节奏感

左边色块的高彩度，与右边偏灰暗的照片形成对比，视觉上显得丰富而不杂乱。

 

 

 

 

这个位置的抠图用到了一个小技巧，那就是图层叠加模式。

 

一般如果是浅色背景的图，我们可以直接采用正片叠底模式，这样照片就会直接透到背景上，并且可以保留原照片的光影，当然还是需要你用画笔处理一些细节，最后才能达到想要的效果。

 

最后把衣服的红色改成了黄色，整体会更加协调一些。

 

最后，走一张完整大图！

 

感觉如何？

是长大后的tf你喜欢多一些还是小时候的tf你更喜欢？

 

不不不，是这个案例你喜欢不？

 

再来多一个案例吧！

我们来做一个餐厅的海报，

因为是定义为早餐的，

所以我们只会用清淡一些的黄色，

不会浓厚得像晚餐！

 

一张食物的元素图。

 

1.抠好素材，大致确定版式。

2.调整背景的颜色，加入一点点明暗对比，形成一点空间感。

 

色调控制好了，接下来。

3.加入点缀素材，注意素材的色调以及光影一致性。

4.将标题和图像的关系处理好。

 

基本的骨骼布局也全部出来了，继续细节部分。

5.利用图片的空隙添加文案(其实是设计布局的时候，就要预留好辅助文案的位置的)

6.添加光影细节， 以及点缀小素材等

 

在素材的选取上要多注意元素之间的一致性

很多圆形元素在重复出现，这样就千万不要出现其它奇怪的形状了。

 

duang~ 一张促销的早餐海报就出来了。

编辑：千锋UI设计

来源：庞门左道