昨天在一个设计交流群里，有同学咨询gif的小动画，刚好有时间，且我自己也从未通过photoshop制作过小动画，所以就抱着试一试的心态自己做了一个，没想到还成功了。

这里将制作步骤截图展示，并详细描述出来，感兴趣的小伙伴，底部有源文件奉上，自取～

一、制作基础层

1、新建画布，大小500*500px，分辨率72

2、将背景直接填充为黑色，打上喜欢的文字，呀是月亮哇

3、复制刚才的文字，原位粘贴，填充一个别的颜色

4、画一个文字大小的矩形（为便于观察，我先用白色的，后续会换成背景色）

5、关键来咯！将矩形放在绿色文字下层，并作为他的剪贴蒙版

二、制作时间轴

1、打开我们的 窗口——时间轴

2、点击创建视频时间轴

3、我们gif用不了那么长的时间，所以裁剪掉一部分。

4、左侧栏里，选中我们创建的矩形，点击矢量蒙版位置，将白色矩形拖拽至如图位置（绿色文字刚好看不见），并新建关键帧

5、移动红线至时间轴最末端，再次点击新建关键帧，然后拖动矩形至如图位置（刚好完全显示出绿色文字层）

6、以上效果确认无误后，我们再将矩形的颜色改为背景色，我这里是黑色

7、现在矩形和背景融为一体，矩形移动的过程，就是文字的逐渐显示的过程

三、最后导出工作

1、设置动画为循环播放（点击设置按钮——勾选循环播放）

2、点击 文件——导出——存储为web所用的格式

3、选择GIF——点击存储，大功告成！

无底色效果展示

含底色效果展示

以上gif的详细教程到这里就结束了，目前我只用到了位移，大家在根据教程制作后，还可以尝试缩放、旋转、透明度等调整，记得学会举一反三！

喜欢这篇教程的点个赞呗～

Powered by Froala Editor