第 20 章 Web 图像与动画设计

教学提示：当今 Internet 盛行，网页制作爱好者越来越多，各个软件公司都纷纷加强了图像处理软件的网页制作功能 。作为网页设计者眼中的高效工具， Photoshop 也扩展了其 Web 功能 ，捆绑了一个功能强大的 Web 制作软件 —— ImageReady 。 ImageReady 足以完成最复杂的 Web 制作任务 ，从图像切割工具到多种多样的按钮变换样式，从图像优化到功能强大的 Gif 动画制作，为 Web 图像处理提供了完美的解决方案。

教学目标：通过本章的学习，使读者掌握制作 Web 图像和动画的基本方法。

20.1 ImageReady CS 简介

由于 ImageReady 和 Photoshop 有众多相似之处，其操作也基本相同，因此，ImageReady 与 Photohsop 相同的功能，在本章中将不再重复，相关内容请参见前面章节的相关部分，本章主要介绍 ImageReady 软件所独有的功能。

20.1.2 ImageReady CS 的操作界面

20.1.1 ImageReady CS 简介

Adobe ImageReady CS 是与 Photoshop CS 捆绑销售的图像处理软件，同Photoshop 一样具有图像处理功能。虽然 Photoshop CS 功能已经非常强大，也具有处理网页图像的能力，但是在网页图像处理功能方面，它没有 ImageReady 专业、全面，比如在 Photoshop 中无法制作悬停按钮、网页动画、设置超链接等网页元素，而这一切在 ImageReady 中都能轻松做到。因此， ImageReady 是对 Photoshop Web 功能的强有力的补充，它和 Photoshop 的无缝结合使其他图像处理软件难望其项背。而且由于 ImageReady 和 Photoshop的操作方法非常相似，使众多熟悉 Photoshop 的设计师能够在最短的时间里掌握它的使用方法，大大简化了学习过程。

20.1.1 ImageReady CS20.1.1 ImageReady CS 简介简介

20.1.2 ImageReady CS20.1.2 ImageReady CS 的操作界的操作界面面 启动 ImageReady CS 有以下几种方式：

● 在【开始】菜单的【程序】中选择 Adobe ImageReady CS 命令。 ● 在 Photoshop CS 中，可以单击 Photoshop 工具箱中的 按钮， 进入 ImageReady 工作界面。 ● 在 Photoshop CS 中，也可以按 Ctrl+Shift+M 键启动 ImageReady 。 启动后窗口组成如图 20.1 所示。

2. 面板1. 图像窗口

3. 工具箱

ImageReady 共有原稿、优化、双联和四联 4 种不同图像窗口显示方式。

要切换窗口显示模式 ，只要单击窗口上方的标签名称即可，如图 20.2 所示。

1. 1. 图像窗口图像窗口

与 Photoshop 相比， ImageReady 多了以下几个面板：

● 切片：可以将图像分割成几个小块，提高网页下载速度。

● 图像映射：把图像上的某一块区域超级链接到一个 URL 上。

● 优化：设置图像优化参数。

● 颜色表：通过这个面板可以控制颜色表的颜色，主要用于图像优

化。

● 动画：制作 Gif 动画。

2. 2. 面板面板

3. 3. 工具箱工具箱

ImageReady 工作界面中的工具箱与 Photoshop 中的工具箱相比少了许多

图像绘制工具，如路径工具、模糊工具与多边形工具等。但是 ImageReady 多

了一个新工具——图像映射 ，使用此工具可以给图像的某个区域设置超级

链接，从而达到跳至另一个网页的目的。

20.2 切 片

切片是图像里的矩形区域，通过使用切片工具组可以将原图分割成几个小的切片，成为单个的功能模块。将图像存为 Web 页时，每个切片作为一个独立的文件存储，文件中包含切片自己的设置、颜色调板、链接及动画效果，这样做的最大作用是可以进行局部图像优化，从而加快网页下载速度。另外，切片还可用于在 Web 页中创建链接和动画，丰富了网页的制作手段。

20.2.2 【切片】面板

20.2.1 切片工具组

20.2.3 创建切片

在 Photoshop 和 ImageReady 的工具箱中都有切片工具组，如图 20.3所示。

切片工具组由两个工具组成：

● 【切片工具】：用于对图像进行分割操作。

● 【切片选择工具】：在对图像进行分割后，可以使用该工具选择

切片。

20.2.1 20.2.1 切片工具组切片工具组

当使用切片工具制作好分割区域后，如需要对分割区域进行编辑，设置切片的相关参数，就需要使用【切片】面板。单击【窗口】 |【切片】命令可打开【切片】面板，然后单击【切片】标签上的双向小三角，打开附加选项面板，如图 20.4 所示。 ● 【类型】：用来设置分割区域的类型。选择【图像】选项，在网 页中 1会显示当前区域中的图像内容；选择【无图像】选项，在网 页中不显示分割区域中的图像内容，而显示在【切片】面板的【 文字】文本框中设置的文本内容，如图 20.5所示。

20.2.2 20.2.2 【切片】面板【切片】面板

● 【名称】：用户可以在此设置切片的名称。如果不设置，系统会提供 默认的名称，为“文件名 _切片编号”。● 【 URL】：图像分割以后，在该文本框中输入各个分割区域的超链接地 址，可以给图像中的各个部分设置超链接，当在网页中点击图像的某 个区域时，可以打开该区域对应的网址。● Target ：如果用户在 URL中设置了超链接，该下拉列表框将被置亮。 在此下拉列表框中选择一种打开网页的方式 ( 注意，该选项主要应用 于框架网页中 )。选择 _blank选项，表示打开此链接的网页时，将在 空白的窗口中打开；选择 _self 选项，表示将在同一框架窗口中打开 ；选择 _parent 选项，表示在父框架窗口中打开，并删除其他框架； 选择 _top 选项，表示在顶部框架窗口中打开，并删除其他框架。

● Alt ：在此文本框中输入注释性文字，当用户浏览网页时，鼠标移动 到此切片上就会显示这些文字。● 尺寸】：此选项组中的 X和 Y 栏用于设置被选择切片左上角的坐标值， W 和 H栏用于设置该切片的宽度和高度。其下面的【约束比例】复选框 用于设置该切片在变化时是否固定宽高比例。● 单元格对齐】：可在【水平】下拉列表框中选择左、中、右或默认值 的对齐方式，在【垂直】下拉列表框中选择顶、基线、居中、底或默 认值的对齐方式。● 背景】：设置背景颜色。● 状态栏信息】：在此文本框中输入提示信息，这些提示信息显示在浏 览器窗口的状态栏中。

单击【切片】面板右上角的小三角，弹出如图 20.6所示的菜单，各项功能如下： ●【停放到调板窗】：单击此命令可以把【切片】面板停放到调板窗中 ●【隐藏选项】 /【显示选项】：单击此命令可隐藏或显示【切片】面 板的附加选项面板。 ●【复制切片】：可用此命令制作两个大小一样的切片。 ●【划分切片】：使用此命令可以对一个指定切片平均切分，执行该命 令后会弹出如图 20.7所示的对话框，用户在第一项可设置切片在纵 向被划分的数目；在第二项可设置被划分出来的每个切片的纵向像 素值；在第三项可设置切片在横向被划分的数目；在第四项可设置 被划分出来的每个切片的横向像素值。 ●【删除切片】：使用此命令可删除选中的切片。 ●【取消切片链接】：使用此命令可取消切片的链接。

20.2.3 20.2.3 创建切片创建切片

