制作清晰Gif截图以作为项目的运行效果

最新推荐文章于 2022-03-23 00:25:14 发布

muzitest

最新推荐文章于 2022-03-23 00:25:14 发布

阅读量773

点赞数

分步阅读

我们在Github看到别人的源代码的时候，都会有一些截图介绍，有一些就是纯图片的，但是有一些就是类似于下图之类的Gif图（第一个图）；这种Gif给人的感觉就是生动、形象。既然如此，怎么做出这种图呢？嗯，我介绍的方法可能有一些局限性，大家如果有更好的方法，Please告知我，谢谢。先看一下我做的效果吧（第二个图，Gif图还是比较清晰吧，哈哈）

一开始，我是使用FFmpeg和ImageMagic来实现的，效果的确不错，大概就是先使用FFmpeg将视频转成很多张png图片，然后再使用ImageMagic将这些png图片合成成一张Gif图（或者强暴一点就是直接使用FFmpeg将视频直接转换为Gif图，但是这样的Gif图很失真，没意思），而且制作过程中还使用命令的，可能对于某些比较钟爱命令的还好说，像我这种，能简单就简单，哈哈~下面就使用Photoshop来简单的制作出清晰的Gif截图吧

工具/原料

Mac或者Windows：这个不重要，能装上Photoshop和Android Studio就可以了
Android Studio：Google说这是未来的Android开发工具，使用它来录屏
Photoshop：大部分工作就是使用它来完成
4.4版本或以上的Android手机：我使用的是小米3，不能是模拟器，只能是4.4版本或以上真机

使用Android Studio录制视频

1

手机成功连接到电脑之后，点击箭头所指向的图标（Screen Record）
2

设置录屏参数（我觉得默认就好）
3

点击Start Recording，并在手机上做相应的操作（用于你要截取的动画），好像Google说最长可以录屏180s
4

录屏完毕后，点击stop，选择你要保存的位置

END

使用Photoshop将视频转换成Gif图

1

在Photoshop导入通过Android Studio录制的视频，打开方式如下
2

限制为每隔3~5帧吧，这样可以缩小一下文件的体积

PS：由于一般来说手机的分辨率是比较高的（小米3的是1080X1090），不太适合于在网页显示和网络传输，你可以按command+option+I来修改图像大小，修改的时候，宽度和高度最好锁定，然后修改宽度为320像素就比较合适了：
3

打开时间轴
4

全选时间轴的全部图片（方法：先选中第一个图片，按住Shift键，再选最后一张图片），设置延时为“不延时”，这样可以让你的Gif图和视频的播放速度一样
5

点击文件—>保存—>存储为Web所用格式…
6

设置一下存储参数，不过默认就好了
7

选择保存途径吧，文件名它警告不用使用中文名，哈哈，好吧，你自己改一下咯

END