项目五美化网店的动态效果

《项目五美化网店的动态效果》由会员分享，可在线阅读，更多相关《项目五美化网店的动态效果（57页珍藏版）》请在金锄头文库上搜索。

1、项目项目项目项目五五五五 美化网店的动美化网店的动美化网店的动美化网店的动态效果态效果态效果态效果主要内容主要内容项目引导项目引导项目任务书项目任务书项目任务实施项目任务实施123 3项目任务分析项目任务分析4自学与拓展自学与拓展3 5项目引导项目引导通过前面的项目，完成了整个网店中基本图像素材采集和制作，也完成了网店结构中主要部分分类区、图标、描述页面的制作。在网页浏览中，以及网站推广营销过程中，动态的图像往往更能吸引访问者的注意。本项目将通过推广图片和网店结构中的Banner、促销活动页面，来完成网店中动态图像的设计与制作。项目任务书项目任务书能力目标能力目标学学习习完完本本项项目目后后，

2、学学生生应应当当能能够够依依据据项项目目要要求求来来设设计计并并制制作作运运用用于于网网店店不不同同位置的位置的GIF动态图片。动态图片。知识目标知识目标 （1）Photoshop 中动画概念中动画概念（2）Photoshop 动画面板的设置动画面板的设置（3）Photoshop 动画的导入和导出动画的导入和导出（4）Photoshop 动画优化和存储动画优化和存储（5）Photoshop 逐帧动画的制作逐帧动画的制作（6）Photoshop 过渡动画的制作过渡动画的制作（7）Photoshop 时间轴动画的制作时间轴动画的制作（8）Photoshop 蒙版动画的制作蒙版动画的制作项目任务引导

3、项目任务引导任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像本任务目标是制作用于在电子商务平台上宣传推广自己网店的简易动态图像。这类图片经常出现在一些电子商务平台、各大网站的右边栏，主要内容为活动信息或者企业介绍，以醒目的形式来获得客户关注。本任务中以制作160200像素的动态图像为例，效果如图5-1所示。项目任务实施项目任务实施任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像（1）制作第一幅展示图像 本任务中文件大小以160*200像素为例，制作完成第一幅展示的背景，素材使用“山核桃树.jpg”并调整图片大小、亮度。

4、再抽取素材“山核桃”中的核桃，粘贴至新建的第一幅展示图像上，如图5-2所示。项目任务实施项目任务实施任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像添加一个新图册后点选工具栏“自定形状工具”，选择“填充像素”，在“自定形状拾色器”中选择“全部”后，点选“10角星”。在新图层中绘制。在输入文字“10.8元”，分别运用“自由变换”，调整至合适位置，如图5-3所示。项目任务实施项目任务实施任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像最后再分别输入文字“绿色健康”“杭州康翠”并描边，然后将除背景外各图层选中，点选“图层”菜

5、单的“合并图层”，完成第一幅展示图像制作，如图5-4所示。项目任务实施项目任务实施任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像（2）制作第二幅公司介绍图像在第一幅图像所在图层上再新增一个图层，粘贴并调整素材“向日葵.jpg”作为背景。并对应输入文字，加上描边，如图5-5所示。将各文字图层和“向日葵”所在的“图层1”合并。项目任务实施项目任务实施任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像（3）创建帧通过“窗口/动画”命令调出面板，在面板右下角点选“复制所选帧”。在第2帧对应的“图层”面板中，关闭以“向日葵”为背

6、景的该层可见性，如图5-6所示。项目任务实施项目任务实施任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像（4）设置帧状态在“动画”面板中，通过分别点选各帧，改变该帧的延迟时间，如图5-7所示。在选择帧延迟时间下方，可选择循环次数，将其设为“永远”。项目任务实施项目任务实施任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像（5）导出动画要将动画导出成可运动的动态GIF图片格式，需要通过“文件”菜单的“存储为Web和设备所用格式”导出，如图5-8所示。项目任务分析项目任务分析任务一任务一 设计与制作黄金展位：网店推广动态图像

7、设计与制作黄金展位：网店推广动态图像1.动画动画，是将多幅静止图像连续播放，利用视觉暂留形成的连续影像。例如胶片电影，就是将一系列记录着单幅画面的胶卷，按照一定的速度依次投影到屏幕上。电影一般是以每秒24张画面的速度播放，也就是一秒钟内在屏幕上投射上24张静止画面，即24帧。帧(Frame)，可以看作动画中最小单位的单幅图像。有关动画播放速度的单位是FPS，其中的F就是帧(Frame)，P就是每 (Per)，S就是秒 (Second)。除了电影每秒24帧外，电视所用的PAL制式为每秒25帧，NTSC制式为每秒30帧。在计算机显示器上播放，则每秒15帧以上就可以达到连续的影像效果。项目任务分析项

