让我们闪一下，photoshop cs3 简简单单做闪动gif

似鱼飞鱼 · 发表于 2009-6-17 09:21:01

闪动GIF，特别是只有2帧的简单闪动GIF，应用率非常高，无论是网站首页的小广告，还是论坛的签名，都能起到最棒的宣传效果。而制作2帧的GIF的过程十分简单，下面我们针对phtoshop cs3，来讲解一下如何制作闪动GIF.

课前加餐——了解闪动动画原理和帧。

不知道大家是否看过电影胶片，电影胶片上的每一格镜头，就是我们在制作动画中的帧。用文字解读十分不容易理解，我们直接进入正题。

1、准备工作

首先，我们要清楚自己要制作图片的大小，以及每一帧大概要展示的内容。

比如我要做的动画，第一帧显示背景

第二帧用来展示一些文字

第三帧这些文字闪光

第四帧清屏掉现有文字内容，并显示第二屏的新文字。

请大家注意我图层的安排。在设定每一帧的时候，请预先设定好图层的样式，图层的位置以及相关的安排。一切准备好之后，开始制作闪动。

首先，我们要打开动画面板。

在photoshop cs3中，动画无需要切换另外一个软件制作，而是集成在photoshop中直接制作。

下面让我们来看一下刚刚弹出来的动画面板。

根据刚才的构思，我们的动画会有4帧，点击“新建”按钮，，来“新建”出来4个帧。

新建按钮在动画面板的下方，删除帧（垃圾桶图标）的左边。

新建帧的时候会根据第一帧的内容直接复制并新建，这个时候我们设定一下每一帧停留的时间。

设定完时间后，下面我们开始在每一帧中，隐藏不希望出现的图层，并调整位置。（调整位置多用于做有动画过渡效果的动画，这里强烈建议简单的闪动GIF在动画之前就把帧的位置固定，否则后患无穷）

我们的第一帧只要背景，我们隐藏掉其他图层

接下来第二帧，第二帧我们需要显示出来文字，将这些图层显现出来。

接下来第三帧。（请注意这里，我的第三帧是闪光，所以前一帧的内容还要原样的停留在那里，如果你之前没有将所有图层位置放置好，那么在第三帧中，一些小麻烦就会出现困扰你，具体是什么情况，大家可以再实际操作中找出来他，并自己找到客服办法，最好的方法就是养成好习惯，一切准备好了之后再进行动画制作）

为了让闪光出现闪动效果，我复制了第三帧，复制了3份，共4帧。

并把这些闪动修改为停留0.2秒，并设定2帧有闪光，2帧没有闪光，

这样交替下来，就会出现闪烁效果。

请注意看第五帧和第六帧的图层变化，第五帧，我设定了闪光可见，第六帧我设定闪光不可见；这样一帧可见，一帧不可见，连贯起来就是闪光的效果。

可以随时点击播放按钮来测试效果，并且调整一下排放的顺序和时间。

接下来设定最后一帧。

这样一个动画的所有帧数就设定完毕了。保存PSD以备后续修改，下面让我们导出这个GIF。

文件菜单-存储为web和设备所用格式....，格式未知选择gif，一般系统默认即可，点击下面的播放按钮可以看效果，确定没问题，点击存储。

一个简单的闪动动画就制作完毕了，保存的时候注意保存为gif哦。赶快去看看效果吧。

另外使用PS还可以制作有运动轨迹的GIF，一些复杂的动作也能实现，不过介于GIF图片，图形元素越多图片越大，而为了让浏览效果最棒，建议尽量不要让动画中有太多动画资源。

毕竟，小巧而又精致的GIF才是最实用的。我们刚才制作的GIF只有36K。

如果日后时间允许的话，我来简单教一下复杂的GIF动画做法。大家也可以自己摸索一下。原理相同，都是根据帧的变化制作。

秋夜。 · 发表于 2009-6-17 09:56:24

沙发。

｀果汁‰「糖 · 发表于 2009-6-17 11:14:37

为什么不放个成品来看看

..好想看

春天的馒头 · 发表于 2009-6-17 11:39:36

貌似太快了

houge521 · 发表于 2009-6-18 19:59:05

忧伤☆囧公主 · 发表于 2009-6-19 16:41:43

⑦名

梦ぃ随风逝 · 发表于 2009-6-19 22:13:49

⑧名

冷洛 · 发表于 2009-6-19 23:57:46

看了学习一下。
先去试试

＊︷幽晴。″ · 发表于 2009-6-21 09:42:30

貌似传说中的第一页

...

绮颜 · 发表于 2009-6-21 12:19:45

飞鱼我偶像

zichen1893 · 发表于 2009-7-24 23:34:13

留个位置回来看看。

猪头Rain · 发表于 2009-7-24 23:36:27

第一页...

想看个成品呢

●″哚哚°＊ · 发表于 2009-7-25 08:07:21

学习一下

黯ㄨ熏羽囉〃 · 发表于 2009-7-25 16:30:50

话说...我看的好混乱...
去试一下

孆濼ぐ尐妖 · 发表于 2009-7-25 17:48:49

强大的楼主，

学习中。。

让我们闪一下，photoshop cs3 简简单单做闪动gif

评分

评分

浏览过的版块