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

《项目网店结构中动态图像的设计与制作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目网店结构中动态图像的设计与制作当通过前面的项目，完成了整个网店中基本图像素材采集和制作，也完成了网店结构中主要部分分类区、图标、描述页面的制作。在网页浏览中，以及网站推广营销过程中，动态的图像往往更能吸引访问者的注意。本项目将通过推广图片和网店结构中的banner、促销活动页面，来完成网店中动态图像的设计与制作。1学习目标学习完本项目后，学生应当能够依据项目要求来设计并制作运用于网店不同位置的GIF动态图片。2知识目标1）Photoshop中动画概念2）Photoshop动画面板的设置3）Photoshop动画的导入和

2、导出4）Photoshop动画优化和存储5）Photoshop逐帧动画的制作6）Photoshop过渡动画的制作7）Photoshop时间轴动画的制作8）Photoshop蒙版动画的制作任务一黄金展位：网店推广动态图像的设计与制作1任务简介本任务目标是制作用于在电子商务平台上宣传推广自己网店的简易动态图像。这类图片竞争出现在一些电子商务平台、各大网站的右边栏，主要内容为活动信息或者企业介绍，以醒目的形式获得客户关注。本任务中以制作160×200像素的动态图像为例，效果如图5-X所示。图5-X网店推广动态图像制作效果2任务引

3、导3任务实施1.制作第一幅展示图像本任务中文件大小以160*200像素为例，制作完成第一幅展示的背景，素材使用“山核桃树.JPG”并调整图片大小、亮度。再抽取素材“山核桃”中的核桃，粘贴至新建的第一幅展示图像上，如图5-X所示。图4-X完成第一幅图像的图片素材添加一个新图册后点选工具栏“自定形状工具”，选择“填充像素”，在“自定形状拾色器”中选择“全部”后，点选“10角星”。在新图层中绘制。在输入文字“10.8元”，分别运用“自由变换”，调整至合适位置，如图5-X所示。图5-X添加自定形状和文字最后再分别输入文字“绿色健康

4、”“杭州康翠”并描边，然后将除背景外各图层选中，点选“图层”菜单的“合并图层”，完成第一幅展示图像制作，如图5-X所示。图5-X完成第一幅展示图像2.制作第二幅公司介绍图像在第一幅图像所在图层上再新增一个图层，粘贴并调整素材“向日葵.JPG”作为背景。并对应输入文字，加上描边，如图5-X所示。将各文字图层和“向日葵”所在的“图层1”合并。图5-X添加相应的文字图层3.创建帧点选调出“窗口”菜单中“动画”面板，在面板右下角点选“复制所选帧”。在第2帧对应的“图层”面板中，关闭以“向日葵”为背景的该层可见性，如图5-X所示。图

5、5-X改变第二帧图层可见性4.设置帧状态在“动画”面板中，通过分别点选各帧，改变该帧的延迟时间，如图5-X所示。在选择帧延迟时间下方，可选择循环次数，将其设为“永远”。图5-X选择帧延迟时间最后可通过“动画”面板上的“播发动画”按钮预览效果。5.导出动画要将动画导出成可运动的动态GIF图片格式，需要通过“文件”菜单的“存储为Web和设备所用格式”导出，如图5-X所示。图5-X存储为Web和设备所用格式对话框点选“存储”后，按图5-X所示，保存为GIF格式。图5-X保存为gif格式的图像4任务分析动画动画，多幅静止图像连续播

6、放，利用视觉暂留形成连续影像。例如如胶片电影，就是将一系列记录着单幅画面的胶卷，按照一定的速度依次投影到屏幕上。为了让观众感受到连续影像，电影是以每秒24张画面的速度播放，也就是一秒钟内在屏幕上投射上24张静止画面，即24帧。帧(Frame)，可以看作动画中最小单位的单幅图像。有关动画播放速度的单位是FPS，其中的F就是帧(Frame)，P就是每(Per)，S就是秒(Second)。除了电影每秒24帧外，电视所用的PAL制式为每秒25帧，NTSC制式为每秒30帧。在计算机显示器上播放，则每秒15帧以上就可以达到连续的影像效

7、果。动画面板通过“窗口”菜单调出的“动画”面板默认以帧模式打开，可显示动画中的每个帧的缩览图。通过面板底部的帧工具可设置“选择循环选项”、“选择第一帧”“选择上一帧”、“播放动画”、“选择下一帧”、“过渡动画帧”、“复制所选帧”、“删除所选帧”以及“转换为时间轴动画”。选择循环选项，设置动画导出时的播放次数。选择帧延迟时间，设置每帧在播放过程中的持续时间。过渡动画帧，能在两个现有帧之间添加一系列帧，并让这些帧起到使两个原始帧之间图层属性的位置、不透明度、效果均匀变化。复制选定的帧，可复制“动画”面板中选定的帧，添加在被复制

8、帧之后。转换为时间轴动画，将当前动画面板模式由帧动画模式转换为时间轴动画模式。时间轴模式可显示文档图层的帧持续时间和动画属性。优化动画帧完成动画后，若要运用于网页，则最好进行“优化动画”以便快速下载到Web浏览器。可以点击“动画”面板菜单中选取“优化动画”选项，一般按其默认勾选。或在导出动画所用到的“存