AE教程!超火爆的液体标签栏动效

时间:2022-10-12
B站视频:av379157449
类别:AE教程
水平:入门
观众:1.2w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。
AE教程!超火爆的液体标签栏动效

教程作者主页:动效空间(授权转载)

交作业:微博搜索话题 #优设每日作业# 进入话题页即可发布作业

AEUX插件:https://aeux.io/

一、关于教程

来啦!今天跟大家分享一个比较实用的液态标签栏效果,此次使用的是 Sketch+AE,Sketch导入 AE 需要用插件 AEUX,没有 Sketch 的同学也可以自己用其他软件绘制图标~

二、教程步骤

Step 01 导入素材

01. 在AE的“窗口”-“扩展”里点开AEUX → 设置各参数

AE教程!超火爆的液体标签栏动效

02. Sketch里点击“插件”,打开“AEUX” → 选中要导入的画板 → 点击“Send selection to AE”,导入到Ae

AE教程!超火爆的液体标签栏动效

03. 点击色块,不同icon标记不同颜色,便于区分 → 其它图层隐藏,留下「icon2」和「bg」

AE教程!超火爆的液体标签栏动效

Step 02 逆时针转至90度

AE教程!超火爆的液体标签栏动效

01. 时间线放在第5帧 → 选中「icon2-默认」图层 → 快捷键S,调出“缩放”属性 → 点击“缩放”前的码表,打上一个关键帧

AE教程!超火爆的液体标签栏动效

02. 时间线在第8帧 → “缩放”数值改为0

AE教程!超火爆的液体标签栏动效

03. 框选两个关键帧 → 右击关键帧 → 关键帧辅助 → 缓动(让运动更加自然)

AE教程!超火爆的液体标签栏动效

Step 03 整体放大

AE教程!超火爆的液体标签栏动效

01. 把「黄圆」打一个预合成(Ctrl+Shift+C)

AE教程!超火爆的液体标签栏动效

02. 时间线在第7帧 → 点击「点亮」和「黄圆」图层后的“父级链接”表单 → 都选上「黑圆」(使它们跟随黑圆运动)

AE教程!超火爆的液体标签栏动效

03. 选中「黑圆」→ 调出“缩放”(S键)→ 打上关键帧,数值为0 → 在12帧处,关键帧数值为100

AE教程!超火爆的液体标签栏动效

Step 04 上移,再落下

AE教程!超火爆的液体标签栏动效

时间线在10帧 → 调出“位置”属性(快捷键P)→ 打一个关键帧 → 时间线在20帧 → Y轴数值减去91(使icon向上移动)→ 时间线在1秒零1帧 → Y轴数值加41(使icon向下移动)→ 给关键帧加缓动

AE教程!超火爆的液体标签栏动效

Step 05 黄圆融球效果

AE教程!超火爆的液体标签栏动效

01. 时间线在10帧 → 双击进入「黄圆」预合成 → 复制一个(Ctrl+D)

AE教程!超火爆的液体标签栏动效

02. 选中「黄圆」图层 → 选中“锚点工具”和“对齐”,把锚点放在中下方

AE教程!超火爆的液体标签栏动效

03. 调出“位置”属性(P键)→ 打上关键帧 → 在第20帧 → Y轴数值加54(让圆向下移动)→ 点开合成设置(Ctrl+K),画布高度增加一些

AE教程!超火爆的液体标签栏动效

AE教程!超火爆的液体标签栏动效

04. 在16帧处 → S,调出“缩放”,打上关键帧 → 在1秒处,“缩放”改为0(让它在向下移动的过程中,缩小至消失) → 调出所有操作的关键帧(快捷键U),加上缓动

AE教程!超火爆的液体标签栏动效

05. 在空白区域 → 右击鼠标,新建调整图层

AE教程!超火爆的液体标签栏动效

06. 右击“调整图层”-“效果”-“模糊和锐化”-“高斯模糊”

AE教程!超火爆的液体标签栏动效

07. 再次右击 → 找到“颜色校正”里的曲线

AE教程!超火爆的液体标签栏动效

08. “高斯模糊”的“模糊度”为80

AE教程!超火爆的液体标签栏动效

09. “曲线”的“通道”改为“Alpha” → 调节曲线上下端点,直至黄圆既没有锯齿也不模糊

AE教程!超火爆的液体标签栏动效

Step 06 黑圆背景融合

AE教程!超火爆的液体标签栏动效

复制一个“调整图层”(Ctrl+C)→ 回到总合成,粘贴到「黑圆」上方(Ctrl+V)→ 针对黑圆微调一下曲线

AE教程!超火爆的液体标签栏动效

Step 07 icon返回运动

AE教程!超火爆的液体标签栏动效

01. 在1秒11帧 → 复制一组所有图层(Ctrl+D),放在下面 → 调出所有关键帧(U键)

AE教程!超火爆的液体标签栏动效

02. 右击 → 时间 → 时间反向图层

AE教程!超火爆的液体标签栏动效

03. 把时间轴往前拖,直到第一个关键帧对齐时间线

AE教程!超火爆的液体标签栏动效

04. 按Alt+[,把前面截断

AE教程!超火爆的液体标签栏动效

05. 再选中上方这几个图层 → 按Alt+],把后面截断

AE教程!超火爆的液体标签栏动效

06. 选中时间反向过的「默认icon」→ 把时间轴拉长(让画面最后定格在默认icon上)

AE教程!超火爆的液体标签栏动效

07. 时间线放在3秒处 → 快捷键N,截断工作区 → 右击工作区,选择“将合成修剪至工作区域”

AE教程!超火爆的液体标签栏动效

AE教程!超火爆的液体标签栏动效

到这里就完成啦🎉🎉

三、最终效果图

AE教程!超火爆的液体标签栏动效

欢迎关注作者的微信公众号:「动效空间」

AE教程!超火爆的液体标签栏动效

想要来 优优自学团 和500位小伙伴一起交流学习进步吗?
添加管理员微信:uisdc5 备注「优优自学团」(无备注不通过哦)

学完这篇教程的人还在学…

5 收藏 56

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 2

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片