第14章 ImageReady CS2的基本应用

第14章知识要ImageReadyCS2的基本应用

ImageReadyCS2简介

ImageReadyCS2工作界面

制作网页动画

优化网页图像切片图像映射

翻转应用实例14.1ImageReadyCS2概述

ImageReadyCS2同PhotoshopCS2一样，也具有处理网页图像的能力，但是ImageReadyCS2在网页图像处理功能方面更专业、更全面，是一款强大的网络图像和动画图像的处理工具，它提供了很多网络方面的功能，比如优化图像、制作Gif动画以及许多网页特效等。

14.1ImageReadyCS2概述ImageReadyCS2具有如下的新功能：切片管理功能图像优化功能图像映射功能制作翻转图像功能

14.2ImageReadyCS2工作界面

ImageReadyCS2的界面如图1所示。图1

ImageReadyCS2工作界面14.2.1工具箱

ImageReadyCS2工作界面中的工具箱与PhotoshopCS2中的工具箱相比，少了许多图像的绘制工具，但是多了一个新的工具——【图像映射】，使用此工具可以给图像的某个区域设置超级链接，目的是为了实现网页的跳转。

在ImageReadyCS2中图像的映射工具分成了两组。一组是【矩形图像映射工具】、【圆形图像映射工具】、【多变形图像映射工具】；另外一组是【图像映射选择工具】

。14.2.2控制调板

ImageReadyCS2与PhotoshopCS2相比，少了几个控制调板，它们分别是【导航器】、【通道】和【路径】等，但是同时增加了以下几个调板：切片：可以将网页图像分割成多个小块，提高网页图像的下载速度；图像映射：把图像上的某块区域链接到一个URL上；优化：设置图像的优化参数；颜色表：主要用于图像的优化；Web内容：制作翻转效果；动画：制作Gif动画。14.2.3图像窗口

ImageReadyCS2的图像显示窗口共有4种不同的显示方式，分别是：【原稿】、【优化】、【双联】、【四联】。需要切换窗口之间的显示模式，只需单击窗口上方的标签名称即可。如图2所示。

图2图像窗口14.3制作网页动画 在制作网页的过程中，单一静态的网页会给人以呆板、僵硬的感觉，但如果用户使用ImageReadyCS2制作一些诸如商家广告标语、发光旋转的水晶体等简单的小动画，在吸引网友的眼球的同时，也为网页本身增添了几分趣味性。14.3.1制作动画 所谓动画，就是在一定时间内显示的一系列图像或者帧，当前帧较之前一帧有一些变化。动画的播放原理与电影的放映非常相似，都是将一些静止的、连续动作的画面以较快的速度播放出来，利用图像在人的肉眼中具有暂存性的原理，从而使人感觉连续的播放效果。 详细的制作过程参看课本14.3.1节。14.3.2动画播放设置 在制作好动画之后，就需要考虑播放的问题。这里介绍一些在动画播放之前，需要设置的一些选项。比如，播放次数、指定播放延迟的时间间隔等。设置播放次数 在【动画】调板中，单击左下方的【播放选项】，从弹出的下拉菜单中可以设置动画的播放次数，如图3所示。图3设置播放次数14.3.2动画播放设置指定播放延迟 在动画播放的过程中，可以指定单帧或者每一帧的播放时间。所谓延迟就是表示一个帧显示的时间。延迟时间以秒为单位显示。选中要延迟的帧，单击该帧缩略图下方的延时下拉菜单图标，在弹出的下拉菜单中可以进行延时选择，如图4所示。图4延迟下拉菜单14.3.3优化动画设置

在【动画】调板右上角的弹出菜单中，选择【优化动画】命令，弹出【优化动画】对话框，如图5所示。图5【优化动画】对话框14.4优化网页图像

网页在网络上传输时，由于图像的原因将使网页打开和下载的速度受到很大的影响，因此在制作网络图像时对图像的优化是很重要的。

ImageReady就提供了对网络图像的优化功能，它能够对图像中的每一个切片进行优化，使它的文件尽量小，但是又能在Web页上得到较好的效果。14.4.1优化调板和颜色表调板 【优化】调板

