1.?
设计流程?
AfterEffects?
1.在一个合成中创建转场效果
2.另外一个合成中创建展示效果
3.导出?Photoshop
4.优化GIF图像
背景图一张
透视效果模板一张?
一、基本构建?
创建转场效果合成?
打开AE,合成>新建合成(Cmd+N),尺寸为640*1136,帧数29,持续6s
导入背景图像,将图像丢入合成1,调整背景图像尺寸,使其适合画布
创建3个蓝色框(用形状图层),这些蓝色框将从屏幕上方下落到屏幕底部,宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。
用钢笔勾勒出云朵和6片雪花空心圆
步骤5?
保存一下能做一些简单的动效,甚至不会动效都可以。因为ui对动效的要求并不高。你也经常玩手机和电脑吧,你看看网页和手机上的那些动效,都是很基础的玩意。用ae,最多3天就学会百分之九十以上的动效了,只是说可能要多花点时间来熟练而已。
如何用AE创建简单的UI动效在Dribbble和Behance上,你们可能见过很多用Gif来表达设计理念的UI作品。很多人都想知道怎么来制作,怎样更好、更高效的表达自己的理念。很明显,动态的展现比静态的更形象,在这片文章中,我将教大家如何“动态化”自己的设计作品。
动态GIF展现UI作品,优点在于:
1.展示实际工作流程
2.利用转场,来展示应用不同状态时的效果
3.便于网络分享。
工具
AfterEffectsCS6orCC
PhotoshopCS6orCC
设计流程
AfterEffects
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
尺寸1280x720帧数29,时间6s
步骤2.导入iPhone背景,调整尺寸。
步骤3
把合成1拖到合成2里面,那么合成2里面应该是这样:(p.s,我加了一层背景层)
步骤4.
选中合成1,效果>扭曲>边角定位,让合成1的4个角对上模板中屏幕的4个角。
-----------------------------------------------以上为基本构建部分-------------------------------------------------------------------
二、动效制作
下面,我们来分解一下动画:
1.3个蓝色方框变长,不同时的落下
2.透明框从底部往上移动,自始至终宽度不变。
3.4个框抵达目的地后,文字开始出现,蓝色框文字是比例扩大+从不透明变透明,透明框中得文字是从不透明变透明。
4.云朵图标,同时伴随雪花。
5.Snowy文字出现。
形状图层中,可以控制的属性有比例、位置、不透明度、描边等等,本文的动效中,就充分利用了这些属性随时间的变化,打造出动画效果。
处理过程
首先推荐2个脚本插件Easeandwizz和RepostionAnchorPoint
一个方便做运动曲线,一个方便设置锚点位置。
三个蓝色框
打开合成1,选中三个蓝色框,设置如下
备注:
1.最左面和最右面的蓝色框锚点在上方(利用AnchorPoint插件设置)
2.比例从0-100%
3.利用Easeandwizz选中关键帧,可以很方便的调节运动曲线。
透明框
透明框的运动,开始以很快的速度移动了大部分位移,后来速度减慢,缓缓移动到原位,设置如下
备注:EaseandWizz中设置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引擎、CocosStudio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态,微信在手,天下我有!
如何用ppt思维，做一个手机h5动效页面HTML5页面制作工具,大体分为两类:基于HTML5的网站工具和手机APP工具(当然还有一些其他的,例如基于微信公众号的等,下面也会介绍)。
先总的说一下个人感受
1.基于HTML5的工具网站:功能较强大,单页面的操作性较强,可完成各种页面交互效果;但是某些时候会有操作“失灵”的现象,如上传图片失败,点击保存失败,生成失败等。原因你懂得~
2.手机工具APP:相比起工具网站来讲,显得比较顺手,有大量模板套用,制作简单快捷;但是拘泥于现有的模板,使得单页面不会有较大的可操作空间,从而无法实现DIY交互效果。
下面展开说下每个使用过的工具吧
基于HTML5的工具网站:
【兔展】
优点:页面DIY程度较高,动效实现起来也简易方便,可制作比较任性的H5页面。
缺点:屏幕界面大小不可调节,上传的图会比例失调;生成后到各尺寸屏上页面会存在拉伸现象。
(此图意在说明上传的图片的尺寸都是网站自己默认的一个尺寸,不是图片本身的尺寸,不利于使用者调整)
【】可以具体编辑,单页操作性较高,有新手(有模板)和高阶(无模板)两种编辑模式;翻页效果比兔展多,模板也更强大一些。
【居高互动刊】
优点:最简单易上手的工具之一,根据提示一步一步的添加,共4步,最后生成微杂志。相比其他在线工具,较稳定。
缺点:目前没试通制作单页上的交互效果,没找到开启pro功能的入口。
【ANIMATRON】
优点:像flash的在线版,功能强大,可以创建HTML5动画。适合有动画基础的人做演示制作。
缺点:需要动画制作基础;工作界面响应时间长;貌似只能分享到twitter、Facebook、google+、tumblr
【iSpring7】
噱头是PPT转HTML5工具,完美与PPT兼容,可制作Html5移动课件。
不过,目前我只能连着VPN再用Safari才能打开网站链接。
【秀制作】
优点:版式轻松,制作快捷,宽带稳定。
缺点:对图片和文字在各种屏幕上的显示没有做很好的适配;不能对模板中文字的编辑调整位置。
手机工具APP:
【初页】
优点:模板质量高,套用模板编辑时效率高,操作简单快捷,效果和体验在制作H5页面的APP工具里面算是出类拔萃。
缺点:单页面可操作性较低,仅支持套用模板。
【快邀约】快速制作邀请函
优点:易上手,省时高效,便于统计。
缺点:页面简陋,只能选择固有模板创建文字和添加图片。
【易企秀】中小微企业的移动场景营销管家
优点:套用模板,创建快捷,用来做企业介绍、产品推荐。拥有强大的推广统计、客户管理功能。嗯,这里应该赞一个。
缺点:只能用模板,DIY程度低;统计数据是否准确需要进一步确认,目前看来可能有遗漏数据的现象(在小范围测试中,统计到的数量小于应有的数量)。
【微贴】:通过微信公众号创建H5页面
优点:手机公众号内直接创建简单页面,根据提示创建即可,无脑方便快捷。
总结
工具网站做的H5页面,多注重单独页面的自定义交互方案,DIY程度高,相对来说用时较长,又受制于带宽因素,故影响操作;
工具APP做的H5页面,多注重效率,目前都是套用模板,因而对单页面的DIY程度较低,交互效果受限。