要将一个图像进行分割，可如下操作： (1)在 ImageReady 工具箱中选择【切片工具】 ，然后移动光标至窗 口中拖动就可以拉出一个分割区域，如图 20.8所示。执行分割操 作后工具箱中的【切换分割区域显示】按钮 会自动呈按下状 态，表示此时在图像窗口中将显示分割区域的内容，如果取消此 按钮按下状态，则隐藏分割区域。如果按下 Ctrl+H键，则可以隐 藏 /显示分割区域 (图像映射区域也可以使用此快捷键来显示 / 隐 藏 )。

(2) 分割图像后， ImageReady会自动将图像分成多个区域 ，并自动为各 个分割区域自左向右、自上而下自动编号 ，默认设置下按照 01 、 02 、 03……顺序命名。而在分割区域四周将出现一个边框线 ，如果这 个边框线呈黄色显示，则表示该分割区域正被选中 ，若分割区域框 线显示为蓝色实线，则表示该区域是由用户画出的 、而且是没有选 中的分割区域；若分割区域框线显示为蓝色虚线 ，则表示这个分割 区域是由 ImageReady自动产生的分割区域。(3) 继续进行图像分割，把图像分割成如图 20.10 所示的 3个区域 。这样 ，输出此图像文件后，就可分 3个文件保存，在网络上传输时，可分 开传输，从而加快了图像传输速度。

(4) 在工具箱中选择【切片选择工具】，然后单击分割区域可选择

切片。按下 Shift 键单击分割区域，可选择多个切片，或者取消

已选择的多个切片。按下 Ctrl 键，可在【切片选择工具】和【

切片工具】之间切换。

(5) 选择某个切片后，按下鼠标拖动即可移动切片。

创建切片以后，可以利用菜单栏中的【切片】菜单对切片进行编辑，【切片】

菜单如图 20.11 所示。

20.3 图 像 映 射

ImageReady 提供了一个图像映射工具，使用此工具可以在图像中画出一个热

区，热区可以是图像上的圆形、多边形或矩形区域，通过它们把图像上的某一块

区域超级链接到一个 URL 上。本节将简单介绍如何创建图像映射。

20.3.2 【图像映射】面板

20.3.1 图像映射工具

20.3.3 创建图像映射

ImageReady 在工具箱中提供了一个图像映射工具组，如图 20.15所示，此工

具组包含【矩形图像映射工具】、【圆形图像映射工具】、【多边形图像映射工

具】和【图像映射选择工具】 4 个工具 ，其中前三个工具主要用于设置不同形状

的热区，最后一个工具用于选择已经设置的热区。

20.3.1 20.3.1 图像映射工具图像映射工具

只有在使用图像映射工具设置热区以后才可以使用【图像映射】 面板，否则【图像映射】面板呈灰色不可用状态。图 20.16所示的【图像映射】面板中各个选项功能如下： ● 【名称】：可以在此设置热区名称，如果不设置，系统会提供默 认的名称，为图像映射 _热区编号。 ● URL：在此文本框中输入网址，创建超级链接。

20.3.2 20.3.2 【图像映射】面板【图像映射】面板

● Target ：此文本框必须在 URL 栏中键入网址之后才会置亮，用于设置

链接目标网址的网页属性。

● Alt ：此文本框用来输入关于热区的注释性文字。

● 尺寸：在此选项组中可以设置热区的尺寸。如果创建的是矩形热区，

其中 X、 Y项是设置矩形区域左上角的坐标值， W 、 H则是设置矩形区域

的高和宽。如果创建的是圆形热区， X、 Y项是设置圆心的坐标值，

而半径项则是用来设置圆形热区的半径值。

单击【图像映射】面板右上角的小三角可以打开如图 20.17所示的菜单，功能如下： ● 【停放到调板窗】：单击此命令可以把【图像映射】面板停放到 调板窗中。 ● 【隐藏选项】 /【显示选项】：单击此命令可隐藏或显示【图像映 射】面板的附加选项面板。 ● 【删除图像映射区域】：选中一个或多个热区后，单击该命令可 将其删除，也可以通过按下 Delete 键进行删除。 ● 【复制图像映射区域】：选中一个或多个热区后，单击该命令可 复制出选中的热区。另外，使用【图像映射选择工具】，在按下 Alt 键的同时拖动热区也可实现复制操作。 ● 【提升基于图层的图像映射区域】：主要用于提升基于图层的图 像映射区域。

