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

似鱼飞鱼

闪动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动画做法。大家也可以自己摸索一下。原理相同，都是根据帧的变化制作。

akria1214

这个以前就会了哎。

Air·挖坟者

顶一下！！！

轻烟浮洛熙ミ

亏求版主版主QQ教      20676425

轻烟浮洛熙ミ

郁闷啊。。怎么弄字 上人物什么的 不懂啊

安，Momoや．

。。。。我的储存web格式那个是灰色的
为什么

Herrian。

  顶了再看，好长

小璐.。

#xce1  貌似和那个U什么什么的差不多。 感觉还是U的比较方便吧

＊凌尕′晨づ

LZ纯爷们

小鲫鱼

我家是CS2

孆濼ぐ尐妖

强大的楼主，

学习中。。

黯ㄨ熏羽囉〃

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

●″哚哚°＊

学习一下

猪头Rain

第一页...

想看个成品呢

zichen1893

留个位置回来看看。