入门必看!给零基础新手的超快速色彩知识小科普 - 优设-UISDC

入门必看!给零基础新手的超快速色彩知识小科普

2016/06/19 24314评论区

starter-basic-color-knowledge-1

编者按:今天这篇好文,是国外一个价值99美元的动态设计收费教程中的一小节,文章简单精炼,图例精美,适合新手快速学习色彩方面的知识,一起来看@Damon_Yuen 的译文。

动态设计首要就是一种视觉媒介。我们使用视觉去传达,获取灵感以及引导。理解这些设计原理的核心是知道如何去组织这些视觉元素以及将它们有效传达。接下来,让我们仅仅聚焦在基础的色彩理论。

dt201606191

色彩是光的产物。先锋科学家 Sir Issac Newton(牛顿)通过使用菱镜去将白光分解成七种单独的颜色,揭示了光是如何组成的。他将这些颜色划分在一个车轮上,这就是现代色环的前身。

dt201606192

色彩理论包含了数以百计的定义、概念和设计应用,这些理论加起来甚至可以出好几本百科全书。然而,这里有三个基本类别的色彩理论是有逻辑性且有用的:

色环(The color wheel)

色彩调和(color harmony)

颜色背景(color context)

原色

dt201606193

原色由红黄蓝组成。在传统的色彩理论中(主要应用于绘画和颜料),三原色是三种不能相互混合的颜色,其它所有颜色都是来自于这三个色调。

dt201606194

有了这三种原色,我们可以去创建二次色(Secondary colors):绿色、橙色、紫色。

dt201606195

混合原色与二次色,我们可以得到所谓的三次色(tertiary colors):橙黄色、橘红色、紫红色、紫蓝色、蓝绿色、黄绿色。

色环

dt201606196

我们将所有这些颜色的合成称为色环。

色环可以被分为暖色和冷色。暖色是生动且充满能量的,它倾向于在空间延展。而暖色则给人一种冷静和舒缓的感觉,它倾向于在空间中消退。

颜色背景

dt201606197

一种颜色会根据其周围颜色的不同以不同的形式出现在人眼中,我们称之为颜色背景。所以选择不同的颜色搭配会改变其产生的情感或认知。

色彩调和

现在我们已经有足够的色彩理论基础去让我们接触色彩调和这个概念。这就是那些可以很好地搭配的特定颜色组合,即配色方案。

dt201606198

让我们从最基本的配色方案开始——互补色(complementary colors)

在色环中相对的两只颜色被我们称为互补色。例如黄色和紫色是一组互补色,因为它们在色环中的位置是相对的。

接着我们快速了解其他的配色方案:

dt201606199

分离互补色(Split Complimentary):挑选一种颜色,之后加入其互补色在色环左右两侧中的颜色。

dt2016061910

相似色(Analogous):色环上相邻的三种颜色。

dt2016061911

三色调(Triadic):使用色轮上相互距离相同的三种颜色。

dt2016061912

四色调(Square color schemes):使用色轮上相互距离相同的四种颜色。

Image title

单色调(Monochromatic color scheme):使用一种色彩和它的同色系色彩来搭配。

学习颜色基础是每个动态设计师的重要一步,这些基本概念是你开始为创作制定配色方案时所需的工具。

总结

接下来给你一个小小的考验。当你在Vimeo、Bechance或Dribbble 观摩别人的作品时,注意一下他们是如何搭配颜色的。研究图像是如何结合冷色和暖色,观察互补色是如何相互平衡,看看你是否可以做出更进一步的配色方案。

我希望本文可以让你有信心在创作中进行配色的探索,并且能够真正地运用色彩,去为你的创作带来生命!

欢迎关注译者的微信公众号:

MGQR

「优设六月人气最高的文章」

渐变色教程:
《超好用!简单5步帮你做出优雅大气的渐变色背景》
《零基础也能学!一份全面系统的渐变色自学指南》

AI教程:《AI教程!手把手叫你绘制可爱的吃西瓜女孩》

原文地址:michael-jon

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/starter-basic-color-knowledge

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 设计师 交互设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 动效设计 设计趋势 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里