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

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

互补色:色相环间隔 180° 的颜色称之为互补色,色相环上夹角呈现一条直线,互补色的颜色性质相差较大,将这两种颜色相互搭配,就会使这两种颜色都显得更加鲜明,也将视觉冲击力强度提升至峰值。这类配色形式优缺点和对比色很相似。只不过此类视觉冲击力更强也更难把控。

案例展示:

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

色彩的色调

色彩是有色调的,色调可以理解为:通过改变明度与饱和度来调配色彩浓淡、强弱程度,叫做色调。简单理解就是决定色调的主要因素是明度和饱和度,而决定作品最终色调的因素是画面中视觉比例较大色彩的属性。那么了解色调对于我们对设计的理解有哪些帮助呢?下面我们列举几个例子:

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

浅白色调:泛指偏低饱和度、高明度的色相搭配。不同色相之间相互搭配所带来的视觉感受很缓和,即便是以互补色的形式搭配,视觉冲击力也明显减弱。色相固有的视觉属性表现力有所降低,这类色调的设计作品带给用户的视觉感受比较清纯、阳光、年轻、干净、舒服。

案例展示:

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

此类色调的作品画面中依然需要重色进行搭配使用的,否则很容易给人一种轻浮、主体不突出的视觉感受。

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

亮色调:泛指偏高明度、高饱和度的色相搭配,相比而言色相固有视觉属性表现力较强,对比性较强的色相视觉冲击力也很强,这类色调的设计作品带给用户的视觉感受是活泼、明亮、欲望。

案例展示:

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

如案例中所示,不管是同类色还是互补色的配色方式,都能将色彩本身的视觉属性发挥得淋漓尽致,这也是亮色调作品的一个特点。

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

暗色调:泛指低明度的配色搭配,相对前两者而言,暗色调给人的视觉感受更稳重、有品质感。

案例展示:

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

当然暗色调还会形成另一种视觉感受,那就是恐怖、阴森、残忍、尔虞我诈,比如:

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

暗色调的色相搭配形式,对于很多专题性、故事性、品牌调性强的作品能起到很好的加强、提升的作用。

不管是哪种色调方式,都不仅限于某一色调范围内的颜色相互搭配,而是在确定主色调后结合其他属性的颜色相互结合使用。在此基础之上同样可以结合色彩搭配关系(同类色、邻近色等)进行配色。

另外:还有个有趣的配色、调色网站,没有思路时可以找下参考,操作起来也很方便,叫做 Adobe Color。

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

功能远不止这些,还可以变换色彩调和规则、改变色彩模式、从图片中提取色彩等等,只需简单操作,就会有无数种不同的配色方案供你参考、选择。

着重提醒配色比例:70% 主色、25% 辅助色、5% 点缀色。一般情况下:色相控制在三个以内,因为色相越少,越容易把控,越不容易乱。

配色是设计师的基本功,也是日常设计中最核心的部分,甚至是每个设计师每天都得做的功课。为网页选择一种基础色并不难,但是想要一套可用的色彩组合,则是一件相对棘手的事情。所以…

总结

配色是感性的,但同时又是有律可寻的。因为有了规律,所以我们才能更好、更全方面地了解它;而感性并不是随便,而是建立规则之后,再打破规则、挣脱束缚,从而做到无招胜有招。所以两者并不矛盾。文中通过对色彩的特征、色彩之间的关系以及色调三个维度进行分析总结,目的是让大家可以在多个层面了解色彩以及配色的基础理论,也可以给大家提供一个可供参考的方向,设计中的配色方式远不止这些。用你擅于发现的眼睛捕捉吧。

欢迎关注作者的微信公众号:「美工美邦」

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

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

99%的人还看了以下文章

  • 从零开始做APP界面设计一:iOS 界面设计规范

    准备整理一套APP界面设计教程,可能会花费一段时间,请持续关注。 首先开篇我们介绍APP 界面设计,也就是新手最常遇到的问题:尺寸。 我们以iPhone 7为例讲解iOS 界面设计规范。 一、APP 界面设计工具 做APP 界面设计用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度…

    2018年4月20日 网页设计
    4.1K0
  • web开发技术项目评分标准

    是否符合网站建设规范(10分) 包括文件名、目录、代码、选择器命名、有无适当的注释等。 主题突出(10分) 全站围绕一个主题及其周边内容进行建设,不存在和主题不相关的其他信息。 内容丰富、完整,工作量饱满(20分) 内容健康、积极向上,具有可读性、艺术性。设计思路清晰,明确表达设计意图。网站页面数量要求包含至少一个主页和四个或以上的二级页面、三级页面。每页页…

    网页设计 2018年6月1日
    4.1K0
  • 个人如何制作网站、建立站点

    5、形象设计 网站的设计可以从以下几点出发: ●设计网站标志(LOGO)。 LOGO是指网站的标志,标志可以是中文、英文字母,也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如:网站内有代表性的人物、动物、植物,可以用它们作为设计的蓝本,加以卡通化或者艺术化;专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称…

    2019年11月16日
    9.5K0
  • 网站上FLV、MP4格式视频无法播放的原因及解决方法(图)

    今天更新网站,把视频文件放到服务器上,用浏览器打开,无法播放视频文件。 服务器:windows2003+IIS 问题原因: 在IIS服务器上,默认是不支持网站插入并且播放视频功能的。 我们需要去配置IIS服务器,以支持相应的视频格式,如:FLV、MP4 在IIS服务器中配置视频格式的方法和步骤 win2003服务器IIS的配置方法 打开IIS管理器,在左侧“…

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

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

    2018年10月24日
    2.3K0
  • 毛笔字生成器,毛笔字在线生成网站

    125网页设计今天给大家推荐几个毛笔字生成器,毛笔字在线生成网站: http://www.51poca.com/ http://www.epinv.com/online/ http://www.akuziti.com/mb/ 毛笔字改造使用方法 将下载下来的字体图片AI转路径,编辑文字。 首先使用在线生成器输入选择好你需要的文字字形,将文字图片拖至AI中。 …

    2019年1月5日 网页设计
    8.6K0

发表回复

登录后才能评论