像素君 发表于 2017-5-25 14:33:35

教程|液体UI的制作

本帖最后由 像素君 于 2017-5-25 14:42 编辑

今天给大家介绍的是液体UI的制作下面是基础效果展示:


具体操作步骤如下:首先进入max里面制作一个水面的波纹效果,先创建一个球体,然后转成可编辑多边形,删除掉下半球






然后把球压瘪,变成一个片



在命令编辑器上,添加波浪Ripple命令



然后给phase(相位)K帧0到-1就行了,方向和动态根据自己需要进行调整



动态调好后,接下来就是上材质,给“漫反射”、“透明”、“反射”添加衰减贴图,然后在折射上面给个光线追踪纹理就会有层次(如下图:)





然后,进入AE里面开始制作


这是原图,先用mask分别扣出中间的血液和边框



然后导入max已经输出的波纹序列,放到已经扣好的血液素材上面,放在合适的位置然后用Alpha反转遮罩,扣掉上面多余的部分,这样血液的下半部分就有了个大概了




再把波纹素材复制一份,根据自己喜好进行调色,为了方便较色,一般可分为暗色、亮色、高光





通过前面的制作已经有了个大概,接下来再给它加点细节。 给它加入液体光斑的效果,如下图,用的是蓝宝石里面的滤镜,结合CC sphere






再加入泡泡细节,用AE里面自带的泡沫滤镜,生成一堆泡泡,然后做成30帧循环




为了丰富细节,再加入些小粒子,也是做成循环的



将全部效果打开,是不是丑爆了?哈哈,没事,把框框都打开吧



这样就得到了最终效果。



如果想把它做成一个动态加载UI,由程序来控制它的加载幅度,应该怎么分层提供给程序呢?在具体项目中,可以和程序确定一下,这里提供一条思路。 可以拆分成四个部分:1)静态的UI外框部分;2)玻璃高光;3)截面最大时的水面,通常为50%;4)整球的完整液体效果。 然后由程序控制mask遮罩层,来控制它的加载幅度。
【更多教程】http://dwz.cn/3oSwbK



suowenwoi 发表于 2017-5-25 15:12:02

元素帖子强,满满正能量!

喵了个咪得 发表于 2017-5-25 15:51:29

元素那么大,我想来看看!

狼之独步 发表于 2017-5-25 15:52:23

立刻提起了精神。

tera7 发表于 2017-5-26 06:06:05

你们大神真会玩!

258348726 发表于 2017-5-26 12:07:06

厉害了

376569522 发表于 2017-5-27 00:11:49

立刻提起了精神

376569522 发表于 2017-5-28 00:33:40

从业不识微元素,做遍项目也枉然

376569522 发表于 2017-5-28 00:53:49

资源发布哪家强?元素首发称大王!

qinghuaqu 发表于 2018-3-16 12:44:00

{:1_238:}

wwwgogdfcorgcn 发表于 2018-3-22 10:49:27

不错

a530602057 发表于 2018-11-14 11:12:07

元素帖子强,满满正能量!

hbc1001 发表于 2018-11-16 14:16:52


想要成大触,天天上元素!

导弹 发表于 2018-11-17 06:43:06

我只想说太牛逼了,666!

红烧大白菜 发表于 2018-11-17 09:06:07

没有看懂。。。是不是太lou

AScccc 发表于 2018-11-18 17:02:30

感谢分享

小元元 发表于 2018-11-22 09:21:36

要想成大触天天上元素

liubing129 发表于 2023-5-6 09:15:14

{:1_236:}

DeJaVu-小7 发表于 2023-8-22 10:34:21

{:1_236:}
页: [1]
查看完整版本: 教程|液体UI的制作