网页设计 » 视觉设计 » 毛玻璃图标设计教程

毛玻璃图标设计教程

发表于: 视觉设计. 评论
Sponsor

最近看到一些毛玻璃效果挺好看的,于是也学习尝试用毛玻璃效果应用到图标设计,效果还不错,本文主要用Sketch绘制,但只要学会它的结构原理,你就可以在Photoshop, Sketch, Figma和AI上绘制出来。

毛玻璃图标结构原理,它分别是由:主元素、模糊效果、玻璃投影、磨砂玻璃组成。

毛玻璃图标设计教程

图像:Silence Video

教程&步骤:

1、创建玻璃层,利用透明的白色渐变来实现玻璃通透的效果。

毛玻璃图标设计教程

2、在玻璃层创建背景模糊(Photoshop没有此功能,用剪切蒙版+高斯模糊代替)

毛玻璃图标设计教程

如果是Photoshop,就只能用高斯模糊来做了,先复制一层出来,让后用剪切蒙版切掉多余的图形,如下图:

毛玻璃图标设计教程

3、添加高光,在玻璃层分别添加两个高光,左上角边框用白色渐变(#FFFFFF 100% – 0%),右小角边框用高明度的主体色渐变(#00FFB3 0% – 100%)

毛玻璃图标设计教程

4、制作玻璃投影,复制底层,并设置为高斯模糊,然后利用蒙版切出投影。

毛玻璃图标设计教程

5、添加磨砂效果,在PS中可以用「滤镜 – 杂色 – 添加杂色」来添加磨砂的效果,但是Sketch, Figma没有这个功能,所以就用noise图片来替代。下图就是直接盖上一层图片,修改一下透明度就好了。

毛玻璃图标设计教程

6、最终效果

白色渐变的玻璃效果在亮色调不那么好看,于是把白色渐变换成高亮的主色调,这样就好很多了。

毛玻璃图标设计教程

毛玻璃图标设计教程

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }