前言

GIF小图片经常带给我们惊喜，眼花纷乱诱人眼。动画效果就是能如此深入地争夺我们的视野。明天我们要学的GIF动画效果十分复杂易学。让文字闪闪发光，置信在网页的任何角落呈现都不会被疏忽。

一、预备（文章开头处有下载！）

星星画笔一

星星画笔二
二、根本文字外型

翻开PS，新建一个文档。文档大小我选用600px*800px。新建成功后，选用突变工具，沿着画笔的对角线画出一个直线突变背景。色值从#0a485a过渡到#1180a0。



这里的文字我选用了较为粗的字形，当然，并不是细的字形就不合适。文字颜色设置为#08d7f0。将文字栅格化。这里我建议大家还是缩小图像处置一下文字的边缘，让边缘变得更“clean”。

有人问，这里可以选用别的颜色吗？完全可以！选用颜色时要留意的就是，首先，背景不能抢镜。所以背风光一定要比文字的颜色更暗。其次，文字的颜色由于要凸显“闪亮”，所以也不要选用太昏暗的颜色。整个画面坚持一致色系，由于闪光曾经足够抢眼的效果，因而，不用再添加花哨的颜色搭配来“诱人眼”了。
三、了解根本的动画的原理

在做GIF小动画之前，我想和大家分享一下根本的动画的原理。很多人大约晓得，我们看的动画，都是由帧组成的。普通而言1秒有25帧，而关于普通的动画而言，6帧就需求一张原画。我本人了解动画，也就是相似于魔术师，让运动的画面以很快的速度切换，让你的眼睛以为它在挪动。

因而，回到我们明天要做的动画效果这里来，我们要做的是一个闪闪发光的动画，那就是光点效果的变化。就像波光粼粼的湖面那种阳光反射出的水光不时星星点点闪烁的效果一样。

经过这样一梳理，我们就晓得，我们接上去要做的是就是发明出闪闪发光的不同效果图，然后让这些效果不时切换。而与此同时，文字坚持不变。那么，这个闪光效果能变得真实可信。没错。了解了原理，可以开端入手了！

将文字图层复制两个，变成三个文字图层。



进入【滤镜>正色>添加正色】，辨别为三个文字图层添加正色滤镜，在正色滤镜中辨别为三个图层设置正色数量为15%、16%、17%，高斯散布，取消单色的单选框。


四、星星闪闪效果

接上去，我们在每个文字图层的上方都辨别新建一个图层，然后用我们的星星画笔来为每个文字添加字面闪闪发光效果。我已经对这个进程爱恨交集，由于太自在，最终效果很难掌握，但又足够培育设计中的艺术感。

两个星星画笔资源装置后都辨别提供不同的画笔，但是原来的画笔能够不太合适我的要求，可以在画笔中修正画笔的大小以及画笔方向。



画笔坚持白色，三个图层的闪光效果会有些变化。假如想要画笔更“亮”的，鼠标可以多单击几次。总之，这局部的自在发扬，可以让人找回一点艺术创作的觉得。



五、动画效果的制造

把上一步画好的三个闪烁图层辨别与三个文字图层兼并。选中要兼并的图层，点击右键，点选兼并图层。


进入【窗口>工夫轴】，点选工夫轴后，编辑区域的下方会呈现工夫轴，单击两头的按钮“创立视频工夫轴”。

这时，进入工夫轴编辑器，我们看到我们的一切图层都呈现在了工夫轴里。我们只需求把这四个轨道里的图层布置好出场序列即可。



关于动画编辑的根本原理，你可以想象本人是个舞台导演，是由你来布置每个图层从什么时分上场、什么时分登场。比方，在这个案例中，我们首先要确定我们这个舞台扮演的继续工夫。由于闪闪发光效果应该是很快的，那么我们就设置动画全程的工夫为0.6秒好了。这里的四个图层，只要背景层会是不断坚持在舞台上的，所以，我们把背景层末端拖动到0.6秒这里。



工夫轴是以帧为单位的，所以你不晓得0.6秒在哪里？没关系，当你拖动时会自动呈现工夫单位。接上去，舞台上三个图层，导演的意思是要它们三个辨别以0.2秒的工夫距离轮番上场。也就是指这三个轨道的图片首尾相接，辨别继续0.2秒。那么，你依照相应的顺序对每个图层停止拖放即可。你还可以点击播放按钮试试看效果。假如有不称心，可以持续修正。



就这么复杂。我们的动画效果就做好了。在保管GIF图片时，进入【文件>存储为WEB格式】，这时会弹出保管设置面板，在面板中保管的格式选择GIF，循环选项选择永远。



这是保管成功的GIF动效图

后记

只需掌握了根本的动画制造原理，理解工夫轴的根本概念，动画效果就很容易做出。添加上适宜的丰厚想象，有助于你对原理的掌握。希望你能从中获益。

原文地址：ifeiwu

作者：@飞屋睿