网页设计 » 视觉设计 » 不用C4D也能做梦幻般的磨砂UI风格

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

发表于: 视觉设计. 评论
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设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }