
文章来源:admin 时间:2018-03-12 09:50
天气应用gif(据观测,小圆点弹的过了,各位建造的时刻批改一下吧)
文末提供源文件下载
在Drioptionter motorcoair conditionershiness bureaule和Behperce上,你们可能见过很多用Gif来表达安排理念的UI作品。很多人都想清晰怎样来建造,怎样更好、更高效的表达本身的理念。很显然,静态的展现比静态的更气象,在这片文章中,学会苹果录屏。我将教公共如何“静态化”本身的安排作品。
静态GIF展现UI作品,好处在于:
展示现实职业流程诈欺转场,相比看何用。来展示应用不同形态时的成就便于网络分享。工具After Effects CS6 or CCPhotoshop CS6 or CC安排流程After Effects
Photoshop
4. 优化GIF图像
伦敦背景图一张
手机透视成就模板一张
翻开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内里,iphone录屏工具。那么分解2内里该当是这样:(p.s,我加了一层背景层)
举措4.
选中分解1,成就>歪曲>边角定位,让分解1的4个角对上模板中屏幕的4个角。
-----------------------------------------------以上为根本建立局限-------------------------------------------------------------------
二、动效建造上面,我们来理解一下动画
1.3个蓝色方框变长,简单。不同时的落下
2.透亮框从底部往上搬动,自始至终宽度不变。
3.4个框达到目标地后,文字初步映现,蓝色框文字是比例伸张+从不透亮变透亮,事实上iphone录屏工具。透亮框中得文字是从不透亮变透亮。
4. 云朵图标,同时随同雪花。
5. Snowy文字映现。
样式图层中,可能统制的属性有比例、地位、不透亮度、描边等等,你知道iphone录屏工具。本文的动效中,就充足诈欺了这些属性随时间的变化,制造出动画成就。
执掌经过首先保举2个脚本插件Eautomotive service engineers for the reason thwith well for the reason thwith wizz和Repostion Anchor Point
一个容易做疏通曲线,一个容易设置锚点地位。
三个蓝色框
翻开分解1,选中三个蓝色框,设置如下
备注
1.最左面和最左面的蓝色框锚点在上方(诈欺Anchor Point插件设置)
2.比例从0-100%
3.诈欺Eautomotive service engineers for the reason thwith well for the reason thwith wizz选中关键帧,你看iphone录屏工具。可能很容易的调整疏通曲线。对比一下手机录视频软件有哪些。
透亮框透亮框的疏通,初步以很快的速度搬动了大局限位移,你知道什么录屏软件好。自后速度减慢,徐徐搬动到原位,设置如下
备注:Eautomotive service engineers for the reason thwith well for the reason thwith Wizz中设置Quadvertisement+out 疏通成就比力平滑。ae。
底部文字备注:
1.三个蓝色框,当蓝色框触及终究部时,文字敏捷弹出,不透亮度从0->100%比例从0->100%
2.透亮框中的文字随透亮框完全疏通(地位设置可能参考透亮框),我不知道如何用AE创建简单的UI动效。但是,左侧的文字先到,右侧的-4度后到,详细时间轴中得设置。对于工具。
当透亮框的文本初步映现时,云朵映现,先是透亮度从0-100%。
而比例初步时是60%,当透亮度到了100%时,从60%->100%
当云朵动效完成后,雪花小圆点初步逐一映现。看着好用的录制视频软件app。
备注:
1.详细小圆点会缭乱的向右搬动,然后弹回,想知道录屏专家。详细疏通依次的调整
2.此次也倡议用Quadvertisement+Out
3.详细小圆点逐一映现,因而透亮度的变化要在时间轴上依次设置。
这里运用了蒙版疏通,来制造Snowy文本渐渐映现的成就,如何用AE创建简单的UI动效。详细Snowy不透亮度也要变化(蒙版的不透亮度变化是多余,什么录屏软件好。请勿仿照)
成就:
原作者的做法:
成就:
结果:
----------------------------------------------------以上为动画建造局限--------------------------------------------------------------
三、导出方法1:AE+PS1.留存后,AE中分解>增加到渲染队列
完成设置后,ui。点渲染
2.用PS翻开渲染进去的.mov(文件>导入>视频帧到图层)
3.Cmd+Shift+S 或许 文件>蓄积为Web可用格式
备注:
1.循环选项遴选好久
2.图像大小可能设置
3.详细遴选Gif格式
假如你不想用PS的话,可能先调整AE中画布大小,再使用LiceCap这款录屏为Gif的小软件录制,录视频软件下载。很容易,可谓最好用的GIF录制软件。(有多平台版本)
录制成就:手机视频录制软件。