相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

After Effect制作UI交互动效设计教程

小树发布于:2019-10-11 11:04 |原作者: EricUXD|
小树
江苏省 镇江市 平面设计师
发私信 + 关注
简介: 目前市面上已经有很多交互动效原型设计的软件

比如AfterEffects,Principle,Hype3,Flinto...等等。我目前用的最多的就是AE和Pr这两款的,往往在用ps设计界面时我会搭配AE做界面交互

版权申明:本文出自“EricUXD”原创,感谢“EricUXD”的原创教程分享!

目前市面上已经有很多交互动效原型设计的软件

比如AfterEffects,Principle,Hype3,Flinto...等等。我目前用的最多的就是AE和Pr这两款的,往往在用ps设计界面时我会搭配AE做界面交互

当用sketch做界面时就用Principle。这两组黄金搭档可满足pc用户和mac用户的不同需求,当然这两款动效软件也是各有优劣,而我们要做的就是通过两款软件的完美配合,来实现市面上绝大多数的动效的设计和输出。

本次案例是我以前面试全民直播时的一个测试题,因为就只有2天时间做的不是很好大佬们多多批评

那这个案例的设计所用动效软件AE,界面设计软件PS,后期会出Principle搭配sketch的相关动效设计教程。当然如果有老铁对Hype3或者Flinto感兴趣的话可以评论区留言,倘若呼声很高的话,肯定满足你们的要求哈

After Effect制作UI交互动效设计教程 飞特网 AE教程

FEVTE编注:更多After Effects实例教程学习交流和After Effects作品发布请访问飞特网After Effects实例教程栏目,地址:https://www.fevte.com/moive/AE/AESL/

  • 课前准备

——

首先当然要先安装好ps和ae这两款软件啦,下载地址可以在我的第一节教程

『5分钟教你学会Form 插件』自行获取哦

(如链接过期可到公众号EricUED获取哦)

  • 设计教程

——

一.在用PS设计UI界面时要随时注意图层的命名和归类,这不仅会方便我们界面的设计,在后期ae动效设计时也会节省很多时间

After Effect制作UI交互动效设计教程 飞特网 AE教程

After Effect制作UI交互动效设计教程 飞特网 AE教程

二.当我们完成了界面设计的部分后,这时就可以开始整理图层来导入到AE做动效了,注意:整理的规则是,将动效中不产生空间变化的图层分别Ctrl+E给合成为图片形式比如tabbar、statusbar。将卡片或者是按钮都合成为图片,如果有元素需要产生位移最好提前在ps中将元素的运动前后的状态做出来,以便于我们后期ae中动画的设计

After Effect制作UI交互动效设计教程 飞特网 AE教程

三.打开AE,合成设置为我们的设计稿尺寸,一般为750*1334的大小,时间的话看你的动画的长短而定

After Effect制作UI交互动效设计教程 飞特网 AE教程

四.将PS文件导入到AE中,对话框中导入种类:合成-保持图层大小,图层选项:可编辑的图层样式,然后将合层拉倒动效1的时间轴上

After Effect制作UI交互动效设计教程 飞特网 AE教程

123下一页
22

好评
21

差评

刚表态过的朋友 (43 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

小树
江苏省 镇江市 平面设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计