提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
在过去的两期内容相信大家已经能基本弄明白keynote动画制作的基本原理和方法,掌握了设置热区、画布尺寸和过渡效果的小tips,今天是keynote做原型小课堂的完结篇,会告诉大家用 keynote制作原型的流程以及制作完成后如何导出原型的。想回看前两期的内容,记得关注青柠乌冬哈~
#第三期开课#
梳理可操作App原型制作流程、原型如何导出
1、拿起鼠标就是干
用keynote做动效大致分为三个大步骤
青柠通常使用的“伴侣”软件有这些
#Sketch#
神器一枚,青柠画线框、UI时候的最爱,优势一大堆,之后会出一期Sketch的教程,记得关注青柠乌冬,吃下我的这枚安利!
#Premiere/iMovie#
主要用来做动画视频时候的后期剪接工作
#Ps/GIF Brewery#
用来将小动画效果生成GIF格式
Step 1
绘制图形——绘制线框图/视觉稿&切图
在最开始绘制线框图/视觉稿的时候,青柠通常使用sketch来完成,因为sketch有一个非常赞的“一键切图”功能(就是将每个图层分别保存成一个png文件)方便我们下一步的动画制作。(并不是每个元素都要切图,只需将会发生动效的元素切图即可)
sketch操作界面
有的时候也会直接就在keynote里面画原型,下面的截图就是青柠参加的一个工作坊,一个下午就要快速给出方案,我果断选择keynote,一下子可交互的原型都做好了,事半功倍,效率棒棒哒
用keynote画原型
Step 2
动画制作——在keynote中将所有切图拼合&设置动画效果
首先设置画布尺寸,改为移动端分辨率(怎么设置第二课有讲哦)
把所有的切图都拖进keynote操作区中
做动效限制你的不是软件功能,永远都是你的想象力!
回忆一下第一期提到的两件非常重要的事情:
第一,将每一个动作拆解为元素如何出现、出现后有什么动作、如何消失三个步骤
第二,对这一组动效的前后关系有一个明确的时间轴
把握这两点,依次按照元素出现的先后顺序,把元素拼回原有位置并添加动画效果
PS:青柠不建议一开始就把所有元素先拼好再添加动画,如果元素之间是有遮挡关系的话,操作起来是非常麻烦的~
开始制作动画
Step 3
A.原型展示——同步到ios设备端,测试使用
在手机分辨率尺寸上制作完,用手机端keynote打开,一个“假”的可以交互原型就大功告成啦!
B.后期剪辑——以视频格式导出,按照时间轴剪辑
keynote没有时间轨道,所以有限后题的配乐或速度调整就需要导入pr/imove/ps(视频编辑软件)再做调整。
keynote怎么保存成视频格式:
点击文件——导出到——QuickTime——调节参数——下一步
保存为视频文件
通常来说“前往下一张幻灯片之前等待”&“前往下一个构件之前等待”都选为“0秒”,格式就要看你对视频大小的需求了,1080P更清晰当然文件也会比较大。
调节参数
Step 6,后期制作
将导出的视频文件拉到iMovie/Pr里面进行剪辑,包括调节视频的速度、长度、配音等操作
或者将视频剪成小段,导入Ps/GIF Brewery制作GIF小动画
方法:视频导入Ps——点击“文件”——选择“存储为Web所用格式”——选择格式为“GIF”——循环选项选择“永远”——储存
选择“存储为Web所用格式”
调节参数
《如何用keynote做可操作App原型》三期的小教程到这就全都结束啦,刚刚开始可以临摹一些大牛的动效,如果一下子看不出来这个动效是由哪几个动作组成的,可以用录屏软件把效果录下来,然后一帧一帧的看,上手做几次,就能发现keynote做原型没你想象的那么困难!
往期回顾:
如何用keynote做可操作App原型(一):keynote动画功能怎么用
制作动效前应如何思考、如何添加单一或多个动作、如何使用转场效果
http://www.ui.cn/detail/210822.html
如何用keynote做可操作App原型(二):keynote动效实例
如何设置画布尺寸、如何设置热区实现手机端的点按操作、案例实践
更多内容欢迎关注青柠的公众号:Hello_qingning
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册