三、 gif图像的优化与导出 - read.pptVIP

第13章 制作网页图像与GIF动画 重点内容： GIF动画的创建 GIF图像的编辑与处理 GIF图像的优化与导出 * 新世纪网页设计师应用教程 * 新世纪网页设计师应用教程 第1章 网页设计基础 重点内容： 网页的设计构思和布局 站点的规划与设计流程 主页的基本制作流程 一、 GIF动画的创建 1、创建GIF动画 进入Fireworks 8编辑页面，选择“文件”菜单中的“新建”命令，即可再弹出的左下图所示的“新建文档”对话框中设置文档。 然后选择“文件”|“导入”命令，在打开的右下图所示的“导入”对话框中选择所需要的素材图片。 一、 GIF动画的创建 2、创建多帧GIF动画 每一个GIF动画都是要由许多帧组成，在每帧上绘制不同的动作。选择“窗口”|“帧”命令，在“帧”面板中单击 按钮，可以新建帧。 系统默认的帧延时为7/100秒，双击系统默认的数值，在弹出的文本框中可从新设置帧延时。 二、 GIF图像的编辑与处理 1、基本图行绘制 Firework 8在图形图像的处理上“独领风骚” 。 例如：绘制带有渐变效果的矩形，可先在“工具箱”中单击图标，按下Shift键，在画布中间画一个正方形框 。 然后在“属性”面板中，单击油漆桶后面的下拉列表框，选择“渐变”|“线性”选项 。 在“属性”面板中单击按钮，在弹出的菜单中选择“阴影和光晕”|“投影”命令。 二、 GIF图像的编辑与处理 2、图像效果应用 有关图像效果的应用，如果只空谈，很难体会实际效果。下面以绘制五角星为例： 在“工具箱”单击图标，拖出左上图所示的下拉列表，选中“星形” 。 在画布中央，绘出一个五角星，在“属性”面板中，单击油漆桶后面的下拉列表框，选择“渐变”|“放射状”命令。效果如右下图所示。 二、 GIF图像的编辑与处理 2、图像效果应用 单击其“属性”面板中的 按钮，从弹出的快捷菜单中选择“斜角和浮雕”|“内斜角”命令。 单击“效果”列表框中的“内斜角”项，在打开的面板设置，按右图所示的值进行设置。 二、 GIF图像的编辑与处理 2、图像效果应用 选中图形，然后选择“滤镜”菜单中的Eye Candy 4000 Le下的Motion Trail…命令，打开Motion Trail对话框，设置效果。 设置完成后即可得到最终效果。 三、 GIF图像的优化与导出 1、图像的优化 图像优化设置仅用于输出图像，这一点在图像处理软件Fireworks中有较好体现，因此可以结合自己的创意对图像进行优化，并调整其优化设置。通过Fireworks的“优化”面板中的各种优化控制选项，可以方便地实现图案的优化。 新建一个页面，导入事先已经做好的图像，选择“窗口”|“优化”命令，即可打开“优化”面板 。 三、 GIF图像的优化与导出 2、图像的导出 完成了图像优化工作之后，就可以将Fireworks的作品以图像的形式导出了。因为目前很多图像软件并不支持Fireworks的专用图像格式，所以必须将作品以通用的格式进行导出处理。 选择“文件”|“导出向导”命令，即可弹出“导出向导”对话框。 三、 思考 在Fireworks中如何将图像以通用格式导出。 在优化图像时，一般遵循什么原则来选择图像格式。 四、 动手练习 制作一个GIF动画。包括：1.正确导入所需素材图片。2.输入文本并添加效果。 * 新世纪网页设计师应用教程