火爆全网的“磨砂视觉”，5分钟搞定？
最近“毛玻璃图标”疯狂刷屏，本文主要分享一个创作思路，让扁平化的“磨砂视觉”变得立体和生动起来。基于这个思路进行触类旁通，可以得到无限有趣的视觉创意。
去年开始很多品牌试水“磨砂风格” - 一种非常治愈和温润的风格。视觉上用轻盈、透亮的材质结合光线折射的效果去营造一种年轻的、元气的、多彩的、梦幻的微光世界，积极拥抱更年轻的用户圈层。
举几个例子。
▽ 微软Microsoft 365设计语言
按照常规表现技法，这样的效果往往要用到C4D等三维软件，结合多层材质参数和HDR光源环境，通过Octane或Redshift等渲染插件去实现。
然而，学习成本高？参数不会调？硬件配置不抗造？
没关系。今天分享一个小技巧，教你用sketch或figma快速实现类似效果。
关键点：背景模糊、彩虹渐变、缩放模糊
STEP/01 基本形体
用Ai拉一个标准轴侧立方体。建议用正三角形为单元进行阵列，这样方便后期延展不同规格的立方体。
拷贝到sketch画板里，复制一层方向调转180°，编组放在下一层，作为立方体的背面。
将标红的四边形复制一份，放在最底层作为投影层。
需要注意的是，这块四边形作为立方体底面，跟立方体本身在接触面的阴影重合，用一层去实现即可，方便调整也避免多层叠加导致颜色变脏。
在正面和背面两组之间加一个球体，或其他你想要表达的体块。球体着色方便，对透视没有要求，这里就用球体做演示。
STEP/02 光色效果
自然光通过玻璃晶体折射会形成色散效应，因此我们看到的晶体不是单色，在一定角度下能观察到彩虹渐变。
所以在给四边形添加着色层的时候，可以结合真实世界晶体折射的物理效果，来分层“渲染”每一个面，这过程需要一点点耐心。
用两个面举例，大致示意一下渐变的方向。个人习惯用径向渐变，这样叠加了其他着色层之后比较有流动感。
正面3个块面先用彩虹渐变拉出基调，再错开角度用白色渐变塑造出明暗；然后添加内发光让边缘折射光强化，中间变得通透；最后用内阴影刻画出高光边，提高整体的精气神儿。
我额外给正面加了一道反光，用来强调它表层是镜面反射，而内里才是磨砂雾化效果。
背面3个块面就挑最底层的说吧，另外两个略过。用浅蓝灰的渐变拉出阴影层次，盖一层彩虹渐变（不盖问题也不大），最后加一个高光角（用来消除部分区域的黑影），混合模式为正片叠底。
6个面调整完毕之后，给中间层加一个球体。由于被遮盖，就大致调一个渐变着色好了，让它大眼看上去是个球体。
放一下我的各层参数，供参考。
源文件在评论链接里，需要可以自取。
基本形体着色完成之后，给背景来一点点微光渐变，然后按照顺序盖好每一层元素，你就能看到大致这样的效果。
是不是还，挺有内味的~
正面3块的磨砂程度不必完全相同，可以有所对比，这样能相应提高材质的丰富度，增加一点质感。
STEP/03 环境渲染
一个有质感的环境包含了反光、投影和焦散，尤其对于晶体来说，光线折射形成的焦散是画面的灵魂。在开始之前，要先确定场景的光源方向和角度。
接触面的反光比较简单也略过，比较关键的是投影层的处理。
投影的要点在于，一要体现更为真实的色散效果，二要大致符合光线的衰减原理，三要表达出核心区域的焦散。
关于第一点，还是用彩虹渐变；第二点，用sketch自带的缩放模糊可实现；第三点，加两个发光层。
△ 图片来自bilibili @白无常C4D
投影层的基底就好了。在合适的位置（靠多观察）加两层高斯模糊的椭圆，用来模拟焦散效果。
再把接触面的反光层渐变也加上，整个场景是不是瞬间就活了起来！
其实到这一步已经离最终效果大差不差，但反复观察之后还是觉得缺了点什么。
回到现实中仔细观察，终于挖掘到了症结：真实的晶体除了光线折射会形成焦散外，光线在正面的反射也会有焦散！
于是哐哐一顿操作，把正面的也补上。由于时间关系，没有刻意还原焦散区域的形状，这里演示只用同样的四边形概括一下。
尝试过几种不同方向之后快速选了中间的方案，因为光的衰减更显自然，整体画面的线条结构更好看。
最后给画面添加一个色彩调整图层，配上简单的文字排版，就可以输出了。
看到这里也就花了一杯咖啡的时间，是不是就还，挺方便的？
有这个思路做支撑，相信你脑海里已经开始发散，想到了很多可能的创意。比如下图这样的夜光矩阵。
好了，今天的分享就先到这。如果有不同的想法欢迎在评论区切磋 ~ 另外记得，源文件在评论链接里，需要自取。
获取全套iPhone 12系列高质量样机模板
# 推荐阅读 #