• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 渐变质感技法入门指南:对比用色

渐变质感技法入门指南:对比用色

作者:飞屋睿UIdesign 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含对比色,渐变,渐变技巧,渐变色,色彩模式,配色技巧,酷站推荐等相关知识,飞屋睿UIdesign希望在学习及工作中可以帮助到您

@飞屋睿UIdesign?:渐变这一视觉趋势,在最近几年里可谓如日中天。很多平平淡淡的设计,将平涂改为渐变,立刻就能增加醒目感。

  • 虽说渐变是一个有效的元素,但为什么我们的渐变,还是和大神们的渐变有区别?
  • 我们应该怎样做出渐变的质感?
  • 为什么说用色才是渐变的精髓?

今天我们就来和大家聊聊渐变这个话题,深入了解我们似乎以为自己懂了的渐变,我们将和大家一起分析渐变配色中,利用色彩不同特性之间的对比来用色,以及一些简单的操作小技巧。比如快速生成一个色轮,以及简单的利用混合工具来配出渐变配色的色彩。

渐变是在色彩上的一个相对缓慢的过渡,我们的视觉会随着这个渐变的过渡而产生一种流动感,而这种流动感全凭在色彩上发生的种种变化。是的,我们的重点来了,就是这个变化,需要我们今天深入去加以了解。

谈到变化,我们自然会想到这个变化的范围。如果拿出我们的色轮来看,我们就会发现色轮上的变化范围有大有小,当两个色彩距离较近时,我们可以说他们是邻近色,这时难以发现他们的区别,直至我们的肉眼无法分辨。这时候可以说变化范围较小。

当两个色彩距离180,在色轮上呈相对,我们可以说这时的色彩变化是最大的,于是也就产生了最强烈的对比。很多撞色的情况,也是在这种对比下发生的。我们通常会把这对颜色称为互补色。

当然,实际的情况比这要稍微复杂一点,我们一起来看下。

一、色相对比

刚刚大家可以发现,这个色轮上的色彩的一个特点是什么?只有色相的变化。没错,我们平时也已经习惯了,只用色相来区分色彩。所以,今天要讲的第一个对比,也就是色相的对比。

色相的对比,在色轮上就能很直观的表现。例如红色和黄色这一段,截取过来以后,就变为了红 – 黄渐变。利用色环就能很轻松的实现色相的渐变。距离越远,渐变色的对比也就越大,互补色之间的对比达到了极值,比如红 – 蓝渐变的对比就大过红 – 黄渐变。

这里首先教给大家一个快速生成色轮的小技巧,这个技巧不需要利用网上的图片或工具。现做现用,很方便。

1. 小技巧:快速生成色轮

STEP 01

让我们先用这个自定义形状工具画出一个圆环。

STEP 02

然后在圆环里填充色彩,这里我们运用一个渐变叠加。

渐变叠加的叠加方式为角度渐变,渐变色这里选用「色谱」,没有找到这个渐变的小伙伴记得要追加色谱。

这时做出的色轮,在色彩上饱和度达到最大值。因此也能表现最强烈的色相对比。目前比较流行的渐变色是明度偏高,饱和度居中的渐变,也像这样的糖果色,因此这时大家可以利用调整图层「色相/饱和度」来增加明度或降低饱和度。

2. 高能提醒:别被参数骗了

可能很容易被初学者忽略的是,我们在 PS 里的色彩(HSB)这个参数里看下,一般来说H-色相,S-饱和度,B-明度,这里的情况和我们在色彩学里学到的 HSB 有点小差异。

色相这里没有问题,但是饱和度和明度,尤其是饱和度上面,大家可以看到一般来说饱和度最低时,色彩是慢慢失去色度,也就是呈现灰色,但是在软件里把 S 这个值调到最小呈现出是白色;还有另一个属性:明度,最大的明度,应该是白色,在软件里的 B 这个参数调到最高时,并不是白色。

在 PS 里,只有把色彩放到「色相/饱和度」这个工具里,才会看到和我们书里的概念表现一致的特性。

3. 工具不同,渐变也就不同

运用色环配出的渐变色和直接利用渐变工具配出的渐变色还有差别的,最重要是体现在颜色的过渡上。如果是用渐变工具选择了左边绿色,右边紫色的渐变色,在中间出现的过渡色就表现出一种发灰的色彩。如果所选用的两端的颜色是在色环上距离有定的角度,就会出现这种灰色。这是因为两种颜色彼此混合所造成的。有些情况下,确实是需要这样过渡的,这就直接用渐变工具来做渐变。

另外一个情况就是不希望色彩发灰,这时需要用到色环,在色环上根据所需要的渐变过渡来选取不同的色彩配置。

可以看出来,尽管没有饱和度、明度的变化,色彩仍然是彼此之间所表现的特质都很独特,所以基本上利用色相对比,就能配出非常优秀的渐变作品。