8、目任务分析任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像2.动画面板通过“窗口/动画”命令调出面板，默认是以帧模式打开的，可显示动画中的每个帧的缩览图。通过面板底部的帧工具可设置“选择循环选项”、“选择第一帧”“选择上一帧”、“播放动画”、“选择下一帧”、“过渡动画帧”、“复制所选帧”、“删除所选帧”以及“转换为时间轴动画”。选择循环选项，设置动画导出时的播放次数。 选择帧延迟时间，设置每帧在播放过程中的持续时间。 过渡动画帧 ，能在两个现有帧之间添加一系列帧，并让这些帧起到使两个原始帧之间图层属性的位置、不透明度、效果均匀变化。 复制选定的帧 ，可复制

9、“动画”面板中选定的帧，添加在被复制帧之后。 转换为时间轴动画，将当前动画面板模式由帧动画模式转换为时间轴动画模式。时间轴模式可显示文档图层的帧持续时间和动画属性。项目任务分析项目任务分析任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像3.优化动画帧 完成动画后，若要运用于网页，则最好进行“优化动画”以便快速下载到 Web 浏览器。可以点击“动画”面板菜单中选取“优化动画”选项，一般按其默认勾选。或在导出动画所用到的“存储为 Web 和设备所用格式”对话框中优化区进行优化处理，并可在 Web 浏览器中预览优化的图像，在预览优化效果的同时还会列出了图像的文件

10、类型、像素尺寸、文件大小、压缩规格和其它 HTML 信息。4.调用“动画”面板时中图层的属性（1）统一图层属性在“动画”面板的帧动画模式中，更改一个帧的图层属性。然后在“图层”调板中，单击“统一图层位置”、“统一图层可见性” 或“统一图层样式” 可以将更改的属性应用于现用图层中所有的其它帧。（2）传播帧1当该选项勾选时，意味着将第1帧的属性改变传播给所有帧。它可以很方便地改变整个动画中某些物体的设定。即使原先每个帧都设定了不同的图层位置，“传播帧1”也仍然有效。效果等同于所有帧中的坐标按照第一帧进行偏移。自学与拓展自学与拓展任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：

11、网店推广动态图像1.以图像序列打开不同图像之间的变换，除了采用手动逐帧动画制作，利用各帧图层可见性外。如果不需要对这些图像进行修改编辑，还可以采用以“图像序列”打开这种方式，来合成动画。建立一个文件夹，将所需图像放入，并按序列编号重新命名。然后通过Photoshop的“文件/打开”命令，找到该文件夹路径，点选图片并勾选“图像序列”，如图5-10所示。自学与拓展自学与拓展任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像在弹出“帧速率”对话框中，确定该动画速率，如图5-11所示。完成设置后，可在Photoshop工作区中看到生成的动画图像，可通过“播放动画”预

12、览。导出保存，同样使用“存储为Web和设备所用格式”导出。2.图层的放大缩小在促销海报动画中，经常讲重点商品逐渐放大，更常见的是将重点文字逐渐放大。这些操作的实质就是图层的放大缩小，也可由逐帧动画并修改图层可见性来完成。完成如图5-12所示的图像，作为原始图像。选中文字图层“一元秒杀”，然后进行复制2个图层。自学与拓展自学与拓展任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像然后分别选中2个复制的图层，通过“自由变换”调整，将2个复制的图层大小分别调整为“125%”和“150%”。然后选择“动画”面板上的“复制所选帧”复制2帧，如图5-13所示。自学与拓展

13、自学与拓展任务一任务一 设计与制作黄金展位：网店推广动态图像设计与制作黄金展位：网店推广动态图像后选中帧1，将“100%”的“一元秒杀”设置为可见，其余两个设置为不可见。再选中帧2，将“125%”的“一元秒杀”设置为可见，其余两个设置为不可见。最后选中帧3，将“150%”的“一元秒杀”设置为可见，其余两个设置为不可见。设置“帧延迟时间”和“选择循环选项”完成动画的制作。对于要放大缩小的图层，复制的越多，可将变化设置的越平缓。复制的少，则更体现跳动效果。项目任务引导项目任务引导任务二任务二 跳动的促销活动区跳动的促销活动区本任务目标将制作在电子商务网店中占显目位置的促销活动区的动画。网店的促销活

