分享此网站可得100G教程,联系小洁领取点击这里给我发消息

如何制作扁平化小人动画

APP设计 学UI设计 681次浏览 0个评论 扫描二维码

如何制作扁平化小人动画

首先放上成品图,大家可以先不看教程,有能力的自己分析一下如何制作的,锻炼一下自己对设计作品的解析能力。


开篇语

特别感谢一下@嘉顿小熊饼 阿姨(老师),她好看的作品给了我很多灵感,特别是头像,喜欢的不行~嘿,所以这次小人的脸,我就用了她的风格(●′ω`●)。

一开始做这个小人,并没有想让她动起来,只是想练习一下Sketch(我不会告诉你们我今天才开始学…周围的大神朋友都用了好几年了(¬、¬)。

做完以后,莫名的觉得动起来应该会更有趣吧,就这么做了下去。


制作流程

1.手绘草稿

2.Sketch重绘

3.分拆切图

4.AE动画制作

5.导入PS转GIF


手绘草稿

如何制作扁平化小人动画

说到可爱的画风,那肯定就是五头身以下了,这里我选择了四头身,就像做人物设定一样,选择发型、衣服等等,自己觉得喜欢就好啦。不用画的特别细腻,细节可以在矢量图制作的时候慢慢酌情添加,这里着重表现出人物的特性即可。

【要点】无论你用什么样的画风和比例去表现,记得一定要在整张图里包含一些有特色的东西,比如这张图,重点在面部表情,所以就要大胆的表现出面部情感的张力,嘴和眼睛都用了夸张的手法。


Sketch重绘如何制作扁平化小人动画


分拆切图

如何制作扁平化小人动画

切图过程就不一一细说了,基本分为脸、五官、配饰、躯干、四肢。

细分的方式主要看你希望做动画的时候,哪部分有独立动作,比如我希望耳环会摇摆,所以我就单切了出来。

【要点】这里要说明的是,做动画的时候会用到AE,所以例如嘴巴,眼睛这类的线条动画,可以在AE里直接去画比较好,所以就不用切图了。


AE动画制作

如何制作扁平化小人动画如何制作扁平化小人动画

【要点】好的动画效果要不停地测试和修改,尽量不要使用匀速运动,使用曲线运动会获得更流畅的表现。初学者不需要把元素分的这么细,头+躯干+四肢即可。先熟悉一下动画的制作流程比较好。


导入PS转GIF

如何制作扁平化小人动画
如何制作扁平化小人动画

【要点】注意时间轴要修改为永远,否则只会循环一次。导入后使用组合键【shift+control+alt+S】存储为GIF格式


结语

这篇教程主要为大家梳理了一下类似动画的制作流程和注意事项,同理衍生出很多不同风格的动画GIF,可以经常试试~

第一次使用Shetch,可能有些技法还有更好的制作方式,欢迎大家留言交流~

如何制作扁平化小人动画


推荐:查看最受欢迎的设计导航网站 → http://hao.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!