AE教程!手把手教你做UI按钮动效

类别:AE教程
水平:入门
观众:3.0w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 ? 立即点击

img

原图作者:Kara Jurgensen

教程作者:软件基础营45期-A29-荧惑

教程指导:如如酱w

交作业:#优设每日作业#

关于教程

这个按钮的细节超棒,教程步骤也非常详细,想要学习AE,可以从这个教程开始练习哦!

你也想做出这么有趣的动效作品吗?戳右边链接让如如老师手把手教你→点我学习制作AE动效

想要来「优优交流群」和其他小伙伴一起学习分享吗?搜索 QQ 群:282706954 进群暗号:优优的忠实观众

教程步骤

步骤一:新建合成并建立背景层

1.1 新建合成,宽高度为800*600,选方形像素,帧速率为24帧每秒,持续时间8~10秒,名称和背景颜色任意。

AE教程!手把手教你做UI按钮动效

1.2 新建纯色层,在左下角图层区域右键新建纯色修改名称和颜色。

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

步骤二:完成第一形态

2.1 新建形状图层,修改填充颜色为514559,修改矩形大小为345*100(记得取消链接),圆度为50(比50大就行)。

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

2.2 选中图层按回车键(Enter)修改名称为大黑。

AE教程!手把手教你做UI按钮动效

2.3 选中图层大黑,在效果和预设里搜索投影并双击它(没有效果和预设的可以在菜单栏的窗口找到),在效果控件窗口修改投影参数(同样没有效果控件的在窗口可以找到)。

AE教程!手把手教你做UI按钮动效

2.4 在图层面板右键新建文本,输入Submit → ,修改字体为微软雅黑,字体大小为34像素,字符间距为-10,填充颜色为ECE9ED。选中文本层,英文输入法下按P调出位置属性(也可在变换的下拉列表找到),修改参数为315*313

AE教程!手把手教你做UI按钮动效

2.5 同时选中大黑和文本层(按住ctrl 再点击可以加选),将时间指示器拖动到10帧的位置,按住“Alt”键不松手再按右中括号截断图层后半部分。

AE教程!手把手教你做UI按钮动效

步骤三:完成第二形态

3.1 新建矩形,修改填充颜色为 FFFDFF,修改图层名称为,修改矩形的大小为445*100(取消链接),圆度为50

AE教程!手把手教你做UI按钮动效

3.2 同上步新建矩形,修改填充颜色为E7E7EB,并修改图层名称为白凹槽,修改矩形大小为340*12,圆度为50

AE教程!手把手教你做UI按钮动效

3.3右键新建文本,输入“×”,修改颜色为DDD9DE,字体为微软雅黑,字体大小为50像素。选中图层,按P键调出位置属性,修改位置为“535*315”

AE教程!手把手教你做UI按钮动效

3.6 新建矩形,修改填充颜色为514559,矩形大小为245*100,圆度50。修改图层名称为小黑。选中小黑,按P键调出位置属性,修改为300*300

AE教程!手把手教你做UI按钮动效

3.7 新建椭圆,修改填充颜色为E7E7EB,修改图层名称为小圆,修改椭圆大小为9*9,位置为-192*0

AE教程!手把手教你做UI按钮动效

3.8 选中小圆图层,Ctrl + D 两次复制两层,修改参数。

AE教程!手把手教你做UI按钮动效

3.9 选中图层Ctrl + D 复制一层,修改名称为绿遮罩,修改填充颜色为C3E5A2

再选中图层绿遮罩Ctrl + D 复制一层,修改名称为绿凹槽

AE教程!手把手教你做UI按钮动效

3.10 修改图层绿凹槽”“绿遮罩的矩形大小为505*12

选中图层绿遮罩,在轨道遮罩处选择“Alpha遮罩绿凹槽’”(如果没有轨道遮罩的将左下角第二个图标点亮)。

AE教程!手把手教你做UI按钮动效

3.11 选中图层19(可以选中第一个图层再按Shift键然后选最后一个图层),将时间指示器停在10帧的位置,Alt + 【,截断前面的图层。再选中图层绿凹槽”“绿遮罩,将时间指示器停在18帧的位置,Alt + 【,截断前面的图层。AE教程!手把手教你做UI按钮动效

