毛玻璃图标的设计教程

2021-11-30    lanlanwork


1. 一定要注意识别度

其实我一直不敢使用毛玻璃效果的原因,就是害怕有识别度问题,其实网上现在有很多毛玻璃图标:

图片

做概念稿练习练习还好,如果真的落地肯定不行,太影响识别了。

为了不影响识别,我们可以有两个做法。

其一:就是毛玻璃的透明度别太低,像腾讯视频这种:

图片

这样不影响我们识别图形的轮廓。

其二,我们可以把图标主图形用颜色填充,毛玻璃的面积只是很小一部分,起到辅助作用即可,比如像喜马拉雅这种:

图片

这样整体的识别度也不会太受影响。

以上就是关于不影响识别的小方法。

 

2. 技法

毛玻璃图标大部分一共分三层,填充层、玻璃层,模糊层(模糊层是嵌入到玻璃层的)。

其中最重要的一个关键点就是,玻璃层其实是假的,并不是透明的,而是100%的填充色。

举个最简单的例子,我们先画一个深蓝色的填充层:

图片

然后加一个玻璃层,这个玻璃层不是透明的,而是100%填充色:

图片

那有同学就会问了,毛玻璃效果怎么产生呢?其实就是把下面的深蓝色圆复制一个进入到前面的玻璃层:

图片

有人又会问,这也没效果啊,对,因为复制进入玻璃层的圆形和后面的原型位置一摸一样,如果不做改变,就看不出变化,所以我们先来模糊下:

图片

区分的还是不够开,我们再降低透明度:

图片

这效果就立马出来了。

所以从技法层面来说,并不是很难,主要是要注意识别度和整体的设计感。(当然,这只是我个人制作的方法,可能别人也有其他的方式)。

 

3. 底色

前几天在群里看到一位星友问,说为什么他做的效果是第二个,而不是第一个那种透透的毛玻璃感觉:

图片

其实我在最开始做毛玻璃效果的时候和她遇到了一样的问题,这个问题产生的原因就是因为底色,现在的底色是黑色,一个玻璃放在黑色上面,透出来的颜色肯定是深灰色,而不是浅白色(除非你这块毛玻璃本来就是白色的)。

我在之前的一次练习时,做一个黑金配的的毛玻璃效果,最开始就做成了这个样子:

图片

总感觉有点奇怪,其实就是因为在黑色背景上,玻璃层的颜色用了白色,感觉没透过去,就感觉怪怪的,后来我把玻璃层的颜色变成深灰色:

图片

这样看起来就好多了。

制作的原理和刚才说的是一样的,先把大形画完:

图片

然后前面整一个玻璃层,选一个深灰色:

图片

然后把下面的形状复制一个剪切到玻璃层中:

图片

现在看不出效果是因为玻璃层里面的图形和后面的图形位置是一摸一样的,这时候我们把玻璃层的图形模糊:

图片

现在已经差不多区分出来了,如果想要更明显的区分,可以把透明度再降低一点:

图片

也还ok,当然,我觉得加不加透明度,还是看具体效果调整就可以了!

再强调下,大家在做毛玻璃的时候一定要注意背景色哦,不然可能就会看起来很奇怪。

 

总结

好了,以上就是我个人对于毛玻璃效果的一点总结,我个人还是比较喜欢一组毛玻璃图标是多色的,如果是一个颜色,比如这种:

图片

相对来说没那么耐看,如果是多色的:

图片

就会耐看很多,希望给大家一点启发,下期见,默默扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》好惨,我竟然被批评了,问我为什么不安排教程?我怕了

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档