服务热线:
15071151002
图文展示
衍果视觉设计培训学校

干货!怎么设计出洋气的渐变色?

各种LOGO、平面以及UI设计趋势中

提到最多的一种大热元素了

这个潮流从最近的新设计中就能看出

从LOGO设计

 点击添加图片描述(最多60个字)

到海报设计

 点击添加图片描述(最多60个字)

甚至到产品设计

 点击添加图片描述(最多60个字)

眼看着渐变色已经铺天盖地

而自己做的渐变却是这样的?

 点击添加图片描述(最多60个字)

所以今天就来分享一下

时下最流行的渐变色,要怎么做?


什么是渐变色

所谓渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色。

色彩可以给我们不同的感受和情绪,而渐变色则可以给我们更多的想象空间。纯粹的渐变色使得色彩更生动缓和,不单调,可以丰富整体设计感,却又不会增加视觉负担。合理的使用渐变色可以吸引用户视觉焦点、渲染氛围、提升美感、传递情绪等。

渐变现象

渐变现象分为四种:色相渐变、明度渐变、饱和度渐变、综合渐变

通过HSB色彩值来展示这四种渐变现象,会非常直观和容易理解:

色相渐变,言简意赅则是由一个颜色到另一个颜色的渐变或是多个颜色的渐变。

明度渐变,是同一色相不同明度,如同一颜色加黑或者加白掺和以后能产生各种不同的明暗层次。

饱和度渐变则是基于各种颜色的不同纯度进行变化,每一种纯度都有与其相应的明度。

综合渐变,即是色相、明度和饱和度同时发生变化,完全变成另一种颜色,是我们最常使用的渐变形式。


渐变的颜色数量

渐变色在数量上的使用也没有一定的规范。在多数情况下,分为四种情况:单色渐变、双色渐变、三色渐变、多色渐变

单色渐变即是上方演示的单纯明度渐变或饱和度渐变。

双色渐变是最常见的渐变,同时它也是一把双刃剑,因为常见所以用起来不会造成太大的错误,也因为常见所以常常不会给人视觉上的震撼。

三色渐变是除了双色渐变之外另一种常见的渐变,视觉效果上较双色渐变更有层次感。

多色渐变比较少运用,因为把握不好就会给设计造成花俏轻浮的感觉,特定情况下除外。

总的来说,颜色越少越不容易出错,但同时越丰富的层次感,越是需要多种颜色的相互碰撞形成,对颜色的理解和融合的技巧要求越高。

渐变的表现形式

渐变色有五种形式,线性渐变、径向渐变、角度渐变、对称渐变、菱角渐变。在日常设计工作中线性渐变、径向渐变用的较多

 点击添加图片描述(最多60个字)

了解了渐变色的一些基本概念后,接下来我们再分析下在使用渐变色过程中几种常用的表现手法:

渐变要如何应用?

一、双色渐变  

双色渐变是渐变设计中很重要的组成部分,是设计师们最常用的创作手法之一。其渐变现象可多种多样。渐变方向主要指从一个颜色到另一个颜色的渐变,如下图A-B,有横向渐变、纵向渐变、对角渐变三种方式。

 点击添加图片描述(最多60个字)

双色渐变可作为设计的主视觉存在,也可是诸多特性中的一个。其效果是独一无二的,可以让画面更加丰富、活泼,同时使画面更整体统一,提升美感。

横向渐变

 点击添加图片描述(最多60个字)

纵向渐变

 点击添加图片描述(最多60个字)

对角渐变

 点击添加图片描述(最多60个字)

二、图片上的渐变色叠加

在图片上叠加色彩已经流行了相当长的一段时间。这种渐变通常在背景、照片中使用,可让画面更具神秘、优雅、更具吸引力,让用户注意到上面更加重要和更关键的元素。

其中半透明的叠加可以让画面更细腻,同时也奠定了画面的主色调,这种设计对于大图的作用尤其明显,可以为图片带来耳目一新的感觉。

使用过程中要注意对背景图的挑选,色调应与内容的含义相匹配,叠加后需强化页面信息的可读性,不要只为了装饰而装饰,否则呈现出来的结果会完全相反。

 点击添加图片描述(最多60个字)

上面Spotify的页面采用了图片叠底和双色纵向渐变,弱化图片、让文字可读性更强的同时,使画面依旧灵动具有视觉冲击力。

 点击添加图片描述(最多60个字)

而对于文字比重不高的海报,渐变色的运用更多是侧重于协调图片与颜色的关系。

三、多层次渐变叠加

 点击添加图片描述(最多60个字)

两年前,Instagram放弃了复古相机样式的LOGO,更换成集合了多种颜色的渐变色扁平新图标,引发了大家激烈的讨论。

不管这个设计好坏与否,我们都不得不承认,这个彩虹色让人眼前一亮。也让我们重新认识到在UI设计中,使用得当的渐变色彩,可以使界面和图标的设计感得到迅速提升

 点击添加图片描述(最多60个字)

Instagram图标主要由一组线性对角渐变,加两组球形径向渐变叠加组成。细数一下,里面融合了桃红、紫、橙、黄、蓝五种颜色,可以说是多色渐变中非常具有技术含量的一个设计。

四、色块渐变

渐变的颜色不只可以运用在一个色块上,还可以运用在一组色块上。

不如说下面的这组海报,设计师会采用同类色、近似色、对比色、补色,将一个图形中的分区清晰区分开,让图形色块平衡在一个频率上,这样的画面多姿多彩,也更富有节奏感和舒适性。

 点击添加图片描述(最多60个字)


 点击添加图片描述(最多60个字)

五、置入元素

还有一种渐变色的使用方式是将渐变色置入到版面中的元素内,最常见的两种形式就是置入到几何元素当中和置入到文字当中。

这两种形式都会为画面带来一些变化性,同时又能够缓冲色彩与色彩之间的冲突,但需要注意渐变色之间的统一与协调,建议一个版面当中不要置入数量过多的渐变色,以免造成设计的最终效果显得混乱。

第58届塞萨洛尼基国际电影节海报

 点击添加图片描述(最多60个字)

以上两张电影节海报,将渐变色置入到数字“58”当中,采用了多种颜色的叠加渐变,与黑色背景形成鲜明对比,重点突出这两个数字。

 点击添加图片描述(最多60个字)

这一形式同样可以应用于字体LOGO上,比如说前阵时间更换新LOGO的荣耀手机,在新LOGO的变色上加入了与产品呼应的渐变色系。

六、网格渐变

AI网格工具绘画出的成品不亚于3D,是一种很好的矢量画图方法,绘画技巧相对复杂,要求较高,广泛用于平面设计作品中。

网格配色的运用,考验设计师的颜色搭配功底,调整每一个瞄点让色彩过渡自然,也可采用多图层的叠加方式。

 点击添加图片描述(最多60个字)

via 网络

 点击添加图片描述(最多60个字)


 点击添加图片描述(最多60个字)

via 唐寅

其实渐变色的使用,在技术层面上的难度并不是很高,重点在于使用的对象和主题。渐变色并不是一个独立的设计理论知识,设计师应该把它看作是配色当中的一种形式。

很多同学问:什么样的设计具有互联网气息?其实可以看看各大互联网公司的LOGO,大多有两大特点:一是扁平化,二是运用渐变色。所以说,掌握渐变色的运用,对设计思维的更新是有所帮助的。


联系老师

联系老师

副标题

 
 
 
 
 工作时间
周一至周日 :8:30-21:00
 联系方式
客服热线:15071151002