14、动区就像现实中商场经常刊登的促销广告一样，为了吸引客户，也是电子商务网店中的一个重要的展示窗口。本次任务促销活动区动画图像的大小以常见的470*150为例，在逐帧动画的基础上，加上设定过渡帧动画，效果如图5-14所示。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区1.创建促销活动区图像文件按470*150像素，分辨率72，背景为白色创建图像文件。打开素材文件夹，部分选取图像“DA-05.jpg”和“新年背景.jpg”,粘贴于创建的图像文件，如图5-15所示。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区2.添加文字图层运用文字工具对图像添加相应的

15、文字，主要运用字体为“隶书”、“书体坊米蒂体”和“Impact”，文字内容如图5-16所示。并且对应各文字图层进行“样式”设置。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区3.导入GIF动画文件通过“文件/导入”命令，在列表中选择“视频帧到图层”，在弹出的“载入”对话框中找到GIF动画所在路径。然后在“文件名”文本框内输入“*.*” ,再点击“载入”按钮，如图5-17所示。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区这时该文件夹所有文件会出现，选择“虎年QQ表情1.gif”，再点选“载入”出现如图5-18所示的，GIF动画导入范围选择。设定后

16、，点击“确定”后完成导入。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区选择第一帧中所对应的显示图层，通过“魔棒工具”设置图像的白色背景区域，然后点选“清除”。由于一系列动画白色背景区域一致，利用选区的跨图层性，将各帧中可见图层的白色背景“清除”，如图5-19所示。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区然后将各帧对应的可见图层中的内容“复制”“粘贴”到促销活动区的图像文件上，如图5-20所示。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区4.设置逐帧动画的层创建“全国免邮”文字图层副本，将副本中的“免”字改为白色，

17、让动画中“免”字能黄白两色闪烁。创建“新春特惠”文字图层副本，”将副本往左下方略作移动。打开“动画面板”，点选“复制所选帧”，两帧分别作为起始帧和结束帧。在起始帧中，关闭白色“免”字文字图层和“新春特惠”文字图层副本的可见性，只保留第一个表情图层可见性，其余关闭。在结束帧中，关闭黄色“免”字文字图层和“新春特惠”文字图层的可见性，也只保留最后一个表情图层可见性。取消“传播帧1”。5.设置过渡帧动画选中起始帧中的“1”所对应的文字图层，将该图层的“不透明度”改为“0%”。再选中结束帧，点选“1”所对应的文字图层，将“图层样式”中的“投影”角度改为“90”，“不透明度”保持“100%”。然后点选“

18、动画”面板的“过渡动画帧”按钮，按图5-21所示设置。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区6.结合逐帧动画和过渡帧在新生成的2、3、4、5帧，分别依次设置“全国免邮”文字颜色的变换、“新春特惠”的文字移动和表情图像的变化，通过不同图层的可见性设置。在设置过程，若有的图层不透明度也发生了变化，将其改回不透明度“100%”。完成效果如图5-22所示。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区7.完成“浅出”的后半部分动画一般完全显示文字图层“1”需要更长时间显示。选中

19、第6帧，然后选择“复制所选帧”，连续复制4帧，若需要更长时间显示，则复制更多。分别选中复制各帧，文字“1”的对应图层的不透明度保持不变，然后按步骤6设置，使文字图层“1”保持不变的同时，其他动画发生变化。再选中最后一个完全显示文字图层“1”的帧，然后选择“复制所选帧”。将该复制帧的文字“1”的对应图层，将该层的不透明度改至“0%”，同时调整其投影位置到右下角。然后按照步骤5、6进行相应操作，完成“浅出”的后半部分动画，并设置各帧延时为“0.2秒”和循环为“永远”，如图5-23所示。项目任务实施项目任务实施任务二任务二 跳动的促销活动区跳动的促销活动区8.优化 点击“动画”面板右上角的菜单选项，

20、选择“优化动画”，将两项均勾选。9.导出动画 将动画文件导出成可运动的动态GIF图片格式，保存类型为“仅限图像”。项目任务分析项目任务分析任务二任务二 跳动的促销活动区跳动的促销活动区1.Photoshop CS3导入完整的GIF动画通过“文件/打开”命令，打开GIF格式的动画文件，则只能显示GIF动画的第一帧。在Photoshop CS3中导入完整的GIF动画需要通过“文件/导入/视频帧到图层”命令。这个命令需要系统中安装有QuickTime7.1及以上版本才能使用。单击该命令，在弹出的浏览窗口的在“文件名”处键入“*.*”，再点击“载入”，这样可以看见除QuickTime影片外的文件列表，

