配色技巧--色彩三要素&取色配色技巧

2020-03-24     Ps平面设计课堂


色彩三要素


色盲检测

要搭配出好看的色彩,首先不能是一个色盲

色彩

无色彩系,是黑白灰,二种颜色元素,是除了黑白灰以外的,所有色彩,共同组成了颜色体系。


色相

最初的基本色相为红、橙、黄、绿、蓝、紫,在各色中间加插一两个中间色,其头尾色相。按光谱顺序为:红、橙色、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫。红紫、红和紫中再加个中间色,可制出十二基本色相。


饱和度

就是色彩的浓度,或者说是鲜艳程度。越鲜艳的色彩通常就被认为越饱和。


明度

也叫色度,指的是色彩的明暗程度。不同色彩有不同的明度,即使同一种色彩,其明度也有不同。

三原色:红、黄、蓝

所有颜色的源头被称为三原色,三原色指的是红色、黄色和蓝色。

如果我们谈论的是屏幕的显示颜色,比如显示器,三原色则分别是红色、绿色和蓝色,也就是我们熟悉的RGB。

间色、复色(三级颜色)

如果将红色和黄色、黄色和蓝色、蓝色和红色均匀混合,就会创建三种间色:绿色、橙色和紫色。

将这些颜色应用进项目中,可以提供很强烈的对比。

三次色来源于间色与原色的混合,主要有:红紫色、蓝紫色、蓝绿色、黄绿色、橙红色和橙黄色

同类色、邻近色

同类色指色相性质相同,但色度有深浅之分。(是色相环中15°夹角内的颜色)

近似色

同类色指相性质相同,色度深浅比较明显(是指色相环中夹角50°左右的两种近似色)

对比色

对比色是人的视觉感官所产生的一种生理现象,是视网膜对色彩的平衡作用。

指在24色相环上相距120°-180°之间的两种颜色,称为对比色。

补色

又称互补色,余色,亦称强度比色,就是两种颜色(等量)混合后呈黑灰色,那么这两种颜色一定互为补色。色环的任何直径两端相对之色都称为互补色。

冷、暖、中性色

色彩学上根据心理感受,把颜色分为暖色调(红、橙、黄),冷色调(青、蓝)和中性色调(紫、绿、黑、灰、白)

冷色

青色、蓝色、蓝紫色等等都属于冷色系列。

冷色一般跟白色调和可以达到很好的视觉效果,

冷色一般应用于一些高科技、高品质、理性类页面设计中。

暖色

黄色、橙色、红色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。

暖色一般应用与女性、儿童、食品类等。

也可以体现商品的琳琅满目,热情活泼、温馨等。


同类色和近似色搭配

如黄绿色、黄色和洁色等。近似色的搭配给人的视觉效果很舒适,很自然。所以近似色在设计中极为常见。(注:在用近似色时,要适当加强对比,不然会使画面显得平淡)

对比色和补色搭配

最突出,最引人注目的搭配,有强烈的视觉冲击!

(注:互补色之间的强烈对比,会引起色彩的颤动和不稳定感,处理不好会使页面冲突,破坏整体感。对于互补色,调整一下互补色的亮度,或者调整互补色的使用面积。有时候是一种很好的搭配)

三角形搭配

使得画面生动的搭配方式。

在使用三角形搭配方式时,一定要选出一种色彩作为主色,别外两种作为辅色。


分裂互补色搭配

这是互补搭配的变体,本质是用类似色来代替互补色中的一个颜色,以达到既有互补色对比强烈的特点,又弥补了不稳定的缺点。

对初学者来说是非常好用的搭配方式,画面对比强烈又不容易产生混乱。



四方色/四方补色

四方色是在色轮上画一个正方形,取四个角的颜色。

这个颜色超棒,尤其是使用其中一个颜色作为主色,其他的三个颜色作为辅助色的时候。

四立补色和四方色的差别在于四方补色采用的是一个矩形。

通过一组互补色两旁的颜色建立的色彩组合。

常见色彩搭配方法

色相变化


明度变化


饱和度变化


清晰度变化

案例分析

观察1

观察食品页面的色彩搭配方式、色相、明度、饱和度的应用


观察2

观察食品页面的色彩搭配方式,色相、明度、饱和度的应用


欣赏

多看多练多模仿,首先你得有一个好的欣赏水平


配色小技巧


提取色彩

找图

关键步骤,确定自己想要的风格,找大量的符合风格要求的图片,进行对比筛选,选出最符合自己要求的几张图片开始色彩的提取。

找了一张色彩丰富,精神状态积极向上,尺寸超大的图片。


提取颜色

把选中的图片放入PS中,点击“存储为WEB所用格式”

(如果没有色彩非常合适的图,可以再PS里适当的调整颜色再进行颜色提取)

格式选为PNG-8,色块选择8


色彩应用

(先看图)让图形、文字、色彩相互协调,而不是做排列颜色的色谱。


分析

这个页面和现在的主流网站框架差不多,从上到下主要分为三个部分,导航区域、BANNER、内容区。


网页配色不宜超过三种

色相差异明显,主要色彩的选取就比较好办,常见的对比色、临近色、冷暖色调互补等方式。

可以简单设定,或直接从成功作品中借鉴主辅色配比都可以,比如常见的朱红点缀深蓝、明黄点缀深绿等。


模仿配色

找参考图

模仿配色是一些不能完全自己把握配色的中初级设计师必须学会的技能!

在不断的模仿中吸取经验!首先,确定设计的方向,找到参考本色案例。


选定后找出参考颜色

因为是大促页面,所以选择了颜色比较艳丽的颜色来参考,利益点、主文案与背景对比强烈,冲击力强!


套用颜色

既然前面的颜色参考已经选定,那接下来我们把它应用到页面中去,所有色调全部复制过来,完全不需要再考虑配色问题。

辅助色选用

既然前面的颜色参考已经选定,那接下来我们把它应用到页面中去,调整商品色相、明度、饱和度,让色彩更加丰富。

关注头条号,转发本文,然后私信小编:777,领取超全色卡素材

免责声明

本文章资源均通过网络等合法渠道获取,该资料仅作为学习交流,其版权归出版社或者原作者所有,不对所涉及的版权问题负责。如原作者认为侵权,请联系我们,我们立即删除文章,谢谢

文章来源: https://twgreatdaily.com/zh-hans/sD8lDXEBnkjnB-0z9Wa9.html