3.12 白凹槽”“打关键帧,在时间指示器指向10帧的时候点上前面的小秒表,修改大小分别为340*12445*12,再在20帧的时候修改大小为505*12610*12(这个时候不用点击小秒表也可自动生成关键帧)。

AE教程!手把手教你做UI按钮动效

3.13 再框选四个关键帧,按F9缓动,或者右键关键帧辅助缓动。然后关键帧就会从菱形变成沙漏形。

AE教程!手把手教你做UI按钮动效

3.14 小黑”“×”打上关键帧如下图,按P键可以快速调出位置属性,打完关键帧同样框选关键帧然后按F9添加缓动效果。

AE教程!手把手教你做UI按钮动效

3.15 绿遮罩打关键帧并F9添加缓动效果。(注意第二帧是在两秒六帧的位置)

选中两个关键帧,点击图标编辑器,调节速度曲线如下图。(调节完再次点击图标编辑器可以恢复成正常的时间轴)

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

3.16 给小圆分别添加关键帧如下图,之后选中图层截断后半部分。

AE教程!手把手教你做UI按钮动效

步骤四:完成第三形态

4.1 小黑的填充颜色添加关键帧如下,三个关键帧对应前面三个步骤,颜色为E0444D

AE教程!手把手教你做UI按钮动效

4.2 右键新建文本“Oops!Something went wrong!”(也可以在工具栏选择文本工具),填充颜色为D84E59,调整位置属性(p),再新建文本图层“×”,填充颜色为EEDEE0,调整位置属性(p)。

选中两个图层截断前后一部分,Alt + /

AE教程!手把手教你做UI按钮动效

4.3 选中图层,截断工作区(Alt + 】)

AE教程!手把手教你做UI按钮动效

步骤五:完成第四形态

5.1 选择图层”Ctrl + D 复制两层,移动到最上面,更改名称,选中两个图层 Alt + 【】裁剪图层大小。

AE教程!手把手教你做UI按钮动效

5.2 选中图层白遮罩添加“Alpha遮罩2’”,按下p调出位置属性,打关键帧,F9缓动。

AE教程!手把手教你做UI按钮动效

5.3 选中图层小黑”Ctrl + shift + D,将图层截成两段,选中上面那段移动到最上面,添加颜色关键帧,在14帧的位置颜色变为514559,选中小黑2”图层 Alt + 【】裁剪图层大小(和底下的遮罩层一样大)。

AE教程!手把手教你做UI按钮动效

5.4 打开AI,新建文档不限画布大小(我用的800*600)。

*缩放画板快捷键:Alt + 鼠标滚轮

  1. 画一个深色的矩形不限大小(对照用,我用的292972)。
  2. 新建一个图层。
  3. 选中图层,再选择椭圆工具(长按,下拉列表有),点击画板,建立一个34*34的圆,填充颜色为ffffff
  4. 选中这个描边圆,修改描边大小为4
  5. 选择剪刀工具(橡皮擦工具长按下拉列表有)。

7)选择工具选中这个圆的情况下,用剪刀工具点击图中大概位置的两个点。

8)(9)用直接选择工具选中这段路径,按Delete键删除。

10)选中圆,点击描边,在下拉列表中,将第二个箭头改成箭头8”,缩放改为40%。

11)选中图层2,双击修改名称为箭头

12)在菜单栏点击文件存储Ctrl + S),文件名改为箭头,其他默认保存确定。

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

5.5 回到AE,在项目面板空白处,右键导入文件,选择上一步做完的AI文件,导入为素材模式,选择图层箭头,素材尺寸为图层大小。

AE教程!手把手教你做UI按钮动效

5.6 箭头图层拖到图层面板最上面,修改位置参数(P),截断图层大小同下方图层一样大。

新建文本图层,输入“Try again?”,修改填充颜色为5A525E,修改其他参数如下图,修改位置参数(P),截断图层大小同下方图层一样大。

AE教程!手把手教你做UI按钮动效

步骤六:完成第五形态

6.1 选中图层Ctrl + D复制两层,移动到最上面,修改名称和图层大小,给白遮罩2”添加“Alpha遮罩3’”,给图层白遮罩2”打上位置关键帧(P)。F9缓动。

