如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

这不仅仅是一篇经验,而是前辈用日积月累得工作心得,用笔记用脑想,最重要得是要走心。还有我是占位符不是简介。

升级版的毛玻璃设计风格,到了今年,已经变得更加流行,非常有必须尝试一下。例如,局部应用在icon或者背景图片上等。

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

以下为使用毛玻璃背景作品 

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

这些效果,如果直接用设计软件做,速度上会慢一些,怎样更快一些做出效果?今天小编分享一个,Mesh网格渐变神器,能够1分钟做出自定义的毛玻璃背景效果,或者用默认的网格渐变,大大提高出图效率。 

Mesh是一种在浏览器中使用WebGL着色器,创建美丽渐变的简单方法

网址: https://meshgradient.com/

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

进入首页,会随机生成两个相似的网络渐变,默认是4个渐变值 

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

整体功能如下 

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

修改默认的网络渐变

点击右上角的刷新按钮,随机生成网络渐变

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

修改渐变色

点击底部的色值小方框,修改颜色

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

修改渐变色形态,生成毛玻璃背景

1. 添加网络渐变点

点击渐变框的任意位置会自动添加一个渐变点。左边渐变框是参考视图,右边渐变框是最终结果,可以拖动右边或左边渐变框的渐变点,修改渐变形态。

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

2. 删除网络渐变点

如果要局部删除某个点,按住Shift,然后点击网格渐变点。如果要删除全部网格渐变点,恢复到初始状态,则点击右上角的清空图标。

导出结果

点击右上角的Export按钮,导出png格式图片

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

官方示例如下

点击选项图标,进入官方示例

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

另:还有一个新出的Sketch插件Mesh Gradients网格渐变神器(meshgradients.com)也很棒,单一许可9.99刀,团队共享许可39.99刀,但国内网络无法购买。 

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

@本文狮有设计原创内容,禁止转载

相关链接

分享一个冷门优质的渐变神器

出色的渐变神器,让你爱上它

没有好的配色灵感? 配色神器第一期(色彩搭配篇),助你瞬间成为配色大神

如何快速做出毛玻璃背景? 有了这个网格渐变神器,1分钟搞定

Powered by Froala Editor

上一篇 2021年5月14日 上午7:16
下一篇 2021年5月14日 上午7:16