电子商务网页gif动画的制作概述.ppt

《电子商务网页gif动画的制作概述.ppt》由会员分享，可在线阅读，更多相关《电子商务网页gif动画的制作概述.ppt（32页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、电子商务网页gif动画制作概述 将在Photoshop中去创建一个由多个帧组成的动画。把单一的画面扩展到多个画面。并在这多个画面中营造一种影像上的连续性，令动画成型。1.动画初识 动画经常被安放于网页中的某个区域用以强调某项内容，如广告动画。这种动画通常按照安放位置的不同而具备相应的固定尺寸，如468x60、140 x60、90 x180等。也可将动画应用于手机彩信(一种可发送图片、声音、视频的多媒体短信服务)。这些用途都有各自的特点，除了尺寸以外还有其它需要考虑的因素。如字节数的限制，帧停留时间等。Photoshop CS3 Extended(扩展)版本才具备动画制作功能，普通版本是不具备的

2、。CS2版本有附带动作制作功能，操作也与CS3 Extended相似。而CS及更早版本则需要借助捆绑的ImageReady软件进行动画制作。一个简单动画：之前制作的是位移动画，是利用图层的移动。除此之外，还可以通过设定不同的图层部透明度来产生动画，制作的方法相信大家应该可以猜得到，那就是在不同的帧中改变图层调板中的部透明度数值。现在新建一个100100的图像，新建一个图层并绘制一个方块。然后一次性复制5个帧出来，将会看到6个帧都是相同的内容。将所有帧的停留时间统一改为0.1秒。接着选择第2帧，在图层调板中将方块图层的不透明度改为80%，第3帧60%，以此类推，到第6帧为0%。形成的效果类似下右

3、图所示。这时候播放就会看到方块逐渐渐隐的效果。需要注意的是，通过 按钮隐藏图层等同于将不透明度设定为0%。需要一个从左端移动到右端的效果，也就是说方块的起始位置必须在左端，但现在所有帧中的方块都在中间，这该怎么办呢？既然“所有帧”都在中间，那么我们就让“所有帧”都到左边吧。在动画调板中选择所有的帧，通过移动工具移动图层到最左端，就会看到所有帧中方块的位置都发生了改变。此外还有一种方法。整个动画过程可以看作是一个前因后果的关系。如果你在第一帧删除了某个图层，那么之后所有帧中就都不存在这个层了。因此在Photoshop动画设定中，第一帧是比较特殊的。现在选择第一帧，确保图层调板中“传播帧1”有效，

4、如下左图红色箭头处所示。然后移动图层，就会发现所有帧中的方块都统一发生了移动，如下右图所示。如果“传播帧1”无效则只会改变第1帧中的方块位置。这两种方法各有利弊，“传播帧1”其实就是“传播第1帧，就是将第1帧的改变传播给所有帧。它可以很方便地改变整个动画中某些物体的设定。而选择所有帧的做法在帧数较多的时候会稍显麻烦，但它可以派生出“选择某些帧”的方式，比如只要改变前3帧时，就可以将前3帧一起选择后进行设定。需要注意的是，即使原先每个帧都设定了不同的图层位置，“传播帧1”也仍然有效。效果等同于所有帧中的坐标按照第一帧进行偏移。将所有的帧中的方块都移动到左端后，要做的就是逐个帧地设定方块的位置，那

5、就是选择第2帧移动些许，选择第3帧移动些许。当然这中间有一个我们已经提到过的问题，就是很难保证移动的流畅。我们在Photoshop中学习过，在选用移动工具的时，可以使用键盘上的方向键去移动图层，一次移动1像素，配合SHIFT键就可以远距离移动。那现在就选择第2帧，用SHIFT+右方向键移动。接着选择第3帧，由于该帧中方块又回到了起点，所以需要两次SHIFT+右方向键。第4帧中则是3次，以此类推。设定类似下图所示。第6帧中方块已消失，可不作设定。2.帧的过渡 目前我们制作动画的方法还属于全手动类型的，就是逐帧进行制作。比如一个物体的移动，我们是从头到尾参与了每一帧的设定。这种方式能够带来最大的可

6、干预性，但同时也使得制作变得非常繁琐，尤其是帧数多的时候。今天我们要学习的就是利用帧过渡来制作动画，它的基本原理是，设定好某段运动的起始帧和结束帧，然后在这两帧种产生平均的过渡。如果是物体的移动，则就是先设定好移动起点帧和终点帧。如何让动画可以完美地循环播放，也就是从A到B再回到A，这样才能形成完整循环，称为往复式动画。就我们目前的这个动画来说，可以通过复制并移动帧来完成“回去”的过程。撤销操作到原先只有5帧的时候，现在介绍另外一个简单的方法，那就是选择帧5后再次执行帧过渡，将过渡方式设为“第一帧”，表示是从现在的帧(第5帧)过渡到第1帧去，添加帧数保持为3即可，也可以设定更大的数值。确定后就

