《电子商务网页制作-项目四.pptx》由会员分享，可在线阅读，更多相关《电子商务网页制作-项目四.pptx（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目四项目四 创建电子商务网店创建电子商务网店中的动态图像中的动态图像项目综述通过前面的项目,完成了网店基本素材采集,也完成了网店整体结构中商品图片、网店店标、分类列表区、活动促销区的制作。在实际网页浏览中,以及网站推广营销过程中,动态的图像往往更能吸引访问者的注意。本项目将通过推广动画、海报动画等来学习网店结构中动态图像的不同创建方式。项目目标能力目标：学习完本项目后,学生应当能够依据项目要求来设计并制作运用于网店不同位置的GIF动态图片。知识目标：(1)Photoshop中动画的概念。(2)Photoshop动画面板的设置。(3)Photoshop动画的导入和导出。(4)Photoshop
2、动画的优化和存储。(5)Photoshop逐帧动画的制作。(6)Photoshop过渡动画的制作。Part01任务一创建网店推广动态图像任务引导 本任务的目标是制作用于在电子商务平台、各论坛上宣传推广自己网店的简易动态图像。这类图片动画的主要内容为简单的网店活动信息、企业介绍、商品展示等,通过图片切换的动画效果来获得客户关注。本任务以制作727像素416像素的动态图像为例,效果如图所示。任务实施1.创建动画图像文件2.创建帧3.设置帧状态4.导出动画知识分析1.动画 动画,多幅静止图像连续播放,利用视觉暂留形成连续影像。例如胶片电影,就是将一系列记录着单幅画面的胶卷,按照一定的速度依次投影到屏
3、幕上。为了让观众感受到连续影像,动画可以以每秒24张画面的速度播放,也就是一秒钟内在屏幕上投射24张静止画面,即24帧。帧(frame),可以看作是动画中最小单位的单幅图像。动画播放速度的单位是fps,其中的f就是帧,p就是每(per),s就是秒(second)。除了普通电影每秒24帧外,电视所用的PAL制式为每秒25帧，NTSC制式为每秒30帧。在计算机显示器上播放,则每秒15帧以上就可以达到连续的影像效果。知识分析2.时间轴创建帧动画面板 通过“窗口”菜单调出的“时间轴”面以创建帧动画模式打开,可显示动画中的每个帧的缩览图。通过面板底部的帧工具依次可设置“转换为视频时间轴”、“选择循环选项
4、”、“选择第一帧”、“选择上一帧”、“播放动画”、“选择下一帧”、“过渡动画帧”、“复制所选帧”和“删除所选帧”。知识分析2.时间轴创建帧动画面板 转换为视频时间轴转换为视频时间轴:将当前动画面板模式由帧动画模式转换为时间轴动画模式。时间轴动画模式可显示文档图层的帧持续时间和动画属性。选择选择循循环选项环选项:设置动画导出时的播放次数。选择帧选择帧延延迟时间迟时间:设置每帧在播放过程中的持续时间。过过渡渡动动画画帧帧:能在两个现有帧之间添加一系列帧,使两个原始帧之间图层属性的位置、不透明度、效果均匀变化。复制所复制所选帧选帧:可复制“时间轴”面板中选定的帧,添加在被复制帧之后。知识分析 3.优
5、化动画帧 完成动画后,若要运用于网页,则最好进行“优化动画”以便快速下载到Web浏览器。可以点击选取“时间轴”面板菜单中的“优化动画”选项,一般按其默认勾选。或在导出动画所用到的“存储为Web和设备所用格式”对话框的优化区进行优化处理,并可在Web浏览器中预览优化的图像,在预览优化效果的同时还会列出图像的文件类型、像素尺寸、文件大小、压缩规格和其他HTML信息。知识分析 4.调用“时间轴”面板对应的图层属性 指的是当“时间轴”面板打开后，对应的“图层”面板的属性栏会增加相关的设置，统一图层属性和传播帧1，如图所示。知识分析 4.调用“时间轴”面板对应的图层属性 （1）统一图层属性。在“动画”面
6、板的帧动画模式中,更改一个帧的图层属性。然后在“图层”调板中,点击“统一图层位置”、“统一图层可见性”或“统一图层样式”,可以将更改的属性应用于现用图层中的其他帧。当选择其中某一项时,将在同一图层的所有帧中更改该属性;当取消选择该按钮时,更改将仅应用于当前帧 （2）传播帧1。当该选项勾选时,意味着将第1帧的属性改变传播给所有帧。它可以很方便地改变整个动画中某些物体的设定。即使原先每个帧都设定了不同的图层位置,“传播帧1”也仍然有效。效果等同于所有帧中的坐标按照第一帧进行偏移。拓展练习 1.以图像序列打开 不同图像之间的变换,除了采用手动逐帧制作动画,利用各帧图层的可见性外,如果不需要对这些图像
7、进行编辑修改,还可以采用“图像序列”这种方式来合成动画,这也是一种比较便捷快速的合成动画的方式。2.文字图层的变化 在网店推广动画中将重点文字逐渐放大以及修改对应背景颜色来吸引客户注意是常见的操作。这些操作的实质也是修改图层的可见性。习题1.使用逐帧动画制作一个依次上下跳动的“新品上市”文字动画。2.制作一段文字变换的动画。Part02任务二创建促销区域动画任务引导 本任务的目标是使电子商务网店中占显目位置的推广促销区域产生动画。在逐帧动画的基础上,通过设定过渡帧动画,来进一步了解动画的创建,完成效果如图所示。任务实施1.打开促销海报区域文件2.时间轴设置3.制作动画图标4.设置过渡帧动画5.
8、导出保存知识分析 1.Photoshop导入完整的GIF动画 通过点击“文件”菜单“打开”GIF动画,则只能显示GIF动画的第一帧。在Photoshop中导入完整的GIF动画需要通过“文件”菜单的“导入”列表中的“视频帧到图层”命令。这个命令需要系统中安装有QuickTime7.1及以上版本才能使用。点击该命令,在弹出的浏览窗口的“文件名”处键入“*.*”,再点击“载入”,这样可以看见除QuickTime影片外的文件列表,再选择要打开的GIF动画文件,点击“载入”。2.过渡动画帧 “过渡动画帧”可以减少创建动画效果(如渐现、渐隐或在物体移动帧等)所需的时间。同时如果手工制作逐帧动画也难以保证每
9、帧的分配均匀和定位准确。创建过渡帧之后,还可以分别对它们进行编辑。知识分析2.过渡动画帧 只要设定好该动画的起始帧属性和结束帧属性,就可以在这两帧中产生对位置、不透明度或效果平均的过渡。如果是移动,则就是在起始帧中设定好起点的位置和在结束帧中设定好终点的位置。“过渡动画帧”的设定如图所示。知识分析2.过渡动画帧（1）指定在要添加的帧中改变的图层:所有图层,改变所选帧中的全部图层 选中的图层,只改变所选帧中当前选中的图层（2）指定要改变的属性:位置,在起始帧和结束帧之间均匀地改变图层内容在新帧中的位置,即移动。不透明度,在起始帧和结束帧之间均匀地改变新帧的不透明度。效果,均匀改变起始帧和结束帧之
10、间的图层样式。知识分析3.优化动画帧 完成动画后,一般应优化动画以便适应Web浏览器。可以在导出动画时进行优化,可以将一种特殊仿色技术应用于动画,确保仿色图案在所有帧中都保持一致,并防止在播放过程中出现闪烁。也可以在“动画”面板菜单栏选取“优化动画”命令。该命令中的两个选项,一般均默认勾选:(1)外框:将每一帧裁剪到相对于上一帧发生了变化的区域。使用该选项创建的动画文件比较小,但是可能与不支持该选项的GIF编辑器不兼容。(2)去除多余像素:使帧中与前一帧保持相同的所有像素变为透明的。拓展练习1.导出图像序列 可将已有GIF动画的各帧按帧速率导出成一张张的静态图片。点选“文件”菜单“导出”列表“
11、渲染视频”完成操作,如图所示。可通过“渲染视频”对话框选择当前GIF动画导出的文件夹、文件名序列、文档大小。导出的静态JPG图像数量由该动画的帧数以及选择的帧速率决定。拓展练习2.过渡帧动画的局限性 过渡帧动画虽然大大方便了创建动画效果,但是和逐帧动画制作一样,都是事先创建整个动画所需要的所有图层,再在各个关键帧进行改变或者过渡。如果要往一段动画中加入新的图层内容,就非常复杂,原因是在帧模式下Photoshop不支持建立两套以上帧系统。3.制作运动模糊动画 运动模糊主要运用于表现物体的移动,通过运动模糊中的拖影来减少画面的跳跃感和增加动画的动感。拓展练习4.时间轴动画时间轴动画现在是Photo
12、shop中动画的主要编辑器,和前面的逐帧动画和过渡动画不一样,只要在动画运行时间中设定各图层的关键帧,在关键帧位置上改变图层的属性,就能自动生成动画,大大方便了动画制作。时间轴面板和图层面板比较类似,也是按图层名称划分，用视频时间轴面板来展现之前的动画制作文件。各图层与图层面板一致。图层属性,即动画项目,可通过点击图层左方的箭头展开。不同性质的图层,其动画项目也不相同,常见的为普通图层、带蒙版的普通图层、文字图层等。除了公有的位置、不透明度、样式等图层属性外,文字图层多了一个“文字变形”动画项目,而带蒙版的多了与蒙版有关的动画项目。拓展练习4.时间轴动画在时间轴动画中,可以通过移动图层蒙版的位
13、置来创建动画。移动图层蒙版需要通过取消与图层间的链接来实施,再通过点选工具箱的“移动工具”来移动蒙版,也可以通过键盘方向键移动。查看并对蒙版编辑可按住“Alt”键点击蒙版图标。拓展练习5.创建视频时间轴动画（1）创建一个动画静态文档（2）打开时间轴面板指定时间（3）在图层中添加动画内容（4）添加图层蒙版（可选操作）（5）移动时间指示器（6）对图层属性的关键帧处理（7）移动当前时间指示器并更改图层属性（8）添加额外图层（9）移动或裁切图层持续时间栏以指定图层在动画中出现的时间。（10）播放动画检查（11）存储导出习题1.依据本任务所学,使网店店标图像变成动画图像。2.通过过渡帧动画制作论坛推广签名档,使商品从左向右移动。谢谢观看&欢迎指导！