IPHONE上看到好的动效设计,如何保存成GIF?

俞静:经常在网上看到一些介绍手机APP动效设计的文章,一直好奇这些动态图片是怎么保存下来的。今天把这个小技能分享出来,UI设计师和想学优秀动效的同学记得!(小编:好奇,PC端有类似功能不?)

自己在日常工作中也有看到好的动效设计要保存下来的需求——留着APP太占手机空间,删了APP要用的时候又无法跟开发描述清楚。

要将手机APP里看到的一段动效保存成动态图片(GIF),总的思路不外乎:先将这段动效录屏,然后将这段录制好的视频转换成GIF。

但由于iPhone系统权限问题,在不越狱的情况下,无法做到只用一部手机就搞定这些事情。在网上查阅了不少相关帖子,也咨询了其他设计同行,摸索出一套自己目前觉得最满意的方法,现分享给大家。

需要用到的配料:

  • iPhone(iOS 需要升级至iOS 8)
  • Mac(OS X 需要升级为Yosemite)
  • PicGIF for Mac(一款小巧的格式转换软件)

目前给iPhone录屏最方便的还是用Mac(好马配好鞍…)。首先用手机数据线连接iPhone和Mac。找到Mac系统自带的软件QuickTime,双击打开。

在Dock栏上右键该图标,选择新建影片录制(注意是影片录制而不是屏幕录制哦,这个设计的心智模型是不是很棒…)。

这时候你会看到默认打开的是mac摄像头录制的画面(通常是自己的一张大脸)而不是手机屏幕的画面。这时你需要点击界面下方红色圆点边上的下拉箭头,在菜单里选择XX的iPhone这一项。

这时候就窗口变成了和你手机屏幕一样的比例,同时显示出了手机屏幕上的画面。

That’s it~ 准备好之后,点击界面下方的红色圆点开始录制,再次点击停止录制,这样两次点击之间的操作画面就被录制下来了。点击左上角关闭,在弹窗里选择存储。

接下来打开PicGIF这个软件,点击添加视频,选择刚才保存的那段视频。

会看到一个视频预览画面,右下角有一些参数供选择:帧数越多,最后保存的图片动效流畅度越好,但同时生成的图片体积也越大。根据自己的需求把握,若没有要更改的,直接点击右下角的加载。

可以看到在界面底部,视频已经被分成了一张张连续的静态图片(每一张代表一帧),你可以手动删除其中看上去重复的帧,以减小最后生成的文件体积(通常在开始录制和结束录制时,操作会停止一会儿,这里会产生很多相同的帧,是可以删掉的)。编辑完以后,点击右上角的”创建GIF”。

预览最终生成的GIF,点击右下角的存储。

好了,一张动态图片制作完成!

欢迎作者的微信公众号:

文章来源:优设

(0)

相关推荐

  • AE动效设计必知的五个参数

    如果你是一位AE新手,表达式对你来说可能会有点可怕.我经历了一段时间,才能慢慢开始自己在AE中使用表达式,而不是去从Google里面复制粘贴.下面小编就为大家分享AE动效设计必知的五个参数,对于AE新 ...

  • 学学这些爱不释手的加载动效设计

    我们现在越来越注重细节,小到加载动画,大到界面配色.这些都会成为用户吐槽的地方,一个不小心,你设计的东西让用户反感了,他们说不定就要和你的产品说拜拜了.所以今天我们要重点说说那些你以前觉得" ...

  • 如何准确的向工程师传达动效设计?

    小编:最近好像一直在分享设计师与别的部分的巧妙配合的技巧,那么依旧继续.今天给大家带来的是由CocoaChina分享的如何准确的向工程师传达动效设计?在UI设计中,动效的设计十分的重要,在你与我中传递 ...

  • 值得你关注的动感粒子动效设计趋势

    现代风盛行的网页设计圈中,不少设计师会倾向于用动态.抽象的元素来为页面渲染出富有科技和未来感的氛围.在这其中,飘散的粒子动效是比较常见也颇受欢迎的一种元素,而今天我们要聊的就是这种设计元素. 有的网页 ...

  • 腾讯干货!交互微动效设计指南

    导语 本设计指南适用于UI界面中交互微动效,涵盖入场.出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率. 一.本指南的适用范围 ...

  • 动效设计拥有良好用户体验的六准则

    成功的动效设计应具备6条特征:响应式的,关联性的,自然的,有目的的,快速的,以及清晰的. 功能动画是一种很微妙的动画,它有一个明确的,合乎逻辑的目的.它减少了认知负荷,避免变化的盲目性,并在空间关系中 ...

  • 动效设计的三大用途你都知道?

    随着技术的快速发展,APP中的动效不再是一个视觉奢侈品,而是一个用户都会期待的功能需求.动效解决了很多界面中的功能问题,使界面看上去更灵动,并且做到真正地响应用户. 下面将介绍一些主要的动效设计技巧, ...

  • 动效设计也应该有的体验原则

    来新的项目组后发现我司产品很喜欢加动效,动效需求很多,造成了端内各种互斥以及视觉焦点凌乱的情况出现. 站在交互的角度考虑,动效是用来辅助设计的一种形式,而不是作为一个需求来无脑添加的~ 下面这句宝强哥 ...

  • AE视觉语言的5种元素和10条动效设计原理

    这篇文章提供了一个非常实用的临摹指南,教你从视觉语言的5种元素和10条动态设计原理入手,把复杂的动效作品拆分成可直观学习的细节,而且掌握这个方法后,无论什么领域,你都能真正从大神的作品中汲取养分.建议 ...