提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
动效设计教程
前言
今年春节小米商城为了体现节日的热闹和喜庆,首页头图采用了动画效果,本篇文章会给大家详细讲解动画的设计。
先看图,后讲解,头图的主视觉设计出自我们团队的美女设计师可萌之手。
案例解析
案例中主要讲解星光扩散和烟花的设计,以及如何导出合适的大小的GIF图。
用到的软件是AE+PS,星光扩散和烟花都使用了AE插件Particular,钱袋的绳子飘动使用了,人偶控制点工具。
Particular是AE的第三方插件,需要先安装插件。
星光扩散效果
打开AE新建所需的尺寸合成,然后新建纯色图层,在效果和预设搜索栏中搜索Particular,赋予刚新建的纯色图层。
在效果栏中调整几个关键的参数,调整粒子每秒的发射数量、粒子生命、粒子大小、粒子类型选择发光球体,粒子颜色等,具体根据想要的效果而定。
如何让星光扩散循环播放?
因为我们最终要导出一个GIF图,所以循环播放不能有卡顿,如何做,非常简单,看下图。
复制一个效果图层,如上图保证两个图层的首尾画面一致,然后分别给两个图层加透明度关键帧,一个100%-0,一个0—100%,这样最终循环播放画面就是一致的。
烟花效果
烟花效果同样使用Particular,在插件中有个“发射行为”功能,选择“爆炸”选项,这样粒子是以爆炸的形式出现,恰好模拟烟火的效果。
接下来是最关键的调节,把爆炸的点变成线,下拉找到“辅助系统”,改为“连接”,然后调节粒子数量,调节粒子的生命值,模拟烟火扩散和消失的效果。
钱袋绳子飘动效果
用到了AE自带的“人偶控制点工具”给绳子标记控制点,然后移动相应控制的位置做出飘动的效果,这个功能特点是,它可以让一个物体局部移动。
导出GIF
GIF格式虽然好用,但有时候总会很大,比如上图使用PS导出GIF的大小大概是15M多,显然是不能用的,很多压缩的软件也不能压缩到合适的大小。
下面分享一个我导出的一个小技巧,在导出弹窗中,有一个“损耗”选项,可以调节数值达到想到的大小,但损耗数值也不能太高,图片会模糊不能用。
同样的图我就调节了一个数值,就降到了3点几兆,着实给力,清晰度还不错。
另外,在设计动画的时候,可以降低帧速率也可以降低GIF的大小,这个也是我常用的办法。
最后
Particular粒子插件是动画设计中非常常用的工具,所以UI设计师有必要去学习一下,它的强大远不止如此。
获取粒子插件关注我的微信公众号“互联网设计帮”,后台回复“粒子”。中文汉化支持Mac、Win
新的一年大家加油!
Powered by Froala Editor
微信公众号:互联网设计帮
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册