动图，顾名思义就是动态图片，亦称GIF图片。官方解释：它是一个可以将多幅图像数据存于一起，并逐帧显示到屏幕上，形成简单动画的图像文件。

动图多用在表情包，为平时的聊天增加乐趣（如下视图）

小陈皮的表情-微信表情已上架

同时还有电商详情页展示，工作流程说明，活动页、PPT报表等都可以用到动态图片。

动态图片具有非常强的趣味性和直观性，在日常工作生活中扮演着非常重要的角色。本文笔者通过自身的经验，带大家去认识、了解和制作动态图片。

上面我们说到，动图是一个多幅图像数据文件，其中应至少包含两幅图片（如下视图）

这张信号干扰图片是6幅图像循环播放组成的

当图像越多时，动画就越细腻（文件也越大）。当每秒超过24帧，即单帧时间低于0.04秒，这些连续播放的图片就会连成视频。

动态图的制作方法比较多，软件的话一般用PS制作较为常见和方便，方式可以由静态图片制作成动态，可以ps绘制，可以用视频文件截取拼接成动图(局部动图就是这么做的，也可以用3D文件制作动画。（如下视图）

（视频截取的局部动图）

（ps绘制动图）

但凡是通过PS输出的动图，制作过程只有两种形式：帧动画和视频动画（如下视图）

帧动画：通过每一帧的依次、循环播放形成动画。制作时需要把每一帧的最终形态做出来。

优点是可控程度高，缺点是繁琐，易出bug。（帧动画可转视频动画，视频动画转帧动画会丢失数据）。

视频动画：用关键帧，时间轴来控制元素的数据变化（位置、透明度、尺寸等）系统自动添加过度帧，通过关键帧之间的数据变化实现动画。

优点是操作简单，效果多变，可塑性强，很多优点，推荐使用。缺点是文件较大，对电脑配置要求较高。

帧动画常用的制作方式有：液化、变形、移动旋转、钢笔绘制

示例1：液化

通过液化，让原图形变形，新图形和原图切换播放产生动画。（如下视图）

示例2：变形

变形拉扯，可以很好的做运动类的动图，结合涂抹模糊效果更好（如下视图）

用网格变形加涂抹来模拟整个动画过程

PS：制作动画的时候首先要考虑物体的运动规则，这样做出来才真实！

示例3：移动旋转

飞行、奔跑、伸缩可以用移动来做，通过旋转变形也可以做旋转动画，不过此类动画用视频动画更加方便

示例4：钢笔绘制

（如下视图）

视频动画可控参数有：位置、透明度、变换、样式、蒙版位置和蒙版启用（如下视图）

制作视频动画之前，我们需要了解关键帧，点击控制项前的圆圈即可激活关键帧，关键帧记录着每个位置的参数，通过关键帧之间的均匀过度，形成动画。

值得注意的是：图层在未转智能对象的时候不能记录尺寸变换，转智能对象之后，位置控件变成变换，这个时候变换可以记录对象的位置和大小变化。

示例1：移动视频动画

移动是最基础的动画，配合蒙版可以制作出很nice的效果

PS：一个简单的移动动画，通过移动关键点的位置可以实现加速减速，如果开关移动过程中，背景的灰色和绿色有破绽，可以使用蒙版进行纠正。

示例2：变换视频动画

通过关键帧，可以很好的控制动画的延展

PS:用变换给对应的旋转角度打上关键帧，变换可以实现移动、缩放、旋转、变形等动画，感兴趣可以自己摸索一下。

示例3：透明度视频动画

添加明度变化就可以制作消失和闪现的效果

PS：用变换做一个向右移动同时缩小的动画，移动的同时再给它一个渐隐的变化。

示例4：样式视频动画

light外发光样式变化动画

和之前的动画原理一样，这个是两个图层样式之间的过度动画。

示例5：蒙版视频动画

可以通过控制蒙版的位置来制作遮罩动画，与上面类似，这里不做重复！

1、叠加

把元素（黑丝背景）滤色模式到需要动画的文件中就可以了，动画元素智能对象（特别注意，必须要是视频动画才能实现；可以把GIF图转换成视频动画！

用AE制作的飘雪素材（没有可以网上下）叠加到背景图片

2拼接也很好理解，这里不做累赘复述了！

到这里本案例就结束了，文章有涯而学无涯，一篇文章是没办法把所有知识点说透的，有疑问就私信我吧，关注我，不迷路！

gif是什么，怎么制作会动的图片

gif图片是一种非常有趣的动画图片，虽然制作方法简单，但在这方面还有不少朋友是小白，现在小编就安利给大家一个详细的图文教程，看完它你也能够制作属于自己的GIF动画图片哦。

借助工具：闪电gif制作软件

方法步骤：

第一步、首先，在电脑上安装gif制作软件并打开，选择“新建”可添加文件、录屏等。

第二步、将图片上传进来后，ctrl A全选图片，即可进行编辑。

第三步、这里以添加文件为例，设置文字内容以及颜色等，选中文本框可直接拖动至合适位置。

第四步、点击左下角的播放按钮可浏览当前动图效果。

第五步册老前、完成后，点击“导出”。

第六步、在这里，设置动图名称和导出位置，点击“确定”含念就可以了。

第七步、GIF导出后，会有以下提示，打州清开文件导出位置浏览即可。

GIF动态图片是怎么做的呢？

工具：

photoshop

GIF动态图片制作步骤如下：

1、打开photoshop开始制作gif动图

2、新建一个ps文件，这里都可以是默认的即可，然后点明毕芦击“确定”即可

3、新建一个名字为“树1”的图层，然后新建一个名字为“乌鸦1”的图层

4、树1和乌鸦1两个图层的内容

5、分别复制“树1”图层和“乌鸦1”图层，得到“树1”、“激带树2”、“树3”和“乌鸦1”、“乌鸦2”、“乌鸦3”共6个图层

6、把“树1”和“乌鸦数仿1”两个图层合并，“树2”和“乌鸦2”两个图层合并，“树3”和“乌鸦3”两个图层合并

7、合并之后都显示出来的图像

8、接下来点击菜单中的“窗口”，然后点击“窗口”下的“时间轴”

9、然后就会在ps的下方看到一个时间轴的视图

10、接下来将“图2”和“图3”的不透明度都设置为0，“图1”的不透明度为“100”

11、然后点击时间轴视图中下面小图标中倒数第二个新建的小图标新建一个帧

12、之后重复上面的步骤，将“图2”的不透明度设置为“100”，其他设置为“0”

13、然后点击时间轴视图中下面小图标中倒数第二个新建的小图标再新建一个帧

14、之后重复上面的步骤，将“图3”的不透明度设置为“100”，其他设置为“0”

15、然后点击时间轴视图中下面小图标中倒数第二个新建的小图标再新建一个帧

16、接着删除掉最后一个帧

17、然后按照下图中红色方框指示，将图片的循环格式设置为“永远”，将每个图片的持续时间设置为“0.2”秒

18、之后就可以将我们制作的gif图片进行储存了，按照下图中指示，点击菜单栏“文件”，然后点击“文件”下的“存储为Web所用格式”

19、然后选择一下存储位置，然后点击“保存”，gif动图到此就制作完成了。