这篇设计配色干货,0基础也能让你做出好作品

配色一直是设计圈子里的热门话题,是我们作为设计师必须要掌握的一门重要技能,通过色彩可以向用户传递不同层面的视觉信息,所以不同的色彩也都被人们赋予了不同的含义。比如:红色、橙色、黄色等暖色系的颜色能表现出温暖、热闹;而蓝色、淡蓝色等冷色系颜色,会给人一种凉爽、寒冷的感觉。将色彩属性与设计作品有效地相互结合,往往能做到 1+1>2 的视觉效果。

色彩的特征

在设计中,色彩可以分为两大类,即有彩色和无彩色,无彩色大多指我们常说的黑、白、灰;有彩色则是除无彩色之外的颜色。有彩色的三大特征,即色相、饱和度、明度。

色相:色彩的首要特征,也就是色彩可呈现出来的质地面貌,比如我们常说的红色、蓝色、绿色……

这篇设计配色干货,0基础也能让你做出好作品

饱和度:色彩的鲜艳程度,也就是色彩的纯度,饱和度取决于该色中含色成分和消色成分(灰色)的比例,直观看就是我们常说的:天蓝色、淡蓝色、灰蓝色等等,就是对饱和度不同程度的体现。

这篇设计配色干货,0基础也能让你做出好作品

△ 饱和度由高→低的变化

明度:是眼睛对光源和物体表面的明暗程度的感觉,简单理解就是色彩的明亮程度,比如白天和黑夜。

这篇设计配色干货,0基础也能让你做出好作品

△ 明度由亮→暗的变化

在 Photoshop 拾色器中分别对应:

这篇设计配色干货,0基础也能让你做出好作品

有彩色的三大特征:色相、饱和度、明度,三者相辅相成、共同作用,任何一种有彩色都必然存在着这样的特征关系。相信大家应该能明白三大特征分别代表着什么了,如果还不懂,那就再看看。

色彩之间的关系

在有彩色范围内,不同色相之间存在着一些可遵循的视觉关系,根据这些视觉关系,我们也能得到一些常见的色彩搭配方式,下面我们具体分析:

这篇设计配色干货,0基础也能让你做出好作品

同类色:色相环间隔在 30° 以内的色相搭配,这类配色形式优点是舒服、统一、视觉比较柔和、容易把控。缺点是冲击性很弱,运用不得当会单调、缺少视觉层次感。所以此类配色方式不易用于对抗、冲击力强的设计作品。

案例展示:

这篇设计配色干货,0基础也能让你做出好作品

案例中每一幅海报整体给人的视觉感受都很舒服、平缓、易于接受,这也是设计中用到最不容易出错的一种配色方式。

这篇设计配色干货,0基础也能让你做出好作品

邻近色:色相环相隔 90° 的颜色称之为邻近色,这类配色方式优点是阳光、活泼、稳定、有一定视觉冲击力、视觉层次感丰富。

案例展示:

这篇设计配色干货,0基础也能让你做出好作品

如图所示,整体视觉层次感丰富、有跳跃性,但同时也很舒服、和谐。

这篇设计配色干货,0基础也能让你做出好作品

对比色:色相环间隔 120° 的颜色,这类配色形式优点是视觉冲击力强烈、富有跳跃性、突出、点缀能力强,比如常用作画面中的点缀色,或与主体固有色成对比关系的背景色,用于突出主体。缺点是大面积使用比较难把控。

案例展示:

这篇设计配色干货,0基础也能让你做出好作品

如图所示,当对比色的面积较大时,给人的视觉冲击力是很强烈的。而当其中一个色相较少时,点缀、装饰的作用就显现出来,这部分颜色就是画面中容易出彩的部分。

本文转载自,原文链接: ,本文观点不代表125jz立场。

(1)
江山如画的头像江山如画管理团队
上一篇 2020年2月18日 下午9:00
下一篇 2020年2月19日 下午7:24

99%的人还看了以下文章

  • 网页制作实战项目九:飘城旅行社(分步教程2)

    网页制作实战项目九:飘城旅行社(分步教程)精 在上一课中,我们学习了实战项目九-首页的制作,今天来实现其他主要页面:旅游资讯。 练习一:PC端固定布局 地址:http://www.125jz.com/wp-content/demo/20190113demo1.html  练习二:流体移动布局 地址:马上上线 练习三:兼容响应式布局 地址:马上上线 1.导航下…

    2019年1月22日
    5.7K0
  • 网页设计第一步:绘制网站草图

    网站设计草图是对页面元素布局、页面造型设计、交互表现形式等所做的手绘草图说明,是对用户需求沟通的图形表现,以便更准确无误地与用户确认需求,也对网站风格设计过程起指导作用。

    2020年2月26日 网页设计
    16.9K0
  • web前端开发学习路线

    如果你是新手,准备学习web前端开发的话,一定要想想为什么要学习它?性趣、爱好、获得一份相关工作…… 定位好自己,持之以恒,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后克服。在状态不好的情况下,要及时调整,多向大牛请教,那样往往能让自己成长的快,切勿急躁。 初学web前端开发可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会分析自…

    2018年1月18日
    4.9K0
  • 如何做好视觉设计中的层次?(精)

    对于视觉次序(视觉层次)的营造是每个设计师所必须精通的,无论是海报设计还是页面设计,从整体来看总会有强弱、主次之分,因为有了视觉上的变化,才使得整体更富有层次感;当用户在浏览信息很多的网页时,作为设计师要做到:即使用户只是简单的浏览,也要有能在用户脑海中形成记忆的视觉元素,而这些元素就是视觉中的主,而当用户仔细阅读时才能记忆到的元素才是视觉上的次;从局部来说…

    2018年7月9日 网页设计
    7.5K0
  • web前端工程师需要掌握哪些知识,0基础学习Web前端课程大纲

    想从事Web前端开发,需要掌握哪些知识? 中文网页设计网今天给大家分享0基础学习Web前端的课程大纲,从入门到精通,帮助你快速成长为Web前端工程师。 Web前端基础课程大纲 第一阶段:HTML+CSS 第二阶段:JavaScript基础知识 第三阶段:DOM、BOM与事件 第四阶段:面向对象与数据交互 第五阶段:JavaScript实战 第六阶段:数据类型…

    2018年10月24日
    2.5K0

发表回复

登录后才能评论