一般来说,渐变本身就足够吸引人,有渐变参与的情况下,我个人的建议是色彩不要太多,尽量少元素,整体风格倾向极简,这时最能发挥渐变色这种特质的魅力。

这个案例中的渐变过渡,中间的这个红色和蓝色的渐变就是用渐变工具做出来的,两边的渐变都是取用了色环上的渐变过渡,可以看到色彩上两边的渐变中的色相更多,更饱满,饱和度和明度都没有丧失,而中间的渐变在红蓝之间的过渡出现了饱和度较低的紫灰色。

二、色温对比

色温是什么?色温更多是色彩对人的主观的心理因素的影响。虽说是主观,但是大家的整体倾向还是比较类同。比如蓝色清凉,红色温暖。

所以,把色环上的色彩根据主观温度进行一个划分,就有了我们经常听说的暖色和冷色。冷暖色虽然无法用属性值来进行衡量,但是却在色彩中发挥不小的作用。

1. 获得平衡感

渐变中加入色温这个属性,这个游戏就会更好玩。一般来说,为了达到配色平衡,我们的配色中需要冷暖进行平衡,这里的平衡并非是1:1的严格配比,而是彼此渗透,双方根据位置、面积、形状等等元素的共同参与,共同实现一个版面的平衡。当然,这不是件容易的事,但这是我们配色中的方向之一。

回到我们的色温对比,要体现在渐变中,就是要有冷色和暖色的参与。一般来说,在比较简单的过渡性双色渐变里,一个冷色一个暖色是非常常见的表达方式。还是拿刚刚那个案例来看,左边两个配色就是冷暖的过渡,而右边的配色相对来说偏暖,当然相比之下,洋红色还是比橙色会更偏冷一些。

2. 绿色和紫色:冷暖不定

冷暖色的对比都是在同一个版面内的一个动态对比,尤其对于绿色和紫色这个范围内的色彩来说的话更是如此。比如绿色,在和蓝色搭配的时候,由于蓝色是绝对的冷色,所以绿色就表现出暖色的特质;而绿色如果和橙色搭配,橙色又是绝对的暖色,所以绿色又表现出冷色的特性。紫色也是同样的情况,和蓝色搭配它偏向暖色,而和橙色搭配时它又是偏冷的。

用起来其实也很简单,如果你的配色中发现整体感觉偏冷,就增加暖色。如果太暖,那就增加冷色调。如果整体的配色看不出哪里不对劲,但总觉得色彩有点奇怪,就先看看色温是不是实现了平衡。

三、明度对比


再增加一个属性,渐变这个游戏又增加难度了,明度这个属性表现为颜色的明暗程度,明度引入了另一个性质:光。其实我们平时看到的色彩就是因为有了光,才有了颜色。但是一般来说我们会把光简单归属于「发光」这个行列。事实上,由于光线的折射,我们视网膜接受到光的波长,才产生了色彩。那么光线的强烈与否,就会影响这个颜色的表现。

明度的对比,是所有颜色属性当中,最容易被觉察到的。我们可以简单来看,我们的素描就是利用明暗来表现物体,黑白灰能毫不费力表现现实中光的感觉。所以在配色中,有了明暗对比,

您可能想查找下面的文章:

  • 渐变质感技法入门指南:对比用色

相关文章

  • 2017-08-06获得css元素中的计算样式(层叠之后/最终样式)
  • 2018-08-23文案没有说服力?四招写出逻辑性强的文案
  • 2018-08-23实战经验!两个大招帮视觉设计师高效完成工作
  • 2018-08-23刚刚免费的Adobe XD 是Photoshop 杀手无疑了
  • 2018-08-23入门手册!五分钟带你快速了解AR
  • 2018-08-23进阶实例教程!如何通过设计提升产品的增值服务?
  • 2018-08-23网易高级设计经理:关于用户体验的三个反思
  • 2018-08-23新字体来了!一组适合儿童节的中文字体打包下载(个人非商用)
  • 2017-08-06让你了解HTML及资源是如何加载的
  • 2017-08-06favico.ico---网站ico图标设置步骤

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 基础知识学起来!如何科学提高UI界面的文本易读性?
    • noe4j之cypher之where
    • 设计师如何有效参与团队协作?来看支付宝设计师的总结!
    • favico.ico---网站ico图标设置步骤
    • 这10个关键点,让你的搜索结果页看起来足够专业
    • 垂直栅格和渐进式行距应用举例
    • 设计师必须要掌握的版式基础大全
    • 我们能从Google的全新UI中学到的知识(图文)
    • 用一个实战案例,帮你学会讲述重设计作品的思路
    • 超实用!如何正确使用控件系列之提示框(Toast)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有