下面介绍使用图像映射工具设置热区的操作。 (1) 首先制作一张图像，如图 20.18所示。 (2) 现在为图 20.18中的每个按钮设置一个热区。在工具箱中选择【 矩形图像映射工具】，然后在图像窗口中的每个按钮上拖曳拉 出一个矩形热区，效果如图 20.19所示。 (3) 绘制出多个热区后，要选择某个热区，可以在工具箱中选择【 图像映射选择工具】，然后单击要选中的热区，按下 Shift 键单 击可选中多个热区。当前选中的热区线条颜色显示为深红色， 四周有 8个控制点，未选中的热区线条颜色显示为青色。

20.3.3 20.3.3 创建图像映射创建图像映射

(4) 如果要移动热区，需要先在工具箱中选择【图像映射选择工具】， 然后在热区中按下鼠标拖动。或在选中矩形、圆形、多边形这 3种图 像映射工具的情况下，按下 Ctrl 键在热区上按下鼠标拖动 ，都可移 动热区。(5) 如果要改变热区大小，可以移动光标至热区控制点上 ，光标变成双 箭头时按下鼠标拖动即可。另外 ，还可在【图像映射面板】中的【 尺寸】选项组中设置参数。(6) 当在一个按钮图像设置了热区后，就可以为热区设置超链接地址。 打开【图像映射】面板，在 URL下拉列表框中输入链接网址，在 Target

下拉列表框中选择打开网页的方式，在 Alt文本框中输入超链接的提 示文字。(7) 设置完热区后，如果要将它们应用到 Dreamweaver 等网页编辑的软件 中，则还需将它们导出为 GIF 格式的图像文件。

20.4 制 作 动 画

动画已经成为网页中不可缺少的一个重要组成部分，它比静态图像更具有宣传效果，更容易吸引浏览者的注意力，成为目前网页上使用最广泛的广告手段。 下面举一个具体例子来说明动画制作的基本过程。在本例中，将把“新闻报导”的文字制作成一个动画，这些字以打字效果一一显示出来。操作步骤如下： (1) 在 ImageReady 窗口中选择【文件】 |【新建】命令建立一个新文 件，图像大小定为 500 像素×150 像素。

(2) 在图像窗口中输入“新”字，并设置其字体及颜色，并将图层“新”和 “背景”设置为可见，如图 20.20 所示。(3) 在【动画】面板上单击【复制当前帧】按钮。此时，在【动画】面 板中多了一帧图像，并自动命名为 2 ，如图 20.21 所示。(4) 在【图层】面板中将图层“新”设置为不可见，然后右击该层，在弹 出的菜单中选择【复制图层】命令，复制后的图层“新 副本”将出现 在原文本层的上方，将该层设置为可见，并将文字改为“新闻”，如 图 20.22 所示。

(5) 重复第 4步的操作，在【图层】面板中将“背景”图层设为可见，其他 图层都不可见，右击文本层“新闻”，在弹出的菜单中选择【复制图 层】命令，复制后的图层“新闻 副本”将出现在原文本层的上方，将 该层设置为可见，并将文字改为“新闻报”，如图 20.23所示。(6) 重复第 4步的操作，在【图层】面板中将“背景”图层设为可见，其他 图层都不可见，右击文本层“新闻报”，在弹出的菜单中选择【复制 图层】命令，复制后的图层“新闻报 副本”将出现在原文本层的上 方，将该层设置为可见，并将文字改为“新闻报导”，如图 20.24 所 示。

(7) 重复第 4步的操作，在【图层】面板中将“背景”图层设为可见，其他