21、再选择要打开的GIF动画文件，再次点击“载入”。接着操作和任务实施步骤中的第3步中的类似。2.过渡帧动画“过渡动画帧”可以减少了创建动画效果（如渐现、渐隐或在物体移动帧等）所需的时间。同时如果手工制作逐帧动画也难以保证每帧的分配均匀和定位准确。创建过渡帧之后，还可以分别对它们进行编辑。“过渡动画帧”只要设定好该动画的起始帧属性和结束帧属性，然后就可以在这两帧中产生对位置、不透明度或效果平均的过渡。如果是移动，则就是在起始帧中设定好起点的位置和在结束帧中设定好终点的位置。“过渡动画帧”设定如图5-24所示。项目任务分析项目任务分析任务二任务二 跳动的促销活动区跳动的促销活动区其中指定要在添加的帧

22、中改变的图层： 所有图层，改变所选帧中的全部图层。 选中的图层，只改变所选帧中当前选中的图层。 指定要改变的属性： 位置，在起始帧和结束帧之间均匀地改变图层内容在新帧中的位置，即移动。 不透明度，在起始帧和结束帧之间均匀地改变新帧的不透明度。 效果，均匀改变起始帧和结束帧之间的图层样式。自学与拓展自学与拓展任务二任务二 跳动的促销活动区跳动的促销活动区1.导出图像序列可用于讲已有GIF动画各帧按帧速率导出成一张张的静态图片。通过“文件/导出/渲染视频”命令，如图5-25所示。自学与拓展自学与拓展任务二任务二 跳动的促销活动区跳动的促销活动区2.过渡帧动画的局限性过渡帧动画虽然大大方便了创建动画

23、效果，但是和逐帧动画制作一样，都是事先创建整个动画所需要的所有图层，再在各个关键帧进行改变或者过渡。如果要往一段动画中加入新的图层内容，就非常复杂，原因是在帧模式下Photoshop不支持建立两套以上帧系统。3.制作运动模糊动画动模糊主要运用于表现物体的移动，通过运动模糊中的拖影来减少画面的跳跃感和增加动画的动感。在文件中创建一个虎年QQ表情，将该图层复制，将其中一个图层，运用滤镜实现“动感模糊”，如图5-26所示。自学与拓展自学与拓展任务二任务二 跳动的促销活动区跳动的促销活动区再选中以“复制所选帧”作为结束的结束帧，移动两个虎年QQ表情的图层到结束图层。然后进行“过渡”，并在各过渡帧中，将

24、没有“动感模糊”的虎年QQ表情图层设置为不可见，再在结束帧中将“动感模糊”的虎年QQ表情图层设置为不可见。最后设置各帧延迟速度和循环次数，循环次数一般为一次。完成设置如图5-27所示，最后导出动画。项目任务引导项目任务引导任务三任务三 动起来的网店动起来的网店Banner本任务目标将通过对图像素材和文字处理来制作完成网店Banner店标，并且通过时间轴的设置使网店Banner店标动起来，效果如图5-28所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner1.创建一个新文件本任务中文件大小以淘宝旺铺Banner条为例，950*150像素。打开Photoshop，按要求

25、新建文件，分辨率72，背景为白色。2.创建文件背景图层打开素材文件中的“PSD_012.psd”，由于和目标文件宽度不同，通过复制参考线，采用分段选取，如图5-29所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner然后通过“编辑/合并拷贝”命令，将选区内容复制粘贴到目标位，然后将通过“自由变换”恰当拉升调节，最后将粘贴过来的几个图层进行合并，完成如图5-30所示的Banner店标背景。并可通过图像修复工具进行细节修复。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner3.添加文字效果选中创建的背景图层“图层3”，然后通过文字工具输入“康翠农

26、特产专营店”。字体为“经典综艺体简”，大小为“58点”，颜色为“#32CE10”。选中该文字图层，进行复制文字图层，讲副本放置于原文字图层之下。然后分别对原文字图层添加图层样式，如图5-31所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner选中“康翠农特产专营店副本”，通过“图层/栅格化/文字”命令，转化为普通图层。然后再执行“编辑/变换/垂直翻转”命令。然后通过“移动工具”进行移动到合适位置，并用辅助参考线划出范围。再通过“编辑/变换/斜切”命令进行缩放，如图5-32所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner然后按住“Ctr

27、l”点选该副本图层缩略图，选区选取文字边缘。再单击“图层”面板的“添加图层蒙版”，再按住“ALT”键点下蒙版，进入蒙版视图，如图5-33所示。选择“渐变工具”，在“渐变拾色器”中选择“黑色、白色”，然后上下拖动渐变工具在辅助线参考范围内，实施渐变，如图5-34所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner再点选回该图层缩略图，退出“图层蒙版”编辑模式，再降低该图层的“不透明度”，以达到合适的倒影文字效果，如图5-35所示。最后通过文字工具，在Banner上输入宣传口号“绿色健康 江南滋味”，并对文字“创建文字变形”中选择“波浪”工具完成添加文字效果。项目任务实

28、施项目任务实施任务三任务三 动起来的网店动起来的网店Banner4.添加修饰图层打开素材文件中的“公司logo.jpg”，通过选区工具选取从白色背景中选取图标并复制图层，在Banner条文件上粘贴该图层，通过自由变换调整，如图5-36所示。 5.设定时间轴打开“动画面板”，点击右下的“转换为时间轴动画”按钮，进入设定时间轴动画面板，如图5-37所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner5.设定时间轴打开“动画面板”，点击右下的“转换为时间轴动画”按钮，进入设定时间轴动画面板，如图5-37所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店B

29、anner在“图层”面板中添加新图层，使用“油漆桶工具”使该图层为全白，并移动该图层为文件图层组中最高。再通过“添加矢量蒙版”按钮，给该图层添加矢量蒙板。再通过单击取消蒙版到图层的链接，按住ALT键点击蒙版，进入图层蒙版编辑视图，显示使用黑色油漆桶填充，再使用“矩形工具”中在黑色填充区域中，拉出白色或者灰色的粗细不均细线条，如图5-38所示操作。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner点开设定时间轴动画面板中的该图层扩展按钮，显示出该图层可设定图层属性。将“当前时间指示器”移动至起始位置，然后分别点选“图层蒙版启用”和“图层蒙版位置”前面的“时间-变化秒表”图

30、标 ，设立起始关键帧，如图5-39所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner将“当前时间指示器”移动至结束位置，分别点选“图层蒙版启用”和“图层蒙版位置”前面的“时间-变化秒表”图标 ，设立结束关键帧。然后通过工具箱的“移动工具”，通过键盘方向键向右移动“图层蒙版”至目标位置，通过油漆桶工具对露出白色部分使用黑色填充，如图5-40所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner点选该图层蒙版所对应图层的缩略图，即回到编辑页面。点选文字图层，按前面步骤创建文字图层的时间轴动画，除了“位置”移动外，还设置“文字变形”的变化，如图

31、5-41所示。项目任务实施项目任务实施任务三任务三 动起来的网店动起来的网店Banner6.预览动画，调整动画速度可通过“动画”面板上的播发控件进行动画预览播放。若需要调整速度时间，可单击面板右上角的菜单，选择“文档设置”，可调出“文档时间轴设置”对话框，如图5-42所示，将默认“30帧”改为“自定”的“15帧”降慢动画速度。7.优化后导出动画按前面任务使用的“存储为Web和设备所用格式”导出成动态GIF图片。项目任务分析项目任务分析任务三任务三 动起来的网店动起来的网店Banner1.图层蒙版：图层蒙版可以理解为在当前图层上面覆盖一块玻璃。而这块玻璃是将不同灰色值转化为不同的透明度，并作用到

32、它所在的图层，使该图层相对应的位置的不透明度发生变化。黑色为完全透明，白色为完全不透明，即图层内所选的区域。还有灰色区域，根据灰色的深浅表示不通的不透明度。蒙版可以作为选区，是一种特殊的选区，不是为了对选区进行操作而是要保护选区不被操作。在时间轴动画中，可以通过移动图层蒙版的位置来创建动画。图层蒙版要移动需要通过取消与图层间的链接来实施，再通过点选工具箱的“移动工具”来移动蒙版，也可以通过键盘方向键移动。查看并对蒙版编辑可按住ALT键点击蒙版 图标。项目任务分析项目任务分析任务三任务三 动起来的网店动起来的网店Banner2.时间轴动画时间轴动画现在是Photoshop中动画的主要编辑器,和前