7、能得到一个往复式动画了。下图所示是设定了添加7帧的效果。在播放这个往复式动画的时候，会发现一个问题，那就是方块“回场”的时间比较长。这当然是因为同样的距离我们用了更多的帧数，如果将帧6到帧12的延迟设为0.05，就与原先差不多了。那就是既然总体时间都差不多，那有什么必要设定7帧的过渡呢，像原先那样3帧不就够了吗？这就要涉及到一个动画精细度的问题了。作为一个表现运动的动画来说，帧数越多它所能表现的瞬间也就越多，帧与帧之间的差异就越微小，过渡的整体效果就越平滑。当然同时也会带来制作和存储上的一些不便。所以一般来说不宜设定较多的帧数，只需要满足观看需要就可以了。1.打开皮包图片2.利用裁减工具裁减大

8、小3.增加一个层，填充白色，复制背景层，将原背景层删除，再移动新图层14.将修改好的帧1复制5.分别移动帧1和帧2的位置为起始位与结束位，移动过程中用按shift移动，保持水平6.增加相应过渡帧 一般来说，如果一个物体始终都在图像中运动，则无需对其进行交代。但如果物体原本不在画面中，是后来进入画面的，或原本在画面中后来移出了画面，则需要对物体的出现和消失做一个交代，这个交代就是过渡，让观看者有一个比较自然的心理转变。常见的手法就是让物体逐渐显现(也称淡入)或逐渐消失(也称淡出)。如下图所示，演示了在同样的一个文字移动中，是否采取淡入和淡出处理的效果对比。4.通过图像间的场景转换制作动画1.打开

9、两张图片，合成一张图片通过“移动”工具把皮包图像拖向太阳镜以复制该文件。移动时按住shift进行拖动就能把图像放到画布的正中央2.复制帧，调整图层可见性3.利用过渡帧来生成不透明渐变效果5.不同图像大小的场景转换效果1.创建太阳镜层2.复制3个太阳镜图城分别改大小同理得到6.使用图层蒙板制作动画1.将太阳镜移入文本文件，更改层顺序2.自由变换 太阳镜图片的大小3.通过魔术棒选中两个O的，注意：点击文字图层后选择4.选中太阳镜图层，单击添加蒙板5.复制1号帧后选择2号帧，单击2号帧中蒙板层中的链接符号，作用取消两者之间的链接状态，可单独移动6.使用移动工具把太阳镜移出字母“o”的区域，然后进行过

10、渡帧渐变注意：反向帧的作用7.使用图层剪切动画移动图层位置后，按住alt在毛衣图层和文本的交界线点击在复制帧1后，选中贸易面板，然后移动方向盘各3次8.制作网页横幅广告1.先在背景层上输入文本“GOODTIME”，再在上面输入文本一个句号2.前7帧为句点的不透明渐变；浮现出“GOODTIME”。3.后面部分为“GOODTIME”变小，再为依次出现商品Photoshop中能够作为动画的项目有图层位置、图层蒙版、图层不透明度、图层样式。在基础教程的阶段我们学习了色彩调整图层和填充图层。这类图层具有特殊性，前者不直接产生图像，而是针对下方图层做出色彩调整效果。后者虽然产生图像，但属于“虚拟像素”，可

11、在后期更改填充的内容。现在我们将它们为动画服务，看看能有怎样的效果。点击此处阅读有关色彩调整图层的内容。点击此处阅读有关填充图层的内容。色彩调整图层是比较好用的，利用它可以制作出色彩变化的效果。这些效果可以是从明暗变化、灰度变化、反相等。实现的方法也很简单，就是先建立色彩调整层并做好相关的设置，然后将调整层的不透明度制作为动画即可。如下各动画范例，分别是曲线变暗、曲线变亮、渐变映射、反相。若要将图像变为灰度，可利用渐变映射的灰度渐变，或通过色相饱和度实现。需要注意的是，这种色彩变化的动画由于前后帧之间的像素大都不相同，因此其占用的字节数会很大。此时应尽可能减少帧数、帧速率或缩小动画的尺寸来平衡。此外，也可以通过建立调整图层的蒙版来实现只针对某个区域的色彩调整效果，这里就不再示范了。