图层都不可见，如图 20.25所示。

(8) 在【动画】面板中单击【选择第一帧】按钮 ，回到第一帧，单击

【播放 /停止动画】按钮 ，开始预览动画效果。

(9) 根据动画效果的要求，可以单击【动画】面板中帧下方的帧延迟值

，弹出帧延迟定义快捷菜单，如图 20.26所示，选择一个选项即可。

注意： 该例制作成功的关键是必须正确设置每一帧显示对应的图层，即第一帧显示图层“背景”和“新”，第二帧显注意： 该例制作成功的关键是必须正确设置每一帧显示对应的图层，即第一帧显示图层“背景”和“新”，第二帧显示示 “ “ 背景”和“新闻”，第三帧显示“背景”和“新闻报”，第四帧显示“背景”和“新闻报导”，第五帧显示背景”和“新闻”，第三帧显示“背景”和“新闻报”，第四帧显示“背景”和“新闻报导”，第五帧显示“背景”，如“背景”，如 果设置错误，在某个帧里面显示了不对应的图层，就不会形成动画效果。果设置错误，在某个帧里面显示了不对应的图层，就不会形成动画效果。

下面再制作一个图像切换的例子。在本例中，将出现一种 3个不同形象的动物，

在它们之间做出渐变的效果。用户可以根据这个原理制作出图像切换的广告条。

(1) 在 Photoshop 中制作好图像，共 3个图层，每个图层对应动物的

一种形象，如图 20.27所示。

(2) 此时的【动画】面板只显示一个帧，为了将每个图层分别作为

一个帧，选择【动画】面板菜单中的【从图层建立帧】命令，

如图 20.28所示。

(3) 选中第 1帧，单击【动画帧过渡】按钮，弹出【过渡】对话框，可以

对拟合的参数进行设置，如图 20.29所示。下面对其选项进行介绍：

● 【过渡】：选择拟合的对象，共有【选区】、【下一帧】和【最后一

帧】 3个选项，在此选择【下一帧】。

● 【要添加的帧】：设置在两个拟合的帧之间要增加的帧数，帧数越多

，过渡越自然，在此输入 5。

●【参数】：设置拟合参数。

(4) 拟合后的【动画】面板如图 20.30 所示，可见在原来的第 1帧与第 2帧

之间多出了 5 帧，原来的第 2帧变成了第 7 帧。

(5) 选择第 7 帧，重复第 (3) 步操作，使第 2帧与第 3 帧之间产生过渡。

(6) 单击【播放 /停止动画】按钮，预览动画效果，如图 20.31 所示。

(7) 选择【文件】 |【预览】 | iexplore 命令，把图形显示在 Web浏览器

中，并附带显示该动画的 HTML代码，如图 20.32 所示。

20.5 优化和输出图像

网页在网络上传输时，较大的图片将使网页下载时间过长，这就产生了一个问题，如何在不影响图像品质的情况下将图像进行最大程度压缩，成为最优化图像，提高网页浏览速度。 在 ImageReady 中最优化图像的操作，可在图像窗口中完成，但在最优化图像时必须配合使用【优化】和【颜色表】面板。在讲解最优化图像之前，先了解一下【优化】和【颜色表】面板的基本功能。

2. 【颜色表】面板

1. 【优化】面板

在【优化】面板中，可以设置图像文件格式、色彩显示方式、颜色混合方式、颜色数量、是否保持透明、透明区域以哪一种颜色取代和下载时显示方式等参数。在该面板中，可以选择 5种文件格式， JPEG、 GIF、 PNG-8、 PNG-24 和 WBMP ，选择任何一种文件格式，在面板中将显示不同的参数选项，图 20.33、图20.34 、图 20.35、图 20.36和图 20.37所示是分别选择 GIF、 JPEG、 PNG-8、PNG-24 和 WBMP格式时的【优化】面板。其中选择 GIF 格式与选择 PNG 格式时的面板设置基本相同。下面主要介绍常用的 GIF 格式和 JPEG格式的【优化】面板。

