您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 视觉设计 >> 浏览设计教程

2014微博客户端一马当先——短视频动画分享

又一年风花雪月人情冷暖,又一年岁岁年年欢庆祝福。2014甲午年属马,一马当先,马上有钱,龙马精神,万马奔腾……都充斥着人们对来年的期盼和心愿。新浪微博客户端依旧祝愿每一个用户眼前一亮天马行空的展现一下新年新气象。大家在春节版微博客户端能看到2014马上新年快乐~(看过的请轻喷)这是新版客户端更新后开机展示的一段8秒的视(niu)频(bi)动画。由相同的三角形分别组合形成的2014、马头以及新年彩球的图案。通过3D空间旋转、组合、运动连成一体。寓意着千千万万小小的正能量凝聚成此时此刻对新一年的欣喜与祝愿,焕然一体而瞬息万变。

(重点)很多喜欢它的小伙伴儿们都会对这个动画是如何制作出来的颇为感兴趣,以下就是一些简单的分享。首先大家在熟悉photoshop的基础上,还要知道After Effects动画设计软件(小白误入)。

重点:After Effects与Photoshop组合使用制作3D动画

0, 先要有明确的构思(此处省略一万字……)

1,Photoshop制作静态关键帧
这里的帧代表的是每一个组合画面的最终效果。

PS设计好最终的画面好坏是视频动画效果的关键,需要在平面设计的过程中将所有的画面素材提前标注好,标注好图层名,以备动画调整中可以随时确定好每一个元素的属性。最终做到平面的效果就是最终的动画效果(暂停视频的画面效果)。如果想要加入光效或者调整颜色,请把这个任务交给After Effects吧,相信它的能力比起PS有过之而无不及。

2,After Effects 3D图层来还原出平面的效果

psd在AE中载入后会读取到Photoshop的图层,包括图层名以及图层的位置等属性。通过3D设定将原本平面的动画素材至于3D空间中,并加入摄像机、灯光以及阴影,将摄像机和灯光至于合适的空间位置。

3,设定新的3D动画关键帧

在空间中通过重新设置和摆放,在运动过程中添加更多的关键帧。使之运动过程更为充满活力和空间效果。

4,节奏与变速运动的设定

在整体动画的运动关键帧都设定好之后,再根据需要做整体的动画,这里设置了整体的3D旋转,配合上摄像机景深的效果,设计出更具有空间感画面效果。

5,移动端高质量压缩输出
视频的压缩需要根据输出的要求而定,不同的输出方式决定视频压缩的不同格式。在移动设备上,MP4是较为通用的视频格式。在iOS设备上也可以用mov等其他格式。MP4可以保证视频的文件足够小的情况下画面帧数和画质损失较小。最后选择合适的压缩码率和压缩分辨率,输出后在不同的移动设备中测试。但是对颜色色域的压缩还是不能达到完美具体请参考。http://www.zhihu.com/question/20048209/answer/14275262

小结

所有的动画视频设计都都需要一个清晰而明确的思路和方法。才能更加快速和准确的达到最终的表现效果。其中含有运动体验的设计都离不开各种运动变速技巧。无论是运用到视频动画还是界面动效都需要努力的积累和实现应用。

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/ui1898.html
网页logo字体设计浅谈
[图趣]网页色彩提取及应用技巧
图趣网微信
建议反馈
×