陌北默

小编:在已确定所需色彩后,我们该如何赋予它灵魂,让它变得有情感,舒适呐?

我们开始设计手机网页时,总是需要先确定好网页的配色方案。那么,这时,除非是客户提出色彩方案,我们大部分要面对的情况的是,根据客户的需求创建出一个色彩方案。在此,我想教大家如何从“图片”这一来源中获取灵感并创建出色彩方案。

一、选择图片
首先,去各大网站搜索你喜欢的图片,图片的选择应该尽量选择色调有变化且明暗对比也较为明显的。因为黑白或低对比度的色调只会让你最后的色彩方案看起来不够鲜明。
选择图片去下面这几个网站是不错的:
http://www.ccopus.com/flow/curate
http://www.ccopus.com/explore/
http://www.ccopus.com/
要从配色方面吸引自己的图片上进行选择。

ifeiwutut1405281

二、吸取色彩
在PS里打开这张图片,吸取色彩。吸取色彩并不是任意选取自己喜欢的颜色就可以,根据整个图片的色彩分布,先找到图片的主色调。

主色调的选择和使用
主色调的选择依据整个图像当中分布最广的一种颜色,在这张图片中,我们可以看出分布最广的为蓝色,这些蓝色呈现明暗层次深浅的不同,因此,在深蓝到浅蓝中我选择了过渡最为均衡的一种中度灰的蓝色。这种蓝色在图片上表现的是一团团云雾和湖泊的颜色。

三、建立自己的色彩方案
选择新建一个文件,白色底背景,图片中选好的色彩作为前景色画一个圆形。这个圆形也就是你的色彩方案中的第一个色彩:主色调。
ifeiwutut1405282

主色调的运用范围
在网页设计的时候,主色调的使用范围在整个网页的色彩面积较大的地方,例如用于网页背景或形状元素上。当然,一种色彩是无法开始设计的,因此接下来我们会选择第二种颜色。

辅助色的选择
辅助色通常是一个能烘托、能与之产生呼应的颜色,如果主色调是一个冷色调,那么辅助色就偏向为一个暖色调。因为一张色彩丰富的图片必定是具备冷暖两种倾向的色彩,因此,你这时会在主色调的另外相反色温的色调上进行选择。

在这里我选择了红色屋顶的暖橙色,和蓝色的冷感进行了均衡。
ifeiwutut1405283

辅助色的运用范围
辅助色通?;崾褂迷谕成杓浦械淖痔?、小面积的元素上。辅助色如果和主色形成了互补色就会产生一种强烈的对比,这时对比色还会有强调的作用。当你想要凸显网页中某个元素时就可以试用上强调色。

那么什么是对比色呢?就是在色环上位置刚好相对的颜色,例如:红色和绿色,紫色和橙色,蓝色和黄色。

如果你觉得你选择辅助色强调不够强烈,你可以另外在主色基础上,从色环里选择主色的对比色,作为第三种色彩方案。
ifeiwutut1405284

高光和阴影
这里通常是指主色调在图片上展示出来的高光和阴影部分。这时,已经无需完全依靠图片了。我们的色彩方案里已经备选了三种颜色,而剩下的色彩就在主色调基础上调整变化。

主色调增加白色就变作高光部分,作为第四种颜色。
ifeiwutut1405285

如果你的设计配色色彩偏重,这时可以往主色调添加黑色,作为第五种色彩选择。
ifeiwutut1405286

高光和阴影色在网页中也作为一种修饰的颜色选择,注意慎用。高光和阴影色可选其中一种作为中立色。因为这种利用黑白变幻出的颜色层次丰富,因此这里的选择会非常多。这就需要你在最终色彩方案中再根据实际情况进行调整。

确定色彩方案
色彩方案选择好以后,最好确保整体颜色不得超过3种颜色:主色、辅助色、高亮/阴影色。
即使是三种颜色,但是色调都不会偏离整体的蓝色基调。
ifeiwutut1405287

色彩方案的运用
在进行色彩运用的时候,也会出现黑白灰的灵活运用,但要确保这些颜色的出现不会干扰整体画面色彩的和谐感(左)。

大多数时候,我们未必希望纯白色作为我们的底色调。要想让整体看起来优雅,添加一点透明度非常低的主色调作背景是必不可少的(右)。
ifeiwutut1405288

 

小编:嘿。。优雅的配色方式你们学会了吗?那其他的灵魂呐?是否会用呐?学UI网—UI设计师学习教程平台更是需要如此严谨的配色,手机是生活中使用最多的,而它的屏幕面积又小,我们该认真对待它。

作者:UIdesign飞屋睿

文章来源:http://www.ccopus.com/p/b4ad4ec87699#

=========================关于学ui网=========================

ccopus.com 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

APP截图站:app.ccopus.com? 海量APP截图,让你灵感爆发!

转载请注明:学UI网—UI设计师学习教程平台 » 给“色”灵魂(配色)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
黄色在电商设计中的玩法与禁忌【设计干货】黄色在电商设计中的玩法与禁忌【设计干货】
设计师必备!人工智能时代的配色方案?。凵衿鳎?/span>
怎么为你的产品选择最合适的颜色?怎么为你的产品选择最合适的颜色?
彩铅插画:紫藤如何绘制?[教程]彩铅插画:紫藤如何绘制?[教程]
2018年春夏流行色报告2018年春夏流行色报告
设计基?。毫牧摹吧使钩伞比朊判≈?/span>
六种配色方法让你的设计方案666六种配色方法让你的设计方案666
2017年色彩趋势分析与运用[渐变色篇]2017年色彩趋势分析与运用[渐变色篇]
明亮的色彩如何应用在UI设计中?明亮的色彩如何应用在UI设计中?
设计师必备配色基本公式设计师必备配色基本公式
?