【优化】调板用来设置优化图像的格式、品质、透明度、下载时显示方式等参数。如图6所示。图6【优化】调板14.4.1优化调板和颜色表调板【颜色表】调板 【颜色表】调板用来设置动画图像的点选，即显示图像中所使用的颜色数目，如图7所示，只有当在【优化】调板中设置图像文件格式为GIF或PNG8，同时在图像窗口选择【优化】、【双联】或【四联】的窗口模式时，在【颜色表】调板中才会显示出当前图像的颜色表格。图7【颜色表】调板14.4.3根据文件大小优化 在【优化】调板右侧的下拉菜单中，选择【优化文件大小】命令，可以将图像或切片优化到适当的文件大小，这项功能可以将文件快速优化到所需的大小，如图8所示。所需文件大小：直接指定所需文件的大小；起点：设定优化的依据；使用：设定优化的对象；图8【优化文件大小】对话框14.4.4优化后图像的输出 将图像优化后，假如要将优化后的图像应用到网页中，还必须将图像输出为网页中可以使用的图像格式。通常情况下，网页中使用的图像格式大多数为GIF或JPEG格式。14.5切片 切片是指将一幅完整的图像划分成多个矩形区域，主要是指用来定义一幅图像的指定区域，切片一旦定义好以后，其中的每一个切片都是一个独立的图像文件，这些图像区域可以用来模拟动画或其他的图像效果，用来定义网页上典型的切片式导航条、按钮条、信息区和图片区等。 利用切片所提供的功能实现图像的最优化设置、调色板、URL、滚动及动画效果，在处理含有复杂图像及包含有图文混排的网页时，用切片可以提高下载速度和图像质量。14.5.1切片工具 在ImageReady和Photoshop的工具箱中都包含有切片工具组，切片工具组包含两个工具，如图9所示。 切片工具：用于对图像进行分割操作的工具； 切片选择工具：用于选择分割后的图像切片。图9切片工具组

14.5.2切片类型 在ImageReady中，定义有3种类型的切片，即用户切片、自动切片、子切片，如图10所示。图10切片的类型14.5.3切片调板 用户可使用【切片】调板对分割区域进行编辑，设置与切片相关的各项参数，如图11所示，调板菜单,如图12所示。图11【切片】调板图12【切片】调板菜单14.5.4创建切片创建切片的方法有两种：使用切片工具创建；通过选区或从参考线创建。图13使用切片工具分割图像14.5.5切片文件的输出 在切片创建以后，可以将各个分割区域中的图像作为单独文件输出。 具体的制作过程请参看课本14.5.5节。

14.6图像映射 图像映射是利用图像上的热点将图像区域链接到URL，用户不但可以将整幅图像链接到URL，还可以在一个图像中设置多个链接区域（称为图像映射区域），链接到其他Web页或多媒体文件。 14.6图像映射 使用图像映射比使用切片的超链接具有更多的灵活性和实用性: 使用图像映射，会将图像作为一个文件按原样导出；而使用切片则会将图像作为多个单独的文件（每个切片一个文件）导出； 使用图像映射，用户可以链接图像中的圆形、多边形或矩形区域；而使用切片则只能链接矩形区域。14.6.1图像映射工具

图像映射的工具组包含4个工具，分别是：【矩形图像映射工具】、【圆形图像映射工具】、【多边形图像映射工具】、【图像映射选择工具】，如图14所示，其中前3个工具只要用于设置不同形状的热区，第4个工具用于选择已经设置的热区。图14图像映射工具14.6.2图像映射调板 当用户使用图像映射工具设置热区(如图15所示)之后，才可以使用【图像映射】调板，如图16所示，反之【图像映射】调板呈灰色不可用状态。图15设置热区图16【图像映射】调板14.6.4图像映射的排列 用户还可以根据需要自行指定图像映射区域的叠放顺序： 选择【图像映射选择】工具，可以直接选择工具选项栏中按钮来改变叠放顺序，如【置为顶层】、【前移一层】、【后移一层】、【置为底层】等，还可以进行分布、排列处理，如图17所示。图17【图像映射选择】工具选项栏14.7翻转 翻转效果经常出现在Web页上的按钮或图像上，当用户将指针移到它上面或者点按时，它会发生变化。 要创建翻转，需将翻转图像定义为基于图层的切片或基于图层的图像映射，然后，使用【Web内容】调板和【图层】调板，创建不同状态的图像。14.7翻转 翻转效果可执行的操作如下：添加或更改图层样式或移动图层内容来修改图层内容；使用新图层替换图像内容；替换页面上其他位置的图层内容；添加帧以创建翻转动画。14.7.1翻转状态 每个翻转具有两个或两个以上的状态，可以在【Web内容】调板中创建和管理这些状态。 默认情况下，图像只具有一种状态，即【正常】状态。【正常】状态对应于图像初始打开时的状态，可添加的状态还有几种，如图18所示。图18【翻转状态选项】对话框14.7.2WEB内容调板

【Web内容】调板使用户能够创建和查看图像中的翻转状态以及设置其选项，除了翻转状态之外，还能显示切片、图像映射和动画帧，显示切片和图像映射可帮助用户跟踪图像中包含翻转效果的各个图素，显示动画帧可以很方便地查看图像的哪些状态包含动画，如图19所示。图19【Web内容】调板14.7.3创建翻转效果 网页中经常出现各种翻转按钮的效果以及鼠标暂停时图像的变化，运用切片和【Web内容】调板制作翻转按钮。 具体的制作过程请参看课本14.7.3节。14.8应用实例 小动画设计 运用【动画】调板