1. 1. 【优化】面板【优化】面板

GIF格式的【优化】面板如图 20.33所示，各个选项含义如下：

JPEG格式的【优化】面板如图 20.34所示，各项含义如下：

● A ：【格式】下拉列表框 。在这个下拉列表框中可以选择优化图像的 格式。● B：【深度减低】下拉列表框。通过这个下拉列表框可以选择哪些颜 色作为 GIF中的颜色，有 9个颜色方案选项，如果选择【自定】选项， 可以在【颜色表】面板中设置颜色。● C ：【方法】下拉列表框。在包含连续色调 (尤其是颜色渐变 )的图像 中 ，设置仿色可以防止出现颜色过渡不均匀的现象。选项中后面的 3 种模式是仿色算法的不同运算方式。当选择【扩散】选项时还可以在 右侧的【仿色】中设置扩散程度。当图像中存在 Alpha 通道的时候 ， 还可以按下【仿色】后面的按钮，设置 Alpha 通道的扩散程度。

● D：选中【透明区域】复选框后，可以在【透明度仿色】下拉列表框 中选取对部分透明的像素应用仿色的方法。选择【无透明度仿色】选 项即不对图像中部分透明的像素应用仿色。【扩散透明度仿色】选项 表示应用与【图案透明度仿色】选项相比不太明显的随机图案，仿色 效果在相邻像素间扩散。选择该选项后可以在下方的【仿色】中设置 应用于图像的仿色量。【图案透明度仿色】选项表示对部分透明的像 素应用方块图案。【杂色透明度仿色】选项表示应用与【扩散透明度 仿色】选项相似的随机图案，但不在相邻像素间扩散图案。● E：【交错】复选框。选中该选项后，在整个图像文件的下载过程中 ，可以在浏览器中以低分辨率显示图像。

● F：【使用统一的颜色表】复选框。选中该选项可对所有翻转状态使 用同一颜色表。● G：单击该箭头图标可以将当前面板中的参数设置创建成一个可执行 文件 .exe ，以便应用到一个图像或批处理的图像中。● H：【颜色】下拉列表框。可以设置 GIF 格式的颜色数，范围是 2～ 256。● I ：【 Web 对齐】菜单。指定将颜色转换为最接近的 Web 调板颜色 的容差级别，值越大，转换的颜色越多。

● J：【杂边】菜单。若要使完全透明的像素透明并将部分透明的像素 与一种颜色相混合，选中【透明区域】复选框，并在该菜单中选择一 种杂边颜色；若要使透明度大于 50% 的所有像素完全透明并使透明 度小于或等于 50% 的所有像素完全不透明，选中【透明区域】，并 从【杂边】菜单中选取【无】；若要用选中的颜色填充完全透明的像 素并将部分透明的像素与同一种颜色相混合，可在该菜单中选择一种 杂边颜色，并取消选择【透明区域】复选框。

● K：【损耗】文本框。用于设置 GIF 格式的压缩比，这里的压缩是有损

压缩，即参数值越大图像的文件尺寸就越小，但图像的质量就越差。

如果优化的图像包含 Alpha 通道，可按下【损失】参数后面的 按钮

打开【修改损耗设置】对话框设置 Alpha 通道的压缩比，如图 20.38所

示，在对话框中可以在【通道】下拉菜单中选择通道，通过滑杆或者

在【最小化】和【最大化】参数中设置 Alpha 通道的压缩比。

