10

不用C4D也能做梦幻般的磨砂UI风格

 4 years ago
source link: https://www.shejidaren.com/mosha-ui-fengge.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

不用C4D也能做梦幻般的磨砂UI风格

4月 19, 2021 发表于: 视觉设计. 评论

Sponsor

前言：去年开始很多品牌试水“磨砂风格” 一种非常治愈和温润的风格。视觉上用轻盈、透亮的材质结合光线折射的效果去营造一种年轻的、元气的、多彩的、梦幻的微光世界，积极拥抱更年轻的用户圈层。

举几个例子。

▽ 微软Microsoft 365设计语言

不用C4D也能做梦幻般的磨砂UI风格

▽ 腾讯文档品牌升级不用C4D也能做梦幻般的磨砂UI风格

▽ 优酷APP V9.0不用C4D也能做梦幻般的磨砂UI风格

▽ 小米MIUI V12不用C4D也能做梦幻般的磨砂UI风格

按照常规表现技法，这样的效果往往要用到C4D等三维软件，结合多层材质参数和HDR光源环境，通过Octane或Redshift等渲染插件去实现。

然而，学习成本高？参数不会调？硬件配置不抗造？

没关系。今天分享一个小技巧，教你用sketch或figma快速实现类似效果。

关键点：背景模糊、彩虹渐变、缩放模糊

01 基本形体

用Ai拉一个标准轴侧立方体。建议用正三角形为单元进行阵列，这样方便后期延展不同规格的立方体。

不用C4D也能做梦幻般的磨砂UI风格

拷贝到sketch画板里，复制一层方向调转180°，编组放在下一层，作为立方体的背面。

不用C4D也能做梦幻般的磨砂UI风格

将标红的四边形复制一份，放在最底层作为投影层。

需要注意的是，这块四边形作为立方体底面，跟立方体本身在接触面的阴影重合，用一层去实现即可，方便调整也避免多层叠加导致颜色变脏。

不用C4D也能做梦幻般的磨砂UI风格

在正面和背面两组之间加一个球体，或其他你想要表达的体块。球体着色方便，对透视没有要求，这里就用球体做演示。

不用C4D也能做梦幻般的磨砂UI风格

02 光色效果

自然光通过玻璃晶体折射会形成色散效应，因此我们看到的晶体不是单色，在一定角度下能观察到彩虹渐变。

所以在给四边形添加着色层的时候，可以结合真实世界晶体折射的物理效果，来分层“渲染”每一个面，这过程需要一点点耐心。

用两个面举例，大致示意一下渐变的方向。个人习惯用径向渐变，这样叠加了其他着色层之后比较有流动感。

不用C4D也能做梦幻般的磨砂UI风格

正面3个块面先用彩虹渐变拉出基调，再错开角度用白色渐变塑造出明暗；然后添加内发光让边缘折射光强化，中间变得通透；最后用内阴影刻画出高光边，提高整体的精气神儿。

我额外给正面加了一道反光，用来强调它表层是镜面反射，而内里才是磨砂雾化效果。

不用C4D也能做梦幻般的磨砂UI风格

背面3个块面就挑最底层的说吧，另外两个略过。用浅蓝灰的渐变拉出阴影层次，盖一层彩虹渐变（不盖问题也不大），最后加一个高光角（用来消除部分区域的黑影），混合模式为正片叠底。

6个面调整完毕之后，给中间层加一个球体。由于被遮盖，就大致调一个渐变着色好了，让它大眼看上去是个球体。

放一下我的各层参数，供参考。

不用C4D也能做梦幻般的磨砂UI风格

源文件在评论链接里，需要可以自取。

基本形体着色完成之后，给背景来一点点微光渐变，然后按照顺序盖好每一层元素，你就能看到大致这样的效果。

是不是还，挺有内味的~

不用C4D也能做梦幻般的磨砂UI风格

正面3块的磨砂程度不必完全相同，可以有所对比，这样能相应提高材质的丰富度，增加一点质感。

03 环境渲染

一个有质感的环境包含了反光、投影和焦散，尤其对于晶体来说，光线折射形成的焦散是画面的灵魂。在开始之前，要先确定场景的光源方向和角度。

接触面的反光比较简单也略过，比较关键的是投影层的处理。

投影的要点在于，一要体现更为真实的色散效果，二要大致符合光线的衰减原理，三要表达出核心区域的焦散。

关于第一点，还是用彩虹渐变；第二点，用sketch自带的缩放模糊可实现；第三点，加两个发光层。

不用C4D也能做梦幻般的磨砂UI风格△ 图片来自bilibili @白无常C4D

用我自己的图层属性做一个演示。先用蓝灰色给投影层一个悲凉的底色，接着逐层覆盖色散渐变层、空气氛围层、衰减层。然后凭感觉添加一个非常重要的缩放模糊，缩放的起点可以大致参考我的位置。不用C4D也能做梦幻般的磨砂UI风格

不用C4D也能做梦幻般的磨砂UI风格

投影层的基底就好了。在合适的位置（靠多观察）加两层高斯模糊的椭圆，用来模拟焦散效果。

再把接触面的反光层渐变也加上，整个场景是不是瞬间就活了起来！

不用C4D也能做梦幻般的磨砂UI风格

其实到这一步已经离最终效果大差不差，但反复观察之后还是觉得缺了点什么。

回到现实中仔细观察，终于挖掘到了症结：真实的晶体除了光线折射会形成焦散外，光线在正面的反射也会有焦散！

于是哐哐一顿操作，把正面的也补上。由于时间关系，没有刻意还原焦散区域的形状，这里演示只用同样的四边形概括一下。

不用C4D也能做梦幻般的磨砂UI风格

尝试过几种不同方向之后快速选了中间的方案，因为光的衰减更显自然，整体画面的线条结构更好看。

最后给画面添加一个色彩调整图层，配上简单的文字排版，就可以输出了。

不用C4D也能做梦幻般的磨砂UI风格

看到这里也就花了一杯咖啡的时间，是不是就还，挺方便的？

有这个思路做支撑，相信你脑海里已经开始发散，想到了很多可能的创意。比如下图这样的夜光矩阵。

不用C4D也能做梦幻般的磨砂UI风格

下载教程源文件

链接：https://pan.baidu.com/s/19k7mLfPtPPdXmV90pLw_Cg
提取码：9227

来源 | 赏酒二两（ID：Spirits-100g）

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK