之前发布的几篇交互动画手势的文章,看到热心的小伙伴提醒我,都说如果是动效的形式展示就会直观;的图片做成动画的效果,这几天经过搜集相关的教程和热心人的帮助终于整理了出来,很高兴,于是好东西的赶紧和小伙伴分享,直接进入正题:
先看下最终的动效图:
2?
1、相关软件的下载和要求:A: iTools软件
B:photoshop(做设计的朋友估计都安装了,如果没有安装,就安装一个就行了,哈);
  1. Photoshop CC(安装文件+破解教程+破解补?。?/a>
  2. Photoshop CC安装失败(安装遇到错误)的解决办法

C:移动端手机,我用的是iPhone 5S,同时因为iTools是For Win,所以需要满足WINPC+无线网络
连接两个条件。2、下载软件之后安装启动:

A:软件图标:110
B:点击安装

3、点开iTools的最后一个标签,在常用工具有苹果录像大师功能,如图所示:

22

4、点击苹果录像大师,进入如下界面,如图所示:

33

5、点开手机上划菜单中的AirPlay,选择要连接的菜单(请确保手机和电脑连接到同一无线网络):

43

6、连接成功后电脑上会出现下面这个界面,点击界面中的红色圆点以录像。

52

7、视频保存成功,如图所示。

63

8、首先用PS导入视频。选取的范围可以随意设置:

73

83

9、导入成功,下面我们要开始保存成GIF了。

103

10、利用存储为Web格式来保存成GIF。

91

在做的过程中可能遇到的问题归纳:

1、在PS里面运用【视频帧到图层】,出现对话框提示:
A:不能完成“视频帧到图层”命令,因为无法打开影片文件? 【photoshop CC 版本】
B:提示:”不能完成视频帧到图层,需安装QuickTime7.1或更高版本“【photoshop CS4 版本】
答案:A:查看视频的大小,视频不要太大,最好在1M之内;
B:一定要安装QuickTime7.1这个版本,安装新的版本不可用,会出现丢失dll组件的提示。
下载地址:http://www.ccopus.com/ileehi/item/efe70333b6c664bf633aff3c

2、为什么我找不到我的PC设备?
?答案:检查下PC和手机的无线连接是不是在同一网络内;

转载请注明:学UI网—UI设计师学习教程平台 » 教你把APP操作演示转成GIF动态图

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
设计师必备!人工智能时代的配色方案?。凵衿鳎?/span>
八分钟了解未来的 UI 设计工具:InVison Studio八分钟了解未来的 UI 设计工具:InVison Studio
十分钟了解排行第一的 Sketch 插件 :CRAFT十分钟了解排行第一的 Sketch 插件 :CRAFT
设计师必备!10分钟电脑配置挑选速成攻略设计师必备!10分钟电脑配置挑选速成攻略
5分钟掌握8个常用交互组件,轻松进阶原型设计5分钟掌握8个常用交互组件,轻松进阶原型设计
UI设计师必备收藏素材、教程利器!UI设计师必备收藏素材、教程利器!
实用!谷歌设计师开发的SKETCH插件实用!谷歌设计师开发的SKETCH插件
SketchSize一键生成多尺寸,为何你的设计效率如此之高?SketchSize一键生成多尺寸,为何你的设计效率如此之高?
手残党福利!谷歌新推智能绘图手残党福利!谷歌新推智能绘图
设计师值得入手的15个Chrome扩展插件设计师值得入手的15个Chrome扩展插件
?