● A ：【格式】下拉列表框。在这个下拉列表框中可以选择优化图像的 格式。● B：【品质】下拉列表框。用于设置图像的品质级别，也可在其右侧的 【品质】文本框中直接输入品质值。使用高品质设置比使用低品质设 置生成的文件大。当图像中包含了 Alpha 通道，可以按下【品质】文本 框后面的按钮，对 Alpha 通道进行压缩设置。● C ：【连续】复选框。选中该复选框后，可以使用户在整个图像下载完 成之前，在浏览器中看到低分辨率的图像，功能类似于 GIF【优化】面 板中的【交错】选项。● D：【保留 ICC配置文件】复选框。选中该复选框可以将图片的 ICC 配 置文件与文件保留在一起。 ICC 配置文件主要用于在某些浏览器中进 行色彩校正。

● E：【添加元数据】。选中该选项可添加来自数码相机的元数据。● F：【模糊】菜单。用于指定图像的模糊量。该选项可以产生与高斯 模糊滤镜相同的效果。● G：【杂边】菜单。用于指定图像中透明像素的填充色。图像中完全 透明的像素由选中的颜色填充，部分透明的像素与选中的颜色相混 合。● H：【优化的】复选框。选中该选项后可以以最好的方式优化图像， 文件较小，一般设置为选中。提示： GIF、 JPEG和 PNG格式的特点，参 见附录B。

【颜色表】面板主要用于显示图像中所使用的颜色数目，如图 20.39所示。只

有当在【优化】面板中设置为 GIF 或 PNG-8的图像文件格式 ，并且在图像窗口

选择 【优化】 、【双联】或【四联】的窗口模式时 ，在【颜色表】面板中才会

显示出当前图像的颜色表格。若按下 Shift 键再单击【颜色表】面板中的颜色，

则可选取多个颜色。当用户在【优化】 面板中重新设颜色数目时，该面板中的颜

色数目也会产生相应的变化。

2. 2. 【颜色表】面板【颜色表】面板

图 20.1 ImageReady 工作界面

图 20.2 图像窗口

图像显示模式

文件缩放级别 图像信息

图 20.3 工具箱中的切片工具组

图 20.4 【切片】面板

图 20.5 选择【无图像】类型时的【切片】面板

图 20.6 【切片】面板菜单

图 20.7 【划分切片】对话框

图 20.8 分割图像

图 20.9 【样式】下拉列表框

图 20.11 【切片】菜单

图 20.12 【将优化结果存储为】对话框

图 20.13 【切片】选项组

图 20.14 【存储文件】选项组

图 20.15 工具箱中的图像映射工具组

图 20.16 【图像映射】面板

图 20.17 【图像映射】 面板菜单

图 20.18 制作好的按钮图像

图 20.19 给图像设置热区

图 20.20 输入“新”文字

图 20.21 复制当前帧

图 20.22 设置第 2 帧的效果

图 20.23 设置第 3 帧的效果

图 20.24 设置第 4 帧的效果

图 20.25 设置第 5 帧的效果

图 20.26 设置帧延迟值

图 20.27 【图层】面板

图 20.28 【动画】面板

图 20.29 【过渡】对话框

图 20.30 拟合后的【动画】面板

图 20.31 预览动画

图 20.32 在 Internet Explorer 中预览动画

图 20.33 选择 GIF 格式时的【优化】面板

图 20.34 选择 JPEG 格式时的【优化】面板

图 20.35 选择 PNG-8 格式时的【优化】面板

图 20.36 选择 PNG-24 格式时的【优化】面板

图 20.37 选择 WBMP 格式时的 【优化】面板

图 20.38 【修改损耗设置】对话框

图 20.39 【颜色表】面板

图 20.40 3 种不同格式的图像

图 20.41 3 种不同的颜色数目设置下的 GIF 图像

20.6 上 机 指 导

20.6.2 制作图像切片

20.6.1 制作跑动的运动员

在前面小节里介绍了动态文字效果制作，下面举一个例子，介绍一下如何制作动态的图像效果，步骤如下：

在制作主页时，可以将一张漂亮的图片作为首页，然后在上面制作切片，既可以加快网页的下载速度，又可以在切片上创建超链接，分别链接到主页的各个分类页面。