是博客中展示项目效果的一种很好的方式,为我们的app制作一张gif图片并不复杂,录制屏幕采用系统自带的QuickTime Player,制作gif采用PicGIF软件。licecap软件更是将屏幕录制与gif制作合为一体。

1.电脑屏幕录制

1.1文件->新建屏幕录制

Mac屏幕录制与gif图片制作教程_mac

1.2?点击红色按钮

Mac屏幕录制与gif图片制作教程_图片_02

1.3?截取需要录制的屏幕部分,点击开始录制

Mac屏幕录制与gif图片制作教程_图片_03

1.4?点击工具栏的停止按钮,停止录制

Mac屏幕录制与gif图片制作教程_图片_04

1.5?然后会弹出预览界面,cmd+s保存视频,后缀为mov

Mac屏幕录制与gif图片制作教程_博客_05

2. 手机屏幕录制

2.1?首先连接你的iPhone到电脑,文件->新建影片录制

Mac屏幕录制与gif图片制作教程_软件_06

2.2?软件会自动显示出你的iPhone屏幕,然后点击红色按钮开始录制,再点击一下就停止录制,预览并保存文件即可。

Mac屏幕录制与gif图片制作教程_mac_07

3. 制作gif

制作gif的软件很多,本人也使用过很多款,GifBrewery,PicGIF是比较好的软件。原本一直在用GifBrewery,但是制作出来的gif经常在简书里无法显示,这里以PicGIF为例子。软件下载地址在文末。

Mac屏幕录制与gif图片制作教程_app_08

3.1?打开PicGIF,点击添加视频,添加刚才录制的视频文件

Mac屏幕录制与gif图片制作教程_博客_09

3.2?出现制作窗口,点击进度条可以查看当前选中的帧,点击进度条之后,按CMD+S设置片段起始点,CMD+E设置片段结束点,帧每秒可以设置播放速度

Mac屏幕录制与gif图片制作教程_图片_10

Mac屏幕录制与gif图片制作教程_图片_11

3.3?点击右下角加载按钮,等待提取帧完成,然后点击右边菜单的尺寸,选择合适的gif尺寸,也可以自定义尺寸;帧延时选项也可以改变gif播放速度

Mac屏幕录制与gif图片制作教程_博客_12

Mac屏幕录制与gif图片制作教程_软件_13

3.4?点击右上角创建GIF,gif图制作完成,点击右下角存储即可

Mac屏幕录制与gif图片制作教程_博客_14

4. licecap使用教程

licecap 是一款屏幕录制工具,支持导出 GIF 动画图片格式,轻量级、使用简单,录制过程中可以随意改变录屏范围。
4.1 运行后会以窗口的方式显示在桌面,拖动选取一个合适的大小范围。

Mac屏幕录制与gif图片制作教程_软件_15

4.2 点击 Record 选取保存路径就开始录屏了

Mac屏幕录制与gif图片制作教程_app_16

4.3 licecap 在录屏过程中可以随时拖动窗口改变录屏范围,Stop 过后自动保存为 GIF 格式。下图是licecap制作的一个例子。

Mac屏幕录制与gif图片制作教程_mac_17