AI教程 2022年04月25日
0 收藏 0 点赞 243 浏览 2782 个字
摘要 :

教程作者:设计师就业衔接班14期-24-薯条 教程指导:如如(极致设计设计师就业衔接班讲师) 交作业:#极致设计每日作业# 文章编辑:@雪寄草 关于教程 大家好,我是极致……

教程作者:设计师就业衔接班14期-24-薯条

教程指导:如如(极致设计设计师就业衔接班讲师)

交作业:#极致设计每日作业#

文章编辑:@雪寄草

关于教程

大家好,我是极致设计学员薯条,今天由我来给大家讲解这个银行卡MG动画的设计全过程,一个简单的动效就可以让你的作品魅力无限哦~

教程效果图

AI+AE教程!教你制作简单的银行卡旋转动画

教程步骤

Step 01 绘制银行卡正面

1.1 打开AI,建立一个800×600px的画布。

AI+AE教程!教你制作简单的银行卡旋转动画

1.2 用「矩形工具」绘制一个矩形,大小如下,作为背景(颜色为FF7B49),把图层名称改为「背景」。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

1.3 接着制作卡片,新建图层,改名字为「卡片」。同样是用「矩形工具」绘制,大小为300×190px,颜色为673553,圆角半径为23px。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

1.4 然后制作磁条。新建图层,改名为「磁条」,绘制一个60×50px的矩形,颜色为FDD484,然后用钢笔绘制以下形状颜色为673553。

AI+AE教程!教你制作简单的银行卡旋转动画

1.5 新建图层,改名「圆透」,用「圆形工具」画一个60×60px的圆,颜色为FDD484,透明度改为60%。再次新建图层,改名为「圆1」,重复以上操作,透明度改为100%。位置放在如图位置。

AI+AE教程!教你制作简单的银行卡旋转动画

1.6 点击文字工具输入文字,大小为29px,颜色为FDD484,字体为宋体。

AI+AE教程!教你制作简单的银行卡旋转动画

1.7 点击文字图层,点击「菜单栏」里的「对象-扩展」,选择对象和填充,把文字变化为形状。

AI+AE教程!教你制作简单的银行卡旋转动画

1.8 再次选择文字图层,鼠标右键,点击「取消编组」。单击击右上角的三条线图标,点击「释放到图层顺序」。把释放的图层改名从「1-16」。然后拖出文字层组。全部拖出后,删除文字图层。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

Step 02 绘制银行卡反面

除了卡片与背景图层,其他图层全部隐藏。

2.1 新建图层,改名字为「黑磁条」,用「矩形工具」绘制大小为300×45px,颜色为161616,的矩形,放在如下位置。

AI+AE教程!教你制作简单的银行卡旋转动画

2.2 新建图层,改名字为「黄条」,用「矩形工具」绘制两个矩形,大小分别为为128×40px和64×40px,颜色为FDD484,的矩形,放在如下位置。

AI+AE教程!教你制作简单的银行卡旋转动画

2.3 新建图层,改名字为「反光条」,用「矩形工具」绘制3个矩形,分别为一个14×200px和两个7×200px,颜色为6D5F45,放在如下位置。然后用直接选择工具框选矩形上方的瞄点,按住shift,横向拉120px左右。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

Ai的部分就已经完成了,保存命名为银行卡,导入AE。

Step 03 导入AE

AI+AE教程!教你制作简单的银行卡旋转动画

3.1 导入Ai文件,选中「反光条」、「黄条」、「黑磁条」,鼠标右键,选择「预合成」,命名「反面」。选中除卡片背景以外剩余图层,鼠标右键,选择「预合成」,命名「正面」。图层循序为「正面」-「卡片」-「反面」-「背景」。点击「卡片」,鼠标右键,选择「创建」-「从矢量图层创建形状」。删除卡片Ai图层。打开3D.如图:

AI+AE教程!教你制作简单的银行卡旋转动画

3.2 制作卡片厚度:点开「卡片轮廓」图层,点击「几何选项」,把凸出深度改为5,如果「几何选项」是灰色的,可以先把渲染器改为C4D。

AI+AE教程!教你制作简单的银行卡旋转动画

3.3 调整正反面的位置。点击「正面」-「变换」-「位置」,Z轴改为5.1,同理反面改为5.1。

AI+AE教程!教你制作简单的银行卡旋转动画

3.4 拉一个正面反面对「卡片轮廓」的父子级:

AI+AE教程!教你制作简单的银行卡旋转动画

3.5 时间指示器放在在6s的位置,点击快捷键n。把动图的时间设置为6s。

3.6 时间指示器放在0s的位置,点击「卡片」,给「旋转」属性打上关键帧,时间指示器放在6s的位置,改为1x(就是一周)。

AI+AE教程!教你制作简单的银行卡旋转动画

这样,卡片的3D旋转效果就做好了。接下来就开始做正反面的细节了。

Step 04 制作银行卡正面动效

4.1 打开「正面」的预合成,选中全部图层,把时间指示器放在1s15帧的位置,按快捷键「Alt+右中括号」截断。

AI+AE教程!教你制作简单的银行卡旋转动画

4.2 在选中全部图层的情况下,Ctrl+D复制全部图层,移到「磁条」图层下的位置,把时间指示器放在4s15帧的位置,移动复制图层到此位置,如图:

AI+AE教程!教你制作简单的银行卡旋转动画

4.3 打开「圆透」图层,时间指示器放在0s的位置,打开「位置」属性,在如图所示区域打上关键帧,然后把时间指示器移动到1s15帧,改变位置(如图),这样圆透就有一个消失的效果。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

