在dribbble和behance上，你们可能见过很多用gif来表达设计理念的ui作品。很多人都想知道怎么来制作，怎样更好、更高效的表达自己的理念。很明显，动态的展现比静态的更形象，在这片文章中，我将教大家如何“动态化”自己的设计作品。
动态gif展现ui作品，优点在于：
1.展示实际工作流程
2.利用转场，来展示应用不同状态时的效果
3.便于网络分享。
after effects cs6 or cc
photoshop cs6 or cc
after effects
1.在一个合成中创建转场效果
2.另外一个合成中创建展示效果
photoshop
4. 优化gif图像
伦敦背景图一张
手机透视效果模板一张
一、基本构建
创建转场效果合成
打开ae，合成>新建合成(cmd+n)，尺寸为640*1136，帧数29，持续6s
导入伦敦背景图像，将图像丢入合成1，调整背景图像尺寸，使其适合画布
创建3个蓝色框（用形状图层），这些蓝色框将从屏幕上方下落到屏幕底部，宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。
用钢笔勾勒出云朵和6片雪花空心圆（勾勒的略水，见谅）
创建合成2
尺寸1280 x 720帧数29，时间6s
步骤 2. 导入iphone背景,调整尺寸。
把合成1拖到合成2里面，那么合成2里面应该是这样：（p.s，我加了一层背景层）
选中合成1，效果>扭曲>边角定位，让合成1的4个角对上模板中屏幕的4个角。
二、动效制作
下面，我们来分解一下动画：
1. 3个蓝色方框变长，不同时的落下
2. 透明框从底部往上移动，自始至终宽度不变。
3. 4个框抵达目的地后，文字开始出现，蓝色框文字是比例扩大+从不透明变透明，透明框中得文字是从不透明变透明。
4. 云朵图标，同时伴随雪花。
5. snowy文字出现。
形状图层中，可以控制的属性有比例、位置、不透明度、描边等等，本文的动效中，就充分利用了这些属性随时间的变化，打造出动画效果。
首先推荐2个脚本插件ease and wizz和repostion anchor point
一个方便做运动曲线，一个方便设置锚点位置。
三个蓝色框
打开合成1，选中三个蓝色框，设置如下
1.最左面和最右面的蓝色框锚点在上方（利用anchor point插件设置）
2.比例从0-100%
3.利用ease and wizz选中关键帧，可以很方便的调节运动曲线。
透明框的运动，开始以很快的速度移动了大部分位移，后来速度减慢，缓缓移动到原位，设置如下
备注：ease and 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录制软件。（有多平台版本）
录制效果：
cocoachina是全球最大的苹果开发中文社区，官方微信每日定时推送各种精彩的研发教程资源和工具，介绍app推广营销经验，最新企业招聘和外包信息，以及cocos2d引擎、cocos studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态，微信在手，天下我有！Ps、Flash、Ae都可以，用在交互动效中flash就可以AE是纯粹的视觉特效软件虽然定位是影视后期，但是网页也有使用，作为UI设计师用AE只能说你很新潮很厉害，AE也有自己基于JavaScript语言的表达式来实现高级动画控制，目前来看AE现在用的最多的领域是CG、多媒体行业的领域。
Flash给大多数人的印象，这是一个矢量动画软件，但是容易忽略的一点就是动画并非是Flash的全部，它并不像AE一样纯粹的构建视觉特效它还可以做游戏、做网站开发，能做很多东西一个明显的特征就是“交互性”，比如玩游戏就是一种交互。
作为UI设计师flash用于做动效就可以，毕竟AE做出来的东西更适合看。
- 随机文章
