《电子商务网页设计与制作》项目五美化网店的动态效果.ppt

项目任务实施—任务二 跳动的促销活动区 8.优化 点击“动画”面板右上角的菜单选项，选择“优化动画”，将两项均勾选。 9.导出动画 将动画文件导出成可运动的动态GIF图片格式，保存类型为“仅限图像”。 项目任务分析—任务二 跳动的促销活动区 1.Photoshop CS3导入完整的GIF动画 通过“文件/打开”命令，打开GIF格式的动画文件，则只能显示GIF动画的第一帧。 在Photoshop CS3中导入完整的GIF动画需要通过“文件/导入/视频帧到图层”命令。这个命令需要系统中安装有QuickTime7.1及以上版本才能使用。单击该命令，在弹出的浏览窗口的在“文件名”处键入“*.*”，再点击“载入”，这样可以看见除QuickTime影片外的文件列表，再选择要打开的GIF动画文件，再次点击“载入”。接着操作和任务实施步骤中的第3步中的类似。 2.过渡帧动画 “过渡动画帧”可以减少了创建动画效果（如渐现、渐隐或在物体移动帧等）所需的时间。同时如果手工制作逐帧动画也难以保证每帧的分配均匀和定位准确。创建过渡帧之后，还可以分别对它们进行编辑。 “过渡动画帧”只要设定好该动画的起始帧属性和结束帧属性，然后就可以在这两帧中产生对位置、不透明度或效果平均的过渡。如果是移动，则就是在起始帧中设定好起点的位置和在结束帧中设定好终点的位置。“过渡动画帧”设定如图5-24所示。 项目任务分析—任务二 跳动的促销活动区 其中指定要在添加的帧中改变的图层： 所有图层，改变所选帧中的全部图层。 选中的图层，只改变所选帧中当前选中的图层。 指定要改变的属性： 位置，在起始帧和结束帧之间均匀地改变图层内容在新帧中的位置，即移动。 不透明度，在起始帧和结束帧之间均匀地改变新帧的不透明度。 效果，均匀改变起始帧和结束帧之间的图层样式。 自学与拓展—任务二 跳动的促销活动区 1.导出图像序列 可用于讲已有GIF动画各帧按帧速率导出成一张张的静态图片。通过“文件/导出/渲染视频”命令，如图5-25所示。 自学与拓展—任务二 跳动的促销活动区 2.过渡帧动画的局限性 过渡帧动画虽然大大方便了创建动画效果，但是和逐帧动画制作一样，都是事先创建整个动画所需要的所有图层，再在各个关键帧进行改变或者过渡。如果要往一段动画中加入新的图层内容，就非常复杂，原因是在帧模式下Photoshop不支持建立两套以上帧系统。 3.制作运动模糊动画 动模糊主要运用于表现物体的移动，通过运动模糊中的拖影来减少画面的跳跃感和增加动画的动感。 在文件中创建一个虎年QQ表情，将该图层复制，将其中一个图层，运用滤镜实现“动感模糊”，如图5-26所示。 自学与拓展—任务二 跳动的促销活动区 再选中以“复制所选帧”作为结束的结束帧，移动两个虎年QQ表情的图层到结束图层。然后进行“过渡”，并在各过渡帧中，将没有“动感模糊”的虎年QQ表情图层设置为不可见，再在结束帧中将“动感模糊”的虎年QQ表情图层设置为不可见。最后设置各帧延迟速度和循环次数，循环次数一般为一次。完成设置如图5-27所示，最后导出动画。 项目任务引导—任务三 动起来的网店Banner 本任务目标将通过对图像素材和文字处理来制作完成网店Banner店标，并且通过时间轴的设置使网店Banner店标动起来，效果如图5-28所示。 项目任务实施—任务三 动起来的网店Banner 1.创建一个新文件 本任务中文件大小以淘宝旺铺Banner条为例，950*150像素。打开Photoshop，按要求新建文件，分辨率72，背景为白色。 2.创建文件背景图层 打开素材文件中的“PSD_012.psd”，由于和目标文件宽度不同，通过复制参考线，采用分段选取，如图5-29所示。 项目任务实施—任务三 动起来的网店Banner 然后通过“编辑/合并拷贝”命令，将选区内容复制粘贴到目标位，然后将通过“自由变换”恰当拉升调节，最后将粘贴过来的几个图层进行合并，完成如图5-30所示的Banner店标背景。并可通过图像修复工具进行细节修复。 项目任务实施—任务三 动起来的网店Banner 3.添加文字效果 选中创建的背景图层“图层3”，然后通过文字工具输入“康翠农特产专营店”。字体为“经典综艺体简”，大小为“58点”，颜色为“#32CE10”。选中该文字图层，进行复制文字图层，讲副本放置于原文字图层之下。然后分别对原文字图层添加图层样式，如图5-31所示。 项目任务实施—任务三 动起来的网店Banner 选中“康翠农特产专营店副本”，通过“图层/栅格化/文字”命令，转化为普通图层。然后再执行“编辑/变换/垂直翻转”命令。然后通过“移动工具”进行移动到合适位置，并用辅助参考线划出范围。再通过“编辑/变换/斜切”命令进行缩放