新编ps基础教程第12章.ppt

1、第十二章 制作网页图像与动画,第一节 简述ImageReady 第二节 制作网页图像 第三节 制作GIF动画 习题十二,随着网络技术的飞速发展，网页设计已经成为一个热门的行业。利用Photoshop和其捆绑的ImageReady能够设计出整体的网页。特别是ImageReady可以很出色地完成网页图像的优化任务，制作出别致的GIF动画。,第一节 简述ImageReady,一、启动ImageReady启动ImageReady有3种方法，分别介绍如下：（1）在“开始”菜单中单击ImageReady的图标。（2）在Photoshop中选择“文件”“在ImageReady中编辑”命令，可跳至ImageR

2、eady。（3）在Photoshop中单击工具箱中的“在ImageReady中编辑”按钮，可跳至ImageReady。,二、ImageReady的操作界面ImageReady的操作界面和Photoshop的操作界面非常相似，所以用户接触ImageReady一点也不会陌生，如图12.1.1所示。但是它们之间又存在着差异，主要体现在工具箱和控制面板上，这也正是ImageReady在制作网页图像和动画方面优于Photoshop的原因。1工具箱选择“窗口”“工具”命令，可打开ImageReady的工具箱，如图12.1.2所示。,图12.1.1 ImageReady的操作界面 图12.1.2 Image

3、Ready的工具箱,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 切换图片可视性,图12.1.7 切换切片可视性

5、,预览文档：单击“预览文档”按钮，可直接在图像中预览GIF动画和图像翻转的效果。在Iexplore中预览：单击“在Iexplore中预览”按钮，可在IE浏览器中预览GIF动画和图像翻转的效果。,2控制面板ImageReady与Photoshop相比增加了几组控制面板。在这里介绍主要的控制面板。（1）优化面板：优化控制面板（见图12.1.8）可用于网络上传输的文件，在不影响图像质量的前提下，对图像的大小进行压缩，从而提高图像在网络中的下载速度。,图12.1.8 优化控制面板,（2）动画面板：动画是由一幅幅画面按顺序播放形成的，把每一幅画面称为动画帧。动画面板（见图12.1.9）可用于创建动画帧，

6、它由以下几部分组成。,图12.1.9 动画面板,动画面板的中间部分是动画帧的预览区域。“播放停止动画”按钮 ：用于播放或停止动画。“复制当前帧”按钮 ：用于复制或创建当前帧。“删除选中帧”按钮 ：用于删除选中的当前帧。“选择前一帧”按钮 和“选择下一帧”按钮 ：分别用于选择前一帧和后一帧。“选择第一帧”按钮 ：用于回到第一帧。“过渡”按钮 ：用于添加过渡帧。,（3）切片面板：切片面板（见图12.1.10）可配合切片工具制作网页。,图12.1.10 切片面板,（4）图像映射面板：图像映射面板（见图12.1.11）可配合图像映射工具制作网页。,图12.1.11 图像映射面板,三、ImageRead

7、y的功能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）颜色正常区域为当前切片，用户可以使用切片选择工具来切换当前切片，效果如图12.2.3所示。,图12.2.3 切换切片,（4）选择“窗口”“切片”命令，打开

9、切片面板，如图12.2.4所示。,图12.2.4 切片面板,名称：可在其右侧的文本框中输入切片的名称。一般使用默认名称。URL：用于设置切片所要链接的地址。可在其中输入如图12.2.4所示的网址。Target：在其右侧的下拉列表中可选择超链接定义的网页的弹跳方式。它包括以下几个选项：_blank：在一个新的未命名的浏览器中打开链接的网页。_self：在当前窗口打开链接的网页。,_parent：在父窗口打开链接的网页。_top：在完整的浏览器窗口中打开链接的网页。Alt：该文本框用于设置在浏览器中鼠标指向切片时所显示的文字，如图12.2.5所示。,图12.2.5 设置Alt文本框后的效果,（5）

10、选择一个切片，在优化面板中设置该切片优化值，优化参数如图12.2.6所示，然后按此方法优化所有的切片。,图12.2.6 优化面板,（6）选择“文件”“将优化结果存储为”命令，在弹出的“将优化结果存储为”对话框中设置保存的类型和位置。在“保存类型”下拉列表中选择“HTML和图像（*.html）”选项，最终效果如图12.2.7所示。图像映射的制作和切片基本相同，在这里就不再叙述了。,图12.2.7 图像优化最终结果,动画是由一幅幅画面按顺序播放形成的，制作GIF动画主要通过动画控制面板来完成。在以前的章节中讲到GIF格式可以保存动画，因此在制作完动画之后，需要将其保存为GIF格式。,第三节 制作G

11、IF动画,下面通过以下两个例子来讲解动画的制作方法。一、制作飞入文字的动画以下为飞入文字动画的操作步骤：（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.3.4 复制当前帧,（5）确定新建的动画帧为当前帧，单击工具箱中的

12、“移动工具”按钮，选择文字图层，将文字拖至图像的最左侧，如图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状态和正常状态，这些状态已经足够应付一般的按钮。但用户可以根据自己的需要为图像添加Selected，Out，Up和Click这些特殊状态。,以下

14、是按钮的翻转效果的操作步骤：（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）单击工具箱中的“预览文档”按钮，将鼠标放置在图像中，可得到如图12.3.13所示的效果。,图12.3.13 预览翻转的效果,（6）若还需要其他的状态，可单击web内容面板底部的“创建翻转状态”按钮 ，可产生一个“Selected状态”，如图12.3.14所示。,图12.3.14 创建Selected翻转状态,（7）确定“Selected状态”为选中状态，在图层样式面板中单击“糖块”样式，在预览翻转时当鼠标单击选择后，在移出触发区时，按钮的效果如图12.3.15所示。制作其他状态的