项目网店结构动中态图像的设计与制作.docVIP

项目 网店结构中动态图像的设计与制作 当通过前面的项目，完成了整个网店中基本图像素材采集和制作，也完成了网店结构中主要部分分类区、图标、描述页面的制作。在网页浏览中，以及网站推广营销过程中，动态的图像往往更能吸引访问者的注意。本项目将通过推广图片和网店结构中的banner、促销活动页面，来完成网店中动态图像的设计与制作。 1 学习目标 学习完本项目后，学生应当能够依据项目要求来设计并制作运用于网店不同位置的GIF动态图片。 2 知识目标 1）Photoshop 中动画概念 2）Photoshop 动画面板的设置 3）Photoshop 动画的导入和导出 4）Photoshop 动画优化和存储 5）Photoshop 逐帧动画的制作 6）Photoshop 过渡动画的制作 7）Photoshop 时间轴动画的制作 8）Photoshop 蒙版动画的制作 任务一 黄金展位：网店推广动态图像的设计与制作 1 任务简介 本任务目标是制作用于在电子商务平台上宣传推广自己网店的简易动态图像。这类图片竞争出现在一些电子商务平台、各大网站的右边栏，主要内容为活动信息或者企业介绍，以醒目的形式获得关注。160×200像素的图多幅静止连续播放，利用视觉暂留形成连续影像。如电影，就是单幅画面的胶卷，按照一定的速度依次投影到屏幕上。为了让观众感受到连续影像，电影每秒24张画面的速度播放，也就是一秒钟内在屏幕上投射24张静止画面。Frame)，可以看作动画中最小单位的单幅有关动画播放速度的单位是，其中的就是Frame)，就是每 (Per)，就是秒 (Second)。的PAL制式为25帧，NTSC制式为帧。在显示器上播放，则15帧就可以达到的效果。，能在两个现有帧之间添加一系列帧，并让这些帧起到使两个原始帧之间图层属性的位置、不透明度、效果均匀变化。 复制选定的帧 ，可复制“动画”面板中选定的帧，添加在被复制帧之后。 转换为时间轴动画，将当前动画面板模式由帧动画模式转换为时间轴动画模式。时间轴模式可显示文档图层的帧持续时间和动画属性。 优化动画帧 完成动画后，若要运用于网页，则最好进行“优化动画”以便快速下载到 Web 浏览器。可以点击“动画”面板菜单中选取“优化动画”选项，一般按其默认勾选。或在导出动画所用到的“存储为 Web 和设备所用格式”对话框中优化qu区进行优化处理，并可在 Web 浏览器中预览优化的图像，在预览优化效果的同时还会列出了图像的文件类型、像素尺寸、文件大小、压缩规格和其它 HTML 信息。 调用“动画”面板时中图层的属性 统一图层属性 在“动画”面板的帧动画模式中，更改一个帧的图层属性。然后在“图层”调板中，单击“统一图层位置”、“统一图层可见性” 或“统一图层样式” 可以将更改的属性应用于现用图层中所有的其它帧。 传播帧1 当该选项勾选时，意味着将第1帧的改变传播给所有帧。它可以很方便地改变整个动画中某些物体的设定。即使原先每个帧都设定了不同的图层位置，“传播帧1”也仍然有效。效果等同于所有帧中的坐标按照第一帧进行偏移。DA-05.JPG”和“新年背景.JPG”,粘贴于创建的图像文件，如图5-X所示。 2.添加文字图层 运用文字工具对图像添加相应的文字，主要运用字体为“隶书”、“书体坊米蒂体”和“Impact”，文字内容如图5-X所示。并且对应各文字图层进行“样式”设置。 图5-X 添加文字图层 3.导入GIF动画文件 点击“文件”菜单中的“导入”，在列表中选择“视频帧到图层”，在弹出的“载入”对话框中找到GIF动画所在路径。然后在“文件名”文本框内输入“*.*” ,再点击“载入”按钮，如图5-X所示。 图5-X视频帧到图层 这时该文件夹所有文件会出现，选择“虎年QQ表情1.GIF”，再点选“载入”出现如图5-X所示的，GIF动画导入范围选择。设定后，点击“确定”后完成导入。 图5-X 导入范围的选择 选择第一帧中所对应的显示图层，通过“魔棒工具”设置图像的白色背景区域，然后点选“清除”。由于一系列动画白色背景区域一直，利用选区的跨图层性，将各帧中可见图层的白色背景“清除”。 图5-X 删除白色背景使其透明 然后将各帧对应的可见图层中的内容“复制”“粘贴”到促销活动区的图像文件上，如图5-X所示。 图5-X 将GIF粘贴至促销活动区 4.设置逐帧动画的层 创建“全国免邮”文字图层副本，将副本中的“免”字改为白色，让动画中“免”字能黄白两色闪烁。创建“新春特惠”文字图层副本，”将副本往左下方略作移动。 打开“动画面板”，点选“复制所选帧”，两帧分别作为起始帧和结束帧。在起始帧中，关闭白色“免”字文字图层和“新春特惠”文字图层副本的可见性，只保留第一