Gif后续-loading等待不枯燥

Hello，大家好

我是小桃红

越来越多动图出现在我们生活中的时候，慢慢发现我们已经从一个读图时代开始走向了一个动图的时期，相对于文字，我们更关注图像；相对于静止的图像，慢慢的发现，动画更加的吸引我们。

在等待网页加载的时候，那个简单的loading……已经无法再满足我们的审美了。

文字的枯燥和乏味，让小桃红又燃起了对GIF的熊熊烈火。

【1】GIF的生成方式

在PS里面的两种GIF生成方式【创建帧动画】和【创建视频时间轴】里面，帧动画一直是我比较偏爱的，因为他的简单粗暴和直接，让我们可以更快的去实现所想要的动作，就像是一个定格动画的时间导轨，直接的增删，可以非常直观的展示出每一个画面，所以今天的演示依然是从【创建帧动画】发散出来的，关于一个loading的思考

【2】 常见的一些loading展示形式

我们经常会见到一些很小的等待加载的gif，

在图形匀速而有规律的变化中，我们的等待变得有趣起来，甚至有点不那么期待页面的加载速度，而是会专心的去看动画下面的剧情了。也许这就是动图的魅力吧，枯燥和乏味换了一个角度，竟然让我们多了期待。

【3】动图其实很简单

不排除很多复杂的gif制作过程中用到了AE和Flash，其实PS也可以满足我们对于GIF的小小期待，而且步骤，其实也是非常的简单易行。

所以，万万没想到的第一步，依旧是，打开PS。

之后的第二步，是动手创造的环节，首先去制作一个等待的原型。

然后，要思考一个问题：“我要用什么样的方式吸引人的眼球呢”---旋转or移动or闪烁，根据不同的呈现方式，去判断下一步，该要做些什么。

比如，我选择了旋转：

确认旋转的角度，尽量让角度是可以被360°整除的数字，来确保旋转归位后，动画不会卡顿，我选了旋转30°。

之后，这是一个偷懒的阶段，粗略计算一下在旋转几次的时候图片会与原图重合（也就是归位）就对原图层，复制几个，

旋转30°，对每一个图层进行旋转，在上一个图层的基础上旋转30°

这个时候，准备工作又结束了，可以进入正题----编辑动作

依旧是点击【创建帧动画】（想不到吧）

第一帧，是原图的样子

创建第二帧，把显示的内容进行一下编辑，显示旋转了第一个30°的图层，第三帧显示旋转了第二个30°的图层，第四个第五个第n个，以此类推……

每一个关键帧做好了之后，可以来测试一下旋转效果

当然如果觉得需要过渡帧，也可以尝试增加一个看看

当然如果是需要透明的图，记得整体选中，把底图隐藏掉

之后又是一个大快人心的时刻了，保存！！！

点击【文件】-【导出】-【存储为Web所用格式（旧版）】或者快捷键【ctrl+shift+alt+s】

去设置GIF的参数，之后存储

感觉十分简单快捷毫不复杂，甚至还有点小激动的时候，一个新的loading动画就这样诞生了。

突然想起很久很久以前，好朋友要编程，找我要一张loading的图，当时的我十分无知，在PS里打了一个loading，然后发了一个png给他。

时至今日，我有点明白了当时为什么他眼神中有一种不像感谢，却说不清的内容。

那个内容应该是在问我，你没学会做GIF？

小桃红·敬上

当然除了loading的动画，我们还可以做很多事情的，不信你看 

不是所有教程都好用

不如关注小桃红

这个Loading和摩天轮都分享出来了

公众号后台回复：正在前往

记得来拿哦！