ae模板ui-如何使用AE制作UI设计3D动效
如何用AE创建简单的UI动效
在dribbble和behance上,你们可能见过很多用gif来表达设计理念的ui作品。很多人都想知道怎么来制作,怎样更好、更高效的表达自己的理念。很明显,动态的展现比静态的更形象,在这片文章中,我将教大家如何“动态化”自己的设计作品。
动态gif展现ui作品,优点在于:
1.展示实际工作流程
2.利用转场,来展示应用不同状态时的效果
3.便于网络分享。
aftereffectscs6orcc
photoshopcs6orcc
aftereffects
1.在一个合成中创建转场效果
2.另外一个合成中创建展示效果
photoshop
4.优化gif图像
伦敦背景图一张
手机透视效果模板一张
一、基本构建
创建转场效果合成
打开ae,合成>新建合成(cmd+n),尺寸为640*1136,帧数29,持续6s
导入伦敦背景图像,将图像丢入合成1,调整背景图像尺寸,使其适合画布
创建3个蓝色框(用形状图层),这些蓝色框将从屏幕上方下落到屏幕底部,宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。
用钢笔勾勒出云朵和6片雪花空心圆(勾勒的略水,见谅)
创建合成2
尺寸1280x720帧数29,时间6s
步骤2.导入iphone背景,调整尺寸。
把合成1拖到合成2里面,那么合成2里面应该是这样:(p.s,我加了一层背景层)
选中合成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开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态,微信在手,天下我有!Ps、Flash、Ae都可以,用在交互动效中flash就可以AE是纯粹的视觉特效软件虽然定位是影视后期,但是网页也有使用,作为UI设计师用AE只能说你很新潮很厉害,AE也有自己基于JavaScript语言的表达式来实现高级动画控制,目前来看AE现在用的最多的领域是CG、多媒体行业的领域。
Flash给大多数人的印象,这是一个矢量动画软件,但是容易忽略的一点就是动画并非是Flash的全部,它并不像AE一样纯粹的构建视觉特效它还可以做游戏、做网站开发,能做很多东西一个明显的特征就是“交互性”,比如玩游戏就是一种交互。
作为UI设计师flash用于做动效就可以,毕竟AE做出来的东西更适合看。
如何使用AE制作UI设计3D动效
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设计3D动效
工具
设计流程
AfterEffects
在一个合成中创建转场效果
另外一个合成中创建展示效果
导出_hotoshop
优化GIF图像
素材
背景图一张
透视效果模板一张
一、基本构建
创建转场效果合成
步骤1
打开AE,合成>新建合成(Cmd+N),尺寸为640*1136,帧数29,持续6s
步骤2
导入背景图像,将图像丢入合成1,调整背景图像尺寸,使其适合画布
步骤3
创建3个蓝色框(用形状图层),这些蓝色框将从屏幕上方下落到屏幕底部,宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。
步骤4
用钢笔勾勒出云朵和6片雪花空心圆
步骤5
保存一下
做视频特效有哪些比较好的免费的PR和AE模板下载的网站？
做视频特效有哪些比较好的免费的PR和AE模板下载的网站?
首先说一句,日常的做做视频需要交差之类的套用模板就行了,但是如果是自己真的想学好AE、PR,建议少用模板,学好基础的内容,模板拿来自己参考一下就行了。回到正题。
主流的素材下载网站
1、千图网
这个网站是我个人用的比较多的一个,内容更新的也算是勤便,而且东西也挺丰富的。像视频音效类中包括:配乐音效、AE模板、PR模板、会声会影、Eduis素材等等。
2、千库网
说真的,我其实挺怀疑千X网是一家的。这地方也有模板下载的,内容也挺多的,跟千图网在内容上好像还是有点区别的。
3、包图网
内容上也是蛮丰富的,可以看一看。
4、摄图网
刚刚去看了下,这些模板好像比千图的有意思些,只是第一感觉,可能不是。毕竟日常做一个视频也没必要好几个网站跑来跑去的找模板。
在这里说点重点
以上推荐的网站,大家点开图片也可以看到,右上方登录注册,什么个人VIP,企业VIP之流的,估计你也应该懂我的意思了。就以千图网为例,非会员的状态下,每天只能下载一个素材,下载的时候给你限速,你以为就这样吗?各类素材还分为什么共享、原创、办公每一项都是一个单独的VIP,怎么开?给你看看
不得不说挺细致的。我要是上班专门搞这个开个VIP还报销那当然没问题啊。但是我等学生党确实没那个财力。其他的几个网站都是差不多了。
不过在大中国,这种事儿上X宝就有办法了,就不多说了,不明白的可以私信我。
接下来推荐一下我自己收藏的网站,恩!免费的!免费的!免费的!
1、3tis云视界|视频素材分享平台
网站首页,简单又有13格。
2、顶尖特效
内容不错,网站首页也蛮简单的,没有什么广告,但是今天进去看见出售网站是什么鬼?难道是搞不下去了?我滴个乖乖,希望大佬能撑住!
3、新CG儿-数字视觉分享平台
这个网站应该是学过AE的都知道的免费模板资源站吧。
4、爱给网_游戏素材_影视后期_音效配乐免费下载
直截了当的展示可以为你提供的内容,无广告(也可能是我去广告插件的原因),就是需要这种良心的网站。
5、
AE、C4D、FCPX的资源都有,也算是一个很良心的网站。
6、GFXCamp龋齿一号
说的收费,其实内容都可以免费下载,有心的话可以打赏一下。
说了这么多其实给你们看下我的浏览器的收藏夹就好了,。
对着上面找或者放到你自己的收藏夹里,平常会用到的,都是一些挺好的网站。
全免费_16个高质量素材网站
16个高清无版权视频素材网站
1.新CG儿
/
很多视频素材可以免费下载,还有很多国内外佳作可以学习借鉴,丰富灵感。
2.爱给网
/
不仅有视频素材,还有图片,音效,配乐,3D,游戏,平面等非常丰富的素材可以供选择,素材质量上乘,需要注册登录。
3.coverr
/
国外网站,高质量视频素材,支持免费下载,可商用。
4. Pexels
/
国外网站,需要用英文关键词搜索,大量无版权图片和视频,质量都非常高,素材丰富。
5.VJ师
/
大量的视频素材,AE模板和音乐素材,有免费素材,也有部分视频是付费的,种类会更多。
6.潮点视频
/
拥有丰富素材的免费网站,收录超过500万个内容,满足你的素材需求。
7.知鱼素材
网站有视频、图片、音乐、音效等素材,质量很高,需要在素材下载界面选择“共享协议”的素材就可以直接免费商用。
8.pixabay
国外网站,支持中文搜索,全站免费商用,风景累视频质量上乘,支持HD (1080p) 和4K两种画质。
9.Mixkit
网站界面清爽,素材类型丰富,免费高清。
Nature Stock
/
制作自然类视频必备的素材网站,都是自然场景素材,全部免费。
Places
/
各国城市景观的免费素材,品质很高,免费下载。
/
上千个免费视频素材,大部分无版权,有免费也有升级版,免费的也基本够用。
Republic
/
免费商用图片和视频,部分收费。
footage
免费4k下载,城市、自然风景类视频较多。
/
专注动画素材的网站,视频都非常有趣,质量也很高。
/#/grid
大量高清免费视频素材,无版权商用,类别主要有天际线、海滩、河流城市等。
