电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

如何用AE制作简单的UI动效教程

如何用AE制作简单的UI动效教程_第1页
1/24
如何用AE制作简单的UI动效教程_第2页
2/24
如何用AE制作简单的UI动效教程_第3页
3/24
如何用 AE创建简单的 UI动效 天 气 应 用 gif( 据 观 测 , 小 圆 点 弹 的 过 了 , 各 位 制 作 的 时 候 修 改 一 下 吧 ) 文 末 提 供 源 文 件 下 载 在 Dribbble和 Behance上 , 你 们 可 能 见 过 很 多 用 Gif来 表 达 设 计 理 念 的 UI作品 。 很 多 人 都 想 知 道 怎 么 来 制 作 , 怎 样 更 好 、 更 高 效 的 表 达 自 己 的 理 念 。 很 明 显 ,动 态 的 展 现 比 静 态 的 更 形 象 , 在 这 片 文 章 中 , 我 将 教 大 家 如 何 “动 态 化”自 己 的设 计 作 品 。 动 态 GIF展 现 UI作 品 , 优点 在 于: 1.展 示实际工作 流程 2.利用 转场, 来 展 示应 用 不同状态 时 的 效 果 3.便 于 网 络 分 享 。 工具 1.After Effects CS6 or CC 2.Photoshop CS6 or CC 设计流程 After Effects 1.在一个合成中创建转场效果 2.另外一个合成中创建展示效果 3.导出 Photoshop 4. 优化 GIF图像 素材 伦敦背景图一张 手 机 透 视 效 果 模 板 一张 一、基本构建 创建转场效果合成 步骤 1 打 开 AE, 合 成 >新 建 合 成 (Cmd+N), 尺 寸 为 640*1136, 帧数 29, 持续 6s 步骤 2 . 导 入 伦 敦 背 景 图 像 , 将 图 像 丢 入 合 成 1, 调 整 背 景 图 像 尺 寸 , 使 其 适 合 画 布 步骤 3 创 建 3个 蓝 色 框 ( 用 形 状 图 层 ) , 这 些 蓝 色 框 将 从 屏 幕 上 方 下 落 到 屏 幕 底 部 , 宽度 213、214、213px。三个 方 框 上 方 的方 框 宽 度 640px,输入 相应文本。 步骤 4 用钢笔勾勒出云朵和 6 片雪花空心圆(勾勒的略水,见谅) 步骤 5 保 存 一下 展示合成 步骤 1 创 建 合 成 2 尺 寸 1280 x 720帧 数 29, 时 间 6s 步骤 2 . 导 入 iPhone背 景 ,调 整 尺 寸 。 步骤 3 把 合 成 1拖 到 合 成 2里 面 , 那 么 合 成 2里 面 应 该 是 这 样 : ( p.s, 我 加 了 一层背景层) 步骤 4. 选 中 合 成 1, 效 果 >扭 曲 >边 角 定 位 , 让 合 成 1的 4个 角 对 上 模 板 中 屏 幕 的 4...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

如何用AE制作简单的UI动效教程

确认删除?
VIP
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群
客服邮箱
回到顶部