实用小技巧!iPhone上看到好的动效设计,如何保存成GIF? - 优设网 - UISDC

实用小技巧!iPhone上看到好的动效设计,如何保存成GIF?

2016/05/23 20119评论区

iphone-motion-save-gif-1

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

1dt20160523

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

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

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

需要用到的配料:

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

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

2dt20160523

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

3dt20160523

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

4dt20160523

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

5dt20160523

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

6dt20160523

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

7dt20160523

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

8dt20160523

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

9dt20160523

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

10dt20160523

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

11dt20160523

欢迎关注作者的微信公众号:

yyyqr

「优设五月精品教程合集」

提升设计格调的渐变教程:
《实用教程!教你巧妙运用渐变色快速提升设计格调!》

将人物照转成素描!
《PS教程!巧用滤镜快速将人物照片转成素描肖像》

3个酷炫的GIF 小动画:
《PS教程!手把手教你绘制3个效果酷炫的GIF动画效果》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/iphone-motion-save-gif

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里