搜索

    [平面UI] 教程|液体UI的制作

    查看：1829 |回复：19 | 2017-5-25 14:33:35
    像素君

    您需要 登录 才可以下载或查看，没有账号？注册

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

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



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



    image003.jpg




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



    在命令编辑器上，添加波浪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

    评价

    奥特倩
    楼主厉害 教程很详细 受教了~  发表于 2020-7-16 18:40

    评分

    参与人数 1元素币 +15 贡献值 +1 展开 理由
    狼之独步 + 15 + 1 很棒的教程~~

    查看全部评分

    2017-5-25 14:33:35  
    赞 赞 2

    使用道具 登录
    19个回答，把该问题分享到群，邀请大神一起回答。
    2#
    suowenwoi  

    关注TA
    元素帖子强，满满正能量！
    回复 收起回复
    2017-5-25 15:12:02   回复
    赞 赞 2

    使用道具 登录
    3#
    喵了个咪得  

    关注TA
    元素那么大，我想来看看！
    回复 收起回复
    2017-5-25 15:51:29   回复
    赞 赞 2

    使用道具 登录
    4#
    狼之独步  

    关注TA
    立刻提起了精神。
    回复 收起回复
    2017-5-25 15:52:23   回复
    赞 赞 2

    使用道具 登录
    5#
    tera7  

    关注TA
    你们大神真会玩！
    回复 收起回复
    2017-5-26 06:06:05   回复
    赞 赞 2

    使用道具 登录
    6#
    258348726  

    关注TA
    厉害了
    回复 收起回复
    2017-5-26 12:07:06   回复
    赞 赞 2

    使用道具 登录
    7#
    376569522  

    关注TA
    立刻提起了精神
    回复 收起回复
    2017-5-27 00:11:49   回复
    赞 赞 2

    使用道具 登录
    8#
    376569522  

    关注TA
    从业不识微元素，做遍项目也枉然
    回复 收起回复
    2017-5-28 00:33:40   回复
    赞 赞 2

    使用道具 登录
    9#
    376569522  

    关注TA
    资源发布哪家强？元素首发称大王！
    回复 收起回复
    2017-5-28 00:53:49   回复
    赞 赞 2

    使用道具 登录
    10#
    qinghuaqu  

    关注TA
    回复 收起回复
    2018-3-16 12:44:00   回复
    赞 赞 2

    使用道具 登录
    11#
    wwwgogdfcorgcn  

    关注TA
    不错
    回复 收起回复
    2018-3-22 10:49:27   回复
    赞 赞 2

    使用道具 登录
    12#
    a530602057  

    关注TA
    元素帖子强，满满正能量！
    回复 收起回复
    2018-11-14 11:12:07   回复
    赞 赞 2

    使用道具 登录
    13#
    hbc1001  

    关注TA

    想要成大触，天天上元素！
    回复 收起回复
    2018-11-16 14:16:52   回复
    赞 赞 2

    使用道具 登录
    14#
    导弹  

    关注TA
    我只想说太牛逼了，666！
    回复 收起回复
    2018-11-17 06:43:06   回复
    赞 赞 2

    使用道具 登录
    15#
    红烧大白菜  

    关注TA
    没有看懂。。。是不是太lou
    回复 收起回复
    2018-11-17 09:06:07   回复
    赞 赞 2

    使用道具 登录
    16#
    AScccc  

    关注TA
    感谢分享
    回复 收起回复
    2018-11-18 17:02:30   回复
    赞 赞 2

    使用道具 登录
    17#
    小元元  

    关注TA
    要想成大触  天天上元素
    回复 收起回复
    2018-11-22 09:21:36   回复
    赞 赞 2

    使用道具 登录
    18#
    liubing129  

    关注TA
    回复 收起回复
    2023-5-6 09:15:14   回复
    赞 赞 2

    使用道具 登录
    19#
    DeJaVu-小7  

    关注TA
    回复 收起回复
    2023-8-22 10:34:21   回复
    赞 赞 1

    使用道具 登录

    CG 游戏行业专业问题

    用户体验交互UEUI平面设计界面

    显示全部标签

    搜索中出现以下关键词标签即可被搜索引擎找到
    楼主可在左边的【标签】按钮中添加
    希望搜索结果同时满足多个条件，可用空格隔开
    • 用户体验
    • 交互
    • UE
    • UI
    • 平面设计
    • 界面

    最新问题

    最热回答

    高级模式
    B Color Image Link Quote Smilies
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    提醒
    0
    快速回复 返回顶部 返回列表