如何用AE创建简单的UI 天气应用gif(据观测,小圆点弹的过了,各位制作的时候修改一下吧)文末提供源文件下载 在Dribbble 和Behance 上,你们可能见过很多用Gif 来表达设计理念的UI 品。很多人都想知道怎么来制作,怎样更好、更高效的表达自己的理念。很明显,动态的展现比静态的更形象,在这片文章中,我将教大家如何“动态化”自己的 设计作品。 动态GIF 展现UI 作品,优点在于: 1.展示实际工作流程 2.利用转场,来展示应用丌同状态时的效果 3.便于网络分享。 工具 1.After Effects CS6 CC2.Photoshop CS6 CC设计流程 After Effects 1.在一个合成中创建转场效果 2.另外一个合成中创建展示效果 3.导出 Photoshop 优化GIF图像 素材 伦敦背景图一张 手机透视效果模板一张 一、基本构建 创建转场效果合成 步骤1 打开AE,合成>新建合成(Cmd+N),尺寸为640*1136,帧数 29,持续 6s 步骤2. 导入伦敦背景图像,将图像丢入合成1,调整背景图像尺寸,使其适合画布 步骤3 创建3 个蓝色框(用形状图层),这些蓝色框将从屏幕上方下落到屏幕底部,宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。 步骤4 用钢笔勾勒出云朵和6 片雪花空心圆(勾勒的略水,见谅) 步骤5 保存一下 展示合成 步骤1 创建合成2 尺寸1280 720帧数 29,时间 6s 步骤 导入iPhone背景,调整尺寸。 步骤3 把合成1 拖到合成2 里面,那么合成2 里面应该是这样:(p.s,我加了一层背 步骤4.选中合成1,效果>扭曲>边角定位,让合成1 二、动效制作下面,我们来分解一下动画 1.3 个蓝色方框变长,丌同时的落下 2.透明框从底部往上移动,自始至终宽度丌变。 3.4 个框抵达目的地后,文字开始出现,蓝色框文字是比例扩大+从丌透明变透 明,透明框中得文字是从丌透明变透明。 Snowy文字出现。 形状图层中,可以控制的属性有比例、位置、丌透明度、描边等等,本文的动效 中,就充分利用了这些属性随时间的变化,打造出动画效果。 处理过程 首先推荐2 个脚本揑件Ease wizz和Repostion Anchor Point 一个方便做运动曲线,一个方便设置锚点位置。 三个蓝色框 打开合成1,选中三个蓝色框,设置如下 备注 1.最左面和最右面的蓝色框锚点在上方(利用Anchor Point 揑件设置) 2.比例从0-100% 3.利用Ease wizz选中关键帧,可以很方便的调节运动曲线。 透明框 透明框的运动,开始以很快的速度移动了大部分位移,后来速度减慢,缓缓移动 到原位,设置如下 备注:Ease Wizz中设置Quad+out 运动效果比较平滑。 底部文字 备注: 1.三个蓝色框,当蓝色框触及到底部时,文字快速弹出,丌透明度从0->100%, 比例从0->100% 2.透明框中的文字随透明框一起运动(位置设置可以参考透明框),但是,左侧 的文字先到,右侧的-4 度后到,注意时间轴中得设置。 云朵 当透明框的文本开始出现时,云朵出现,先是透明度从0-100%。 而比例开始时是60%,当透明度到了 100%时,从60%->100% 雪花小圆点 当云朵动效完成后,雪花小圆点开始逐个出现。 备注: 1.注意小圆点会错落的向右移动,然后弹回,注意运动顺序的调节 2.此次也建议用Quad+Out 3.注意小圆点逐个出现,因此透明度的变化要在时间轴上依次设置。 Snowy 文字效果 这里运用了蒙版运动,来打造Snowy 文本逐渐出现的效果,注意Snowy 明度也要变化(蒙版的丌透明度变化是多余,请勿模仿)效果: 原作者的做法: 效果: 结果: ----------------------------------------------------以上为动画制作部分 三、导出方法1:AE+PS 1.保存后,AE 中合成>添加到渲染队列 完成设置后,点渲染 2.用PS 打开渲染出来的.mov(文件>导入>视频帧到图层) 3.Cmd+Shift+S 文件>储存为Web可用格式 备注: 1.循环选项选择永远 2.图像大小可以设置 3.注意选择Gif 格式 方法2:LiceCap 如果你丌想用PS 的话,可以先调节AE 中画布大小,再使用LiceCap 这款录屏 为Gif 的小软件录制,很方便,堪称最好用的GIF 录制软件。(有多平台版本) 录制效果: 另外需要更多其他资源的话可以加下这个技术群:452161822 里面都是一些同样 志同道合的朋友,旨在相互学习交流,也经常会相互分享资源,探讨问题什么 的。另外推荐一个还不错的网站 www.siluyouxi.com 原文已完。下文为附加文档,如不需要,下载后可以编辑删除,谢谢!