4.4 选中32图层,把中心点移到该图层中0的下边,如图。接下来的31.17重复以上操作。

AI+AE教程!教你制作简单的银行卡旋转动画

4.5 接下来选中32-17图层,点击快捷键S(缩放的快捷键),把时间指示器放在4s15帧的位置,改变缩放为0,打上关键帧。然后把时间指示器放在5s的位置,改变缩放为100.最后把时间指示器放在4s25帧的位置改变缩放为110,制造会回弹效果。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

4.6 还是在选中32、17的图层情况下,把时间指示器放在5s15帧的位置「Alt+右中括号」截断,右键.关键帧辅助.序列图层。改为如图所示。

AI+AE教程!教你制作简单的银行卡旋转动画

4.7 然后把时间指示器放在6s的位置,「Alt+右中括号」,得到如图:

AI+AE教程!教你制作简单的银行卡旋转动画

这样所有的0就有一个慢慢长出来的效果。

4.8 选中圆透2图层,在4s15帧的位置打上位置的关键帧(方法同圆透一致),位置如图所示,在6s的位置打上关键帧,位置如图,这样就有了圆透慢慢长出来的效果。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

4.9 选中磁条2图层,右键.矢量图层转换为形状,做一个磁条图层对磁条轮廓图层的反转Alpha轨道遮罩。

AI+AE教程!教你制作简单的银行卡旋转动画

4.10 选中磁条2轮廓图层,在4s15帧的位置打上位置的关键帧(方法同圆透一致),位置如图所示,在6s的位置打上关键帧,位置如图,这样就有了磁条慢慢长出来的效果。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

这样正面的动效就全部做完了。

Step 05 制作银行卡反面动效

5.1 进入反面的预合成,首先确定动效时间,选中全部图层,在1s15帧的位置Alt+【,在4s15帧的位置按「Alt+右中括号」。

AI+AE教程!教你制作简单的银行卡旋转动画

5.2 首件制作「黑磁条」生长出来的效果,方法同「磁条2」一致。选中「黑磁条」图层,鼠标右键,选择「创建」-「从矢量图层转换为形状」,做一个磁条图层对磁条轮廓图层的反转Alpha轨道遮罩。选中「黑磁条」轮廓图层,在1s15帧打上「位置」属性的关键帧,位置如图所示,在3s的位置打上关键帧,位置如图。

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

5.3 用「矩形工具」新建矩形,大小可以遮挡住黄条就可以,做一个黄条对形状图层的「Alpha反转遮罩」。选中形状图层,在1s15帧的位置打上位置的关键帧,位置如图所示,在3s的位置打上关键帧,位置如图

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

5.4 选中「黑磁条轮廓」图层,Ctrl+D复制一个图层得到磁条轮廓2,去除磁条轮廓2中的位置关键帧。磁条轮廓2放在反光条上边,做一个反光条对磁条轮廓2图层的Alpha轨道遮罩。选中黑磁条轮廓图层,在1s15帧的位置打上位置的关键帧,位置如图所示,在3s15帧的位置打上关键帧,位置如图

AI+AE教程!教你制作简单的银行卡旋转动画 AI+AE教程!教你制作简单的银行卡旋转动画

5.5 选择黑磁条轮廓的关键帧,F9添加缓动效果,点击图表编辑器,右键.速度图表编辑,把曲线调到如图样式:

AI+AE教程!教你制作简单的银行卡旋转动画

最终效果图

最后,返回银行卡合成中就可以得到一个银行卡动效了,让我们点击空格键看看效果吧:

AI+AE教程!教你制作简单的银行卡旋转动画

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

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

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/13215.html

相关推荐
精品
AI教程!酷炫几何风海报字体效果小教程
教程作者:@郁闷的鸡(极致设计大课堂UI&动效课讲师) 报名课程:鸡爷UI就业实战班  |  动效设计全能实战班 交作业:#极致设计…
日期:2022-05-22 点赞:1 阅读:770
优秀
AI教程!教你绘制扁平风矢量网页插画
教程作者:极致设计设计师就业衔接班14期-128-晴 教程指导:如如(极致设计设计师就业衔接班讲师) 交作业请到微博搜索话题→ #极致设计每…
日期:2022-05-22 点赞:0 阅读:383
优质
这LOGO怎么做?第58期-八边形立体螺旋LOGO
教程作者:君小阳(授权转载自公众号:这logo怎么了) 交作业:#极致设计每日作业# 关于教程 各位狗子们晚上好,今天给大家讲解下面这个lo…
日期:2022-05-22 点赞:0 阅读:273
最新
AI+AE教程!教你制作扁平风格猫咪动态插画
教程作者:极致设计设计师就业衔接班14期-99-kiko 教程指导:如如(极致设计设计师就业衔接班讲师) 交作业:#极致设计每日作业# 文章…
日期:2022-05-22 点赞:0 阅读:270
最新
Ai 超全面自学手册!NO.09 文字工具
本期主题:文字工具的使用 本期讲师:吃喝玩乐团团长(极致设计设计师就业衔接班讲师) 文章编辑:@雪寄草 由衔接班的三位讲师合力带来的 全新 …
日期:2022-05-22 点赞:0 阅读:1,033
推荐
AI教程!2022新版AI新功能,轻松制作3D图标视觉海报
教程作者:吃喝玩乐团团长(极致设计设计师就业衔接班讲师) 交作业:#极致设计每日作业# 文章编辑:@雪寄草 关于教程 说出来你可能不信,这回…
日期:2022-05-14 点赞:0 阅读:294
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站