33、面的逐帧动画和过渡动画不一样,只要在动画运行时间中设定各图层的关键帧，在关键帧位置上改变图层的属性，就能自动生成动画，大大方便了动画制作。打开时间轴面板和图层面板比较类似，也是按图层名称划分，各图层于图层图层面板一致。各修改的各图层属性，即动画项目，可通过点击图层左方的箭头展开。在不同性质的图层，其动画项目也不相同，常见的为普通图层、带蒙版的普通图层、文字图层等。除了公有的位置、不透明度、样式等图层属性外，文字图层多了一个“文字变形”动画项目，而带蒙版的多了与蒙版有关的动画项目。在所有图层之外，有个“全局光源”时间轴轨道，全局光是可以在图像上呈现一致的光源照明外观。在这设置动画项目，主要是在其

34、关键帧上更改“全局光源”的光照角度和高度，可以通过“图层/图层样式/全局光”命令设置，能对图层如投影、内阴影以及斜面和浮雕等效果产生影响。 在时间轴面板各图层列表上方有一组数字，如“0:00:00:00”格式，这是当前的时间轴时间设定，从右端起分别是毫秒、秒、分钟、小时。一般也就用到秒这级。时间轴时间设定后面括号中的“30.00 fps”，表示帧速率，即每秒多少帧。一般取值为整数。按照默认的设置，时间轴总长是10秒，每秒30帧，这样总帧数就是300帧，对于一般网页动画来说是一个较大的数值了。自学与拓展自学与拓展任务三任务三 动起来的网店动起来的网店Banner1.切换洋葱皮洋葱皮模式是显示当前

35、帧上绘制的内容以及同时显示在当前帧前后的帧上绘制的内容。这些前后帧的附加内容将以指定的不透明度显示，以便与当前帧上的绘制内容分开。洋葱皮模式对于绘制逐帧动画很有用，主要是位置变化的动画。通过洋葱皮模式可以看到前后帧，主要是动画内容的变化轨迹，根据这些轨迹可以提供当前帧动画，特别是位置的设置。洋葱皮启用，可指定在时间轴动画播放过程中启用“动画”面板中的“切换洋葱皮”后显示。 洋葱皮设置，单击“动画”面板右上角菜单并选择“洋葱皮设置”，如图5-43所示 自学与拓展自学与拓展任务三任务三 动起来的网店动起来的网店Banner洋葱皮计数，指定前后显示的帧的数目。在文本框中分别输入“之前帧数”和“之后帧

36、数”的值。 帧间距，指定显示的帧之间的帧数。例如，值为 1 将显示连续的帧，值为 2 将显示相距两个帧的内容。 最大不透明度，设置于当前时间距离最近的洋葱皮的不透明度。最小不透明度，设置于当前时间距离最远的洋葱皮的不透明度。混合模式，设置显示的各帧重叠部分的混合模式。 2.网店店标的构成 店标是客户对整个网店的首要印象，特别是利用店标做为推广时的图片。店标是整体形象重要组成部分，起到吸引客户访问的作用，能够让客户记住网店。通过合适文字和修饰图片的组合，起到烘托主题的效果。分析以下店标来了解店标中的文字和修饰图片是如何构成的。文字在中间，修饰图片在两侧，如图5-44所示。自学与拓展自学与拓展任务

37、三任务三 动起来的网店动起来的网店Banner该店标文字由三部分组成：店名，少女蝶；主营业务，女装；资质，皇冠（淘宝网上评定卖家级别的一种等级，属较高等级）。这几部分文字通过不同字体、大小、颜色的组合来美化。该店标的修饰图片也和主题有关，左侧图片对店名起了修饰作用，右侧图片对主营业务起到修饰作用。文字在左侧，修饰图片在右侧，如图5-45所示。该店标文字由四部分组成：店名，一兴一；主营业务，吊扇灯；资质，装饰吊扇灯专家；宣传语，尊贵典雅 装饰首选。同样通过不同字体、大小、颜色的组合来美化。该店标的修饰图片是商品图片，由于吊扇灯可能客户没有具体概念，直接用商品图片来修饰，可以给客户一个直观的感受。文字在右侧，修饰图片在左侧，如图5-46所示。自学与拓展自学与拓展任务三任务三 动起来的网店动起来的网店Banner该店标文字由四部分组成：店名，绿森数码；主营业务，数码类；资质，全国最大的数码类购物网站；特色，全国货到付款。同样通过不同字体、大小、颜色的组合来美化。该店标的修饰图片则是直接来修饰主营业务。综合而言，店标的文字基本可由店名(Logo)、主营业务、资质、广告宣传语、特色这几种类型构成。图片则主要为修饰文字部分的图片和商品图片来构成。