码迷,mamicode.com
首页 > 其他好文 > 详细

这么黄的教程,我看了2小时就关了!

时间:2018-09-27 16:59:22      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:rdl   意义   uda   ram   mcc   其他   nms   元素   c99   

前言

色彩学,或者说是配色技能,是我们设计师最需要的技能之一,普通人来说,谈论一个物体外在,经常用到的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设计

来源:庞门左道

这么黄的教程,我看了2小时就关了!

标签:rdl   意义   uda   ram   mcc   其他   nms   元素   c99   

原文地址:https://www.cnblogs.com/leolei/p/9713760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!