1、第十二章 制作网页图像与动画,第一节 简述ImageReady 第二节 制作网页图像 第三节 制作GIF动画 习题十二,随着网络技术的飞速发展，网页设计已经成为一个热门的行业。利用Photoshop和其捆绑的ImageReady能够设计出整体的网页。特别是ImageReady可以很出色地完成网页图像的优化任务，制作出别致的GIF动画。,第一节 简述ImageReady,一、启动ImageReady 启动ImageReady有3种方法，分别介绍如下： （1）在“开始”菜单中单击ImageReady的图标。 （2）在Photoshop中选择“文件”“在ImageReady中编辑”命令，可跳至Ima
2、geReady。 （3）在Photoshop中单击工具箱中的“在ImageReady中编辑”按钮 ，可跳至ImageReady。,二、ImageReady的操作界面 ImageReady的操作界面和Photoshop的操作界面非常相似，所以用户接触ImageReady一点也不会陌生，如图12.1.1所示。但是它们之间又存在着差异，主要体现在工具箱和控制面板上，这也正是ImageReady在制作网页图像和动画方面优于Photoshop的原因。 1工具箱 选择“窗口”“工具”命令，可打开ImageReady的工具箱，如图12.1.2所示。,图12.1.1 ImageReady的操作界面 图12.1
3、.2 ImageReady的工具箱,ImageReady的工具箱中有16组工具，其中有几个和Photoshop中的工具存在差异，现分别予以介绍。 （1）圆角矩形选框工具：ImageReady与Photoshop相比增加了圆角矩形选框工具 。它的用法和其他选取工具用法一致，用于创建圆角矩形选框，如图12.1.3所示。,图12.1.3 圆角矩形选框工具,（2）文字工具：ImageReady文字工具与Photoshop文字工具相比，取消了蒙版文字工具。文字的排列方式由控制面板控制。 （3）图像映射工具：ImageReady与Photoshop相比增加了图像映射工具，如图12.1.4所示。它可在图像中
4、建立热区，用户可以通过这些热区来建立超链接。图像映射工 具有3种：矩形图像映射工具 、圆形图像 映射工具 和多边形图像映射工具 ，制作 的效果如图12.1.5所示。,图12.1.4 图像映射工具,图12.1.5 不同类型的图像映射,（4）映射选择工具：ImageReady与Photoshop相比增加了映射选择工具 ，用于选择所创建的图像映射。 （5）切换图片可视性：单击ImageReady的“切换图片可视性”按钮 ，可显示或隐藏图像映射，如图12.1.6所示。 （6）切换切片可视性：单击ImageReady的“切换切片可视性”按钮 ，可显示或隐藏切片，如图12.1.7所示。,图12.1.6 切
5、换图片可视性,图12.1.7 切换切片可视性,预览文档：单击“预览文档”按钮 ，可直接在图像中预览GIF动画和图像翻转的效果。 在Iexplore中预览：单击“在Iexplore中预览”按钮 ，可在IE浏览器中预览GIF动画和图像翻转的效果。,2控制面板 ImageReady与Photoshop相比增加了几组控制面板。在这里介绍主要的控制面板。 （1）优化面板：优化控制面板（见图12.1.8）可用于网络上传输的文件，在不影响图像质量的前提 下，对图像的大小进行压缩，从而提高图 像在网络中的下载速度。,图12.1.8 优化控制面板,（2）动画面板：动画是由一幅幅画面按顺序播放形成的，把每一幅画面
6、称为动画帧。动画面板（见图12.1.9）可用于创建动画帧，它由以下几部分组成。,图12.1.9 动画面板,动画面板的中间部分是动画帧的预览区域。 “播放停止动画”按钮 ：用于播放或停止动画。 “复制当前帧”按钮 ：用于复制或创建当前帧。 “删除选中帧”按钮 ：用于删除选中的当前帧。 “选择前一帧”按钮 和“选择下一帧”按钮 ：分别用于选择前一帧和后一帧。 “选择第一帧”按钮 ：用于回到第一帧。 “过渡”按钮 ：用于添加过渡帧。,（3）切片面板：切片面板（见图12.1.10）可配合切片工具制作网页。,图12.1.10 切片面板,（4）图像映射面板：图像映射面板（见图12.1.11）可配合图像映射
7、工具制作网页。,图12.1.11 图像映射面板,三、ImageReady的功能 ImageReady主要用于制作网页图像与GIF动画，可以通过以下几个方面来体现这两个功能。 （1）优化图像：它可以对所要进行网络传输的图像进行优化，从而缩小图像文件的大小并使图像在网页上显示最佳的效果。,（2）制作图像映射：ImageReady可使用图像映射工具为图像添加链接。 （3）制作GIF动画：可制作出网络上流行的GIF动画。 （4）图像翻转：制作出当鼠标经过网页时所引起的图像翻转效果。,制作网页图像主要是指优化图像使之可以应用于网络传输。Photoshop不但可以优化图像还可以将其输出为网页图片。 一幅较
8、大的图像在下载的时候，只有数据全部下载后才能看到图像，因此速度会很慢，利用切片工具可以将图像分割成若干部分，分别下载，这样就能够提高下载的速度，使网页浏览者很快看到图像，因此切片是优化图像的得力工具。 以对一幅图像进行优化为例，操作步骤如下：,第二节 制作网页图像,（1）按“CtrlO”键，打开一幅图像文件，如图12.2.1所示。,图12.2.1 待优化的原图像,（2）单击工具箱中的“切片工具”按钮 ，在图像中拖动鼠标，可以以拖出区域为基准将图像切割成若干部分，如图12.2.2所示。,图12.2.2 切片工具切割效果,（3）颜色正常区域为当前切片，用户可以使用切片选择工具 来切换当前切片，效果
9、如图12.2.3所示。,图12.2.3 切换切片,（4）选择“窗口”“切片”命令，打开切片面板，如图12.2.4所示。,图12.2.4 切片面板,名称：可在其右侧的文本框中输入切片的名称。一般使用默认名称。 URL：用于设置切片所要链接的地址。可在其中输入如图12.2.4所示的网址。 Target：在其右侧的下拉列表中可选择超链接定义的网页的弹跳方式。它包括以下几个选项： _blank：在一个新的未命名的浏览器中打开链接的网页。 _self：在当前窗口打开链接的网页。,_parent：在父窗口打开链接的网页。 _top：在完整的浏览器窗口中打开链接的网页。 Alt：该文本框用于设置在浏览器中鼠
10、标指向切片时所显示的文字，如图12.2.5所示。,图12.2.5 设置Alt文本框后的效果,（5）选择一个切片，在优化面板中设置该切片优化值，优化参数如图12.2.6所示，然后按此方法优化所有的切片。,图12.2.6 优化面板,（6）选择“文件”“将优化结果存储为”命令，在弹出的“将优化结果存储为”对话框中设置保存的类型和位置。在“保存类型”下拉列表中选择“HTML和图像（*.html）”选项，最终效果如图12.2.7所示。 图像映射的制作和切片基本相同，在这里就不再叙述了。,动画是由一幅幅画面按顺序播放形成的，制作GIF动画主要通过动画控制面板来完成。在以前的章节中讲到GIF格式可以保存动画
11、，因此在制作完动画之后，需要将其保存为GIF格式。,第三节 制作GIF动画,下面通过以下两个例子来讲解动画的制作方法。 一、制作飞入文字的动画 以下为飞入文字动画的操作步骤： （1）按“CtrlO”键，打开一幅图像文件，如图12.3.1所示。,图12.3.1 打开图像文件,（2）单击工具箱中的“文字工具”按钮 ，在图像中输入文字，如图12.3.2所示。,图12.3.2 输入文字,（3）单击工具箱中的“移动工具”按钮 ，选择文字图层，将文字拖至图像的最右侧，如图12.3.3所示。,图12.3.3 移动文字至右侧,（4）单击动画面板底部的“复制当前帧”按钮 ，创建一个动画帧，如图12.3.4所示。
12、,图12.3.4 复制当前帧,（5）确定新建的动画帧为当前帧，单击工具箱中的“移动工具”按钮 ，选择文字图层，将文字拖至图像的最左侧，如图12.3.5所示。,图12.3.5 移动文字至左侧,（6）单击动画面板底部的“过渡”按钮 ，在弹出的“过渡”对话框中设置参数如图12.3.6所示。,图12.3.6 “过渡”对话框,（7）单击“好”按钮，动画面板如图12.3.7所示。,图12.3.7 添加过渡帧,（8）在动画面板中对应的动画帧的播放时间上单击，可弹出如图12.3.8所示的菜单，从中可选择播放此动画帧的时间。,图12.3.8 更改动画帧的时间,（9）确定优化面板中的“格式”为GIF。 （10）选
13、择“文件”“将优化结果存储为”命令，在弹出的将优化结果存储为”对话框中设置保存的类型和位置。在“保存类型”下拉列表中选择“仅限图像（*.gif）”选项，其最终效果如图12.3.9所示。,图12.3.9 飞入文字的动画效果,二、制作按钮的翻转效果 翻转有7种状态，分别为正常、Over（定义鼠标经过时的图像）、Down（定义鼠标按下时的图像）、Selected（点击选择并在鼠标移出触发区后保持状态）、Out（当鼠标移出触发区）、Up（当鼠标抬起时）和Click（鼠标点击后停留在触发区）。 一般情况下，翻转包括最常用的Over状态、Down状态和正常状态，这些状态已经足够应付一般的按钮。但用户可以根
14、据自己的需要为图像添加Selected，Out，Up和Click这些特殊状态。,以下是按钮的翻转效果的操作步骤： （1）按“CtrlN”键，新建一幅图像文件。 （2）单击工具箱中的“胶囊矩形工具”按钮 后，再单击其属性栏中的“创建新的形状图层”按钮，在新建的图像中绘制如图12.3.10所示的图形。,图12.3.10 绘制胶囊矩形,（3）在样式面板中单击“两状态造型按钮”样式，得到如图12.3.11所示的效果。,图12.3.11 应用样式,（4）单击web内容面板底部的“创建翻转状态”按钮 ，可产生一个“Over状态”，如图12.3.12所示。,图12.3.12 创建Over翻转状态,（5）单击
15、工具箱中的“预览文档”按钮 ，将鼠标放置在图像中，可得到如图12.3.13所示的效果。,图12.3.13 预览翻转的效果,（6）若还需要其他的状态，可单击web内容面板底部的“创建翻转状态”按钮 ，可产生一个“Selected状态”，如图12.3.14所示。,图12.3.14 创建Selected翻转状态,（7）确定“Selected状态”为选中状态，在图层样式面板中单击“糖块”样式，在预览翻转时当鼠标单击选择后，在移出触发区时，按钮的效果如图12.3.15所示。 制作其他状态的方法同Selected状态的制作方法一致。,图12.3.15 Selected状态的按钮效果,一、填空题 （1）用于选择切片的工具是_。 （2）可用于创建动画帧的面板是_。,习 题 十 二,二、选择题 （1）利用（ ）工具可对图像进行优化。 A切片 B切片选择 C图像映射 D形状 （2）可用于加载超链接的工具有（ ）。 A切片工具 B形状工具 C映射选择工具 D切片选择工具,三、上机操作题 （1）练习制作一幅图像飞入的效果。 （2）练习制作按钮的翻转效果（至少有两个以上的翻转效果）。,
