动图的制作技巧

前言

有很多的同学在制作博客的时候会看到我的很多博客，使用了很多的动图来表达很多例子实现出来的效果，或者网页里面的效果的实现。很多人看了之后也表示肯定，觉得这样的效果不仅可以让博客的例子看的更懂，也会理解操作的过程。所以今天我就来分享一下我的动图制作的过程。

---

动图

不过在这里我希望和大家分享一下，什么是动图：

动图就是动态图片（dynamic image）是指当一组特定的静态图像以指定的频率切换而产生某种动态效果的图片。网络上常见的表现形式是gif动画，它是通过对多图层的图片，按时间进行不同的切换，从而达到动画的效果

而我们现在科技的一些发展，我们的动图也不限制于通过使用大量的图片切换来进行动态效果的制作，而是可以通过录制的视频进行一个压缩的操作来完成。

所以我们的动图制作是这样的：

1. 录制自己的代码运行或者操作视频
2. 通过网页在线或者PS压缩

---

录制软件

关于录制软件，其实有很多软件公司包括系统都是为了满足用户的需求而已经制作了这样的功能，这边介绍一些比较常用的功能。

第一种是系统自带的，比如Windows10系统里面自带的按下菜单栏键+G就可以召唤出来。

什么？你问我菜单栏键是什么？自己去查啊！

算了，还是好心说一下，菜单栏键就是你的笔记本电脑上 fn 和左 alt 两个键中间的那个图标按钮（代指Windows系统的图标）。按住他和G就可以打开。只是这个功能我用的很少没有去研究，同学们可以自己去研究研究。

这边我重点介绍第二种：QQ的录屏功能

你可以通过快捷键（默认快捷键）Ctrl + alt + s 来打开录屏功能，大概如下：

​

 打开之后，点击开始录制我们就可以录制这个过程了：

​

       这个过程直到我们点击结束之前都是不会停止的，可以放心的操作，其中有一些按钮在上面，可以在你录制的时候绘画，圈住一些你想要的重点，或者增加你想输入的字符等等，这些你可以自己操作，自己摸索。点击结束之后，这个视频就录制完毕了。

---

制作动图

       动图的制作，在很多平台上，可以选择用图片来一帧一帧的播放。虽然这样可能看不出变化，但是也可以做成动态的图片来指示操作，如果觉得录制视频太麻烦，用一组图片制作成动图也不是不行的。不过我没有去摸索这个方法，因为我的动图需要把所有的过程压缩进去，所以没有去关注，大家可以多多去摸索方法来教大家怎么制作动图。这里我和大家介绍我自己学习的视频压缩成动图的方法。

首先，你要有PS。

PS可能没有非常好用而且容易崩溃，但是在这一次我们可以用他来制作动图。现在让我们来打开PS，打开你的文件。

​

这里注意不要点打开为，这个选项下的文件一般都是和PS自己格式下保存的文件，或者其他产品的文件。

打开文件之后我们可以看到这样的内容：

​

       第一个红色框框是可以设置清晰度和是否循环播放的按钮，循环播放的过程是可以在导出文件的时候设置的，但是在这里设置你可以直接预览它的循环播放效果。黄色框框框住的剪刀可以裁剪片段，用于把视频里面的不需要的片段删除。这里需要注意的是这个视频上传的时候，会在末尾加上一个红色的片段，无论你的视频有没有这个片段都会存在，如下图：

​

        所以这个片段一定得裁切掉，剩下的自己觉得时间太长需要裁切的也可以裁剪。另外框住的就是一个蓝色的箭头，可以拖动他来看视频的内容，以及移动到你需要裁剪的位置。这里我做了动图来演示，大家一起来看看吧 

​

删除片段的方法可以点击退格键（backspace）或者删除键（delete）来实现。

裁剪好了我们的视频，我们就可以开始去生产我们的动图了。

首先我们需要点击文件菜单，下面有一个导出按钮，点击我已经标识好的选项

​

 选择存储为web所用格式（旧版）来生成。点击之后会弹射出来这样的菜单：

​

首先首先是上面的gif，框住的地方，点击可以设置成不一样的格式，我这里是因为我经常设置gif已经被软件识别为默认格式了，第一次做的同学们需要注意修改他。

       之后是下面的图像大小，可以通过他调整图片的大小。之后是下面的按钮，点击之后可以播放你的gif查看效果。我们看到上面有一个循环选项，设置它的循环次数。左边我们可以查看他的格式和信息，下面的预览点击之后可以查看它在网页里面的效果。剩下的大家自己摸索。

之后我们点击存储，就可以生成这个GIF图片了，但是在这里我需要提醒大家一些需要注意的地方：

录屏的范围不要太大

​

因为太大了，你的PS甚至都没办法实现压缩，甚至直接崩溃的情况也是存在的。（吃亏一万次的我） 我们可以选择缩小它的大小来重新生成gif：

​

 这样我们就可以生成gif了。这个过程有一个很大的问题就是

尽量不要去压缩你的图

尽量不要去压缩你的图

尽量不要去压缩你的图

因为这个过程有时候会失败，而且反复压缩失败的情况也会有。所以这边推荐你在录制的时候，经量不要把整个电脑屏幕录制进去，我们可以选择精准的区域，我这边推荐的大小是：700~1000以内的宽度，高度也是700~1000以内，在这个范围内的内容比较容易压缩

录制时间也不要不太长。过长的时间压缩的时候也会出现问题，而且压缩的时候同学们也需要注意你的时间，可能会被PS压缩掉，达不到你的最终效果。

---

历经千辛万苦，我们的动图就这样被我们制作出来了：

​ 

       这样我们的动图就制作结束了，感谢大家的观看。大家不懂得或者想问的也可以在评论区域来问我。希望大家给我一个一键三连，谢谢大家。