AE教程!手把手教你做UI按钮动效

6.2 选中图层白凹槽”Ctrl + D复制一层放到最上面,调节图层位置和大小,按U键调出所有关键帧,将时间指示器放在关键帧后面,框选两个关键帧按Delete键删除。

AE教程!手把手教你做UI按钮动效

6.3 同时选中图层绿遮罩”“绿凹槽”Ctrl + D 复制一层,移动到最上面,调节图层位置和大小,按U键调出所有关键帧,将前一个关键帧移动到0500f的位置(不用改参数),第二个关键帧修改参数为370*300。框选两个关键帧,点击图标编辑器来编辑速度曲线,前面已经调整过了,这里需要将后面的曲线再压低一些,前面的曲线拉高一点。

AE教程!手把手教你做UI按钮动效

6.4 选中图层小黑2””Ctrl + D 复制一层,移动到最上面,调节图层位置和大小,按U键调出所有关键帧,将时间指示器放在关键帧后面,框选前面所有关键帧按Delete键删除。

AE教程!手把手教你做UI按钮动效

6.5 将图层小圆按回车键(Enter)修改名称为小圆1”,选中小圆1”“小圆2”“小圆2”Ctrl + D 复制一层,移动到最上面,调节图层位置和大小。

U键调出所有关键帧,选中图中框选的四个关键帧,按Delete键删除,再将小圆4”的第一个关键帧调节位置(与上面图层的第一个关键帧对齐),再框选所有关键帧往前移动,移动到0418f的位置。

AE教程!手把手教你做UI按钮动效

6.6 给三个小球添加新的关键帧如下图。

AE教程!手把手教你做UI按钮动效

步骤七:完成第六形态

7.1 选中图层”Ctrl + D 复制一层,移动到最上面,调节图层位置和大小,按U键调出所有关键帧,将时间指示器放在关键帧后面,框选前面所有关键帧按Delete键删除。再给图层添加新的关键帧如下图。

AE教程!手把手教你做UI按钮动效

7.2 新建文本层“√ Success!”,修改填充颜色为A0D76F,分别修改字体和字体大小,调节图层位置和大小,按p键调出位置属性调节参数如下图。

AE教程!手把手教你做UI按钮动效

步骤八:完成最终形态

8.1 选中图层大黑”“Submit → ”Ctrl + D 复制一层,移动到最上面,调节图层位置,并将“Submit → ”分成两层(可以再复制一层然后各删除一部分),给“→层添加位置关键帧(p)。

AE教程!手把手教你做UI按钮动效

8.2 将时间指示器停放在最后一帧的位置,按下N键(英文输入法)截断工作区。

AE教程!手把手教你做UI按钮动效

8.3 选中图层大黑,在效果控件(没有的可以在窗口找到)点击投影Ctrl + C复制,再选中图层小黑”“小黑2”“小黑3”“大黑2”Ctrl + V粘贴。

AE教程!手把手教你做UI按钮动效

步骤九:导出为Gif

9.1 点击文件导出添加到渲染队列Ctrl + M),输出到后面的蓝色字点击可以修改输出位置,输出模块可以不修改就默认,也可以将格式改为“QuickTime”(导出的视频相对小一点),确认后点击渲染。

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

9.2 打开PS,打开刚刚合成的视频,点击菜单栏文件导出存储为Web所用格式(旧版),快捷键是Ctrl + shift + alt + S,弹出的窗口中,格式选择“GIF”,循环选项选择永远,然后点击存储,修改存储位置,点击保存,动图完成。

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

AE教程!手把手教你做UI按钮动效

最终效果

AE教程!手把手教你做UI按钮动效

你也想做出这么有趣的动效作品吗?戳右边链接让如如老师手把手教你→点我学习制作AE动效

【优优教程网 365 打卡计划】

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

还想要学更多可爱动效的制作?

千万别错过这些教程!

>> AE教程!手把手教你制作3D搜索框UI动效
>> AI+AE教程!教你制作iPhone X的UI文件夹动效

AE教程!手把手教你做UI按钮动效

7 收藏 58

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

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

复制本文链接
img

发表评论 已发布 7

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

优优教程网 365 天打卡计划

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

/

支持键盘 ← → 键翻阅图片