Hi~ 大家好,本日和大家分享关于渐变的知识点和稠浊渐变的实现技巧,希望可以带给大家更多灵感。

正文

常常利用爱奇艺刷剧的同学,有没有创造爱奇艺的运用图标又变了。
前段韶光爱奇艺针对品牌设计进行了较大的调度,最近又悄悄地将运用图标的背景色换成了这种多彩色稠浊渐变的形式。

针对这个视觉效果估计大家各故意见,我们就不谈论这个话题了

UI设计APP图标渐变效果设计技巧

这个类似于极光/弥散渐变的风格最近也比较盛行,在 UI 场景中的利用也是比较遍及的,被利用到运用图标的案例中相对较少。
大概的回顾了一下,也有一些产品会利用,特殊是比较有名的 Instagram 很早之前就利用了,也成为了盛行趋势中的精良案例之一。

通过极光/弥散渐变(稠浊渐变)的形式强化运用图标外轮廓背景,不仅可以提高视觉感,也是表示年轻化趋势的一种色彩表现形式。
不过渐变中的色彩本身也是关键性的成分,如果色彩不足年轻活泼,带来的效果也是千差万别的。

一、渐变的表现形式

渐变色在我们的设计中是非常遍及的,渐变色分为线性渐变、径向渐变、角度渐变、稠浊渐变、流体渐变等形式。
不同的渐变形式可以营造不一样的视觉体验,可以丰富色彩环境、强化光影质感、增强层次感和空间感等。

1、线性渐变

这是最常见的一种渐变办法,具备明确的方向性,由两种或者多种颜色组合形成。
相较于单色来说,线性渐变可以使得画面更加丰富,色彩营造出的层次感更强。

2、径向渐变

径向渐变因此中央向外扩散而形成的圆形渐变,可以作为立体感的表现,也可以营造向中央聚拢的光影效果。

3、角度渐变

角度渐变形成类似于雷达扫描的效果,属于利用相对较少的渐变形式。
在一些运用图标的外轮廓背景中会被利用,也可以作为营造产品的光影变革。

4、稠浊渐变

稠浊渐变便是多种颜色随机稠浊,色彩形成不屈均的自然弥散开,也可以成为弥散渐变或者极光渐变。
是最近比较盛行的视觉风格,可以呈现出丰富的色彩变革和随性自然的年轻化趋势,被广泛运用到平面设计、UI 设计、电商设计等浩瀚视觉设计领域。

5、流体渐变

流体渐变便是多种颜色渐变组合,形成带有流动感的视觉效果,常日作为背景来丰富设计的视觉感。
也有动态形式的流体渐变,在 APP 和一些屏幕壁纸中涌现,带来的感官体验也是非常不错的。

随着视觉感官体验的不断追求,设计师已经不知足于趋于平面化的渐变形式,探索出造型多变、色彩丰富、刺激感官的视觉体验,以更加丰富的表现形式来探索渐变办法。

二、渐变小教程

线性渐变、径向渐变和角度渐变实现起来比较大略,软件自带的渐变属性即可知足。
下面重点给大家分享如何实现稠浊渐变的效果,往后再单独给大家分享关于流体渐变的技巧。

稠浊渐变顾名思义便是将多种颜色进行稠浊,形成色彩丰富的过度效果,须要把控的是颜色之间的自然过渡。

方法一:

通过绘制几个不同颜色的形状图形,然后实行高斯模糊形成稠浊渐变,模糊的参数值要适当大一些,一贯到颜色自然过渡为止。

方法二:

如果想要随机性大一些,可以通过画笔工具随意涂抹颜色,这样形成的效果更加随机性。
然后再实行高斯模糊将颜色领悟,带来自然随性的视觉体验。

三、分享几个案例

不能只是纸上谈兵,只有反复磨练和考试测验才会熟能生巧。
根据以上的办法,完成了以下的作品案例,大家也一起来动动手吧!

1、临近色系易把控

稠浊渐变技法层面来说并不难,配色是相对具备难度的,很多同学都会由于配色不到位而做不出精良的作品。
针对运用图标设计中的配色来说,临近色系的搭配是最随意马虎把控的。
选择色相范围在 60° 以内的色值,稠浊出来的色彩排斥感都是比较低的,领悟度比较高,能够呈现出比较舒适自然的视觉感官体验。

如果选择了色相角度大于 60° 的色值,只要数值的增减关系掌握在 30° 以内都属于可控范围,这时候如果涌现较大的色彩排斥感,可以通过降落不透明度来进行视觉平衡。

2、强视觉感还得比拟色

虽然临近色的处理比较随意马虎把控,但是带来的视觉感也是与颜色比拟关系成正比的,想要达到强视觉感还得选比拟色。
色相选择范围在 120°~180° 之间的色值,随意马虎形成较强的视觉张力,通过增加高斯模糊的值才能轻微过度相互之间的色彩排斥感。

3、学会举一反三

本日禀享的履历不局限于运用图标的设计范畴,我们要学会将这个技法举一反三,利用到更多的设计场景中。
比如不才面作品中的一组信息卡片的设计中,通过稠浊渐变形成的卡片背景提高了局部的视觉感,合营磨砂玻璃质感的利用,提高了该部分的视觉感官体验。

4、其他作品欣赏

为了赞助大家理解和开拓思维,为大家选择了几个类似的案例作品,希望可以带给大家更多设计灵感。
(以下作品版权归属原作者,仅作为学习互换)

来源网络