GIF动画系列(一):超简单闪闪发光的文字动画

小编:看到这个闪闪发光的文字动画就让我想起中学的时候(ps:那时小编我还不是一名UI设计师)。那个时候是流行非主流的,尤其是这种闪闪发光的。当时真的是喜爱的不得了可是根本不知道怎么做出来 >_< !多年后的今天,终于又让我遇上了@飞屋睿。好了,废话不多说。小虎伴们,快来和小编我一起做起来吧!

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

作者:@飞屋睿

(0)

相关推荐

  • 怎么用Ulead GIF Animator做简单GIF文字动画

    怎么用Ulead GIF Animator做简单GIF文字动画

  • 如何做GIF动画表情包 超简单教程

    动画表情的现在聊天都喜欢斗图了,如何个性化的制作一个动画表情呢,今天给大家介绍一下在线制作软件,不需要下载也可以使用. 操作方法 01 登陆网页版,不需要下载到电脑上的,然后点击 美化或者其他功能进行 ...

  • PPT文字动画方案汇总

    PPT文字动画的设计直接音影响着读者的感官效应,所以在汇报中的PPT不仅需要好的PPT模板,更要细化到其中文字的动画效果,下面推荐几种文字动画方案。 PPT标题的文字动画:标题文字动画一般非常简洁,设 ...

  • AE如何制作简单的位移动画

    位移动画是一种简单的AE动画,其基本原理与Animate相同,今天我们就来看看,如何利用AE制作简单的位移动画. 操作方法 01 双击项目面板载入素材. 02 在弹出的对话框中找到素材,点击载入文件夹 ...

  • AE怎么制作简单的文字手写效果的动画?

    经常看到一些比较好的文字动画效果,但有时候却想不出制作的方法,特别是对于刚接触AE不久的新手来说,在网上找了些教程,可解说的并不怎么详细,看一些视频教程,却无奈视频太模糊,完全看不清有木有,今天跟大家 ...

  • 制作简单的火焰文字动画效果

    看到别人头像上闪烁的"火焰文字"头像很酷,是不是也想要一个呢?这里与大家分享一下制作简单的火焰文字动画效果的具体方法. 制作火焰文字的底图 01 菜单栏:执行"文件&qu ...

  • 如何用ae制作一个思维导图的小动画超简单

    ae在制作mg动画时有着很好的效果,每天我们练习一点点,学习一些小技巧,你就会越来越熟练,做自己的动画会越来越熟练,那么怎么制作一个思维导图的小动画呢?请往下看 操作方法 01 新建合成 02 画一个 ...

  • 在PowerPoint2010中简单制作文字闪烁特效教程

    很显然,需要制作不停闪烁的动画,就得先制作出一个闪烁的动画,然后让它一直重复这个动画即可.当然,这只相当于一个方法简介,在任何版本的PowerPoint中都是行得通的,本教程就为大家介绍在PowerP ...

  • ppt怎么制作一个圆形滚动的文字动画效果?

    ppt中想要制作一个文字动画,该怎么制作呢?下面我们就来看看详细的教程,很简单的教程. 1.首先启动ppt2010,执行插入-形状命令,插入一个细长的矩形. 2.修改形状填充为灰色,形状轮廓为无轮廓, ...