Download
1 / 81
810 likes | 960 Vues
教学提示： 当今 Internet 盛行，网页制作爱好者越来越多，各个软件公司都纷纷加强了图像处理软件的网页制作功能 。作为网页设计者眼中的高效工具， Photoshop 也扩展了其 Web 功能 ，捆绑了一个功能强大的 Web 制作软件 —— ImageReady 。 ImageReady 足以完成最复杂的 Web 制作任务 ，从图像切割工具到多种多样的按钮变换样式，从图像优化到功能强大的 Gif 动画制作，为 Web 图像处理提供了完美的解决方案。. 第 20 章 Web 图像与动画设计. 教学目标： 通过本章的学习，使读者掌握制作 Web 图像和动画的基本方法。.
E N D
教学提示：当今Internet盛行，网页制作爱好者越来越多，各个软件公司都纷纷加强了图像处理软件的网页制作功能 。作为网页设计者眼中的高效工具，Photoshop也扩展了其Web功能 ，捆绑了一个功能强大的 Web制作软件 ——ImageReady。ImageReady 足以完成最复杂的Web 制作任务 ，从图像切割工具到多种多样的按钮变换样式，从图像优化到功能强大的Gif动画制作，为Web 图像处理提供了完美的解决方案。 第20章 Web图像与动画设计 教学目标：通过本章的学习，使读者掌握制作Web图像和动画的基本方法。
20.1 ImageReady CS简介 由于ImageReady和Photoshop有众多相似之处，其操作也基本相同，因此，ImageReady与Photohsop相同的功能，在本章中将不再重复，相关内容请参见前面章节的相关部分，本章主要介绍ImageReady软件所独有的功能。 20.1.1 ImageReady CS简介 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的设计师能够在最短的时间里掌握它的使用方法，大大简化了学习过程。
启动ImageReady CS有以下几种方式： ● 在【开始】菜单的【程序】中选择Adobe ImageReady CS命令。 ● 在Photoshop CS中，可以单击Photoshop工具箱中的 按钮， 进入ImageReady工作界面。 ● 在Photoshop CS中，也可以按Ctrl+Shift+M键启动ImageReady。 启动后窗口组成如图20.1所示。 20.1.2 ImageReady CS的操作界面 1. 图像窗口 2. 面板 3. 工具箱
1. 图像窗口 ImageReady共有原稿、优化、双联和四联4种不同图像窗口显示方式。要切换窗口显示模式 ，只要单击窗口上方的标签名称即可，如图20.2所示。
2. 面板 与Photoshop相比，ImageReady多了以下几个面板： ● 切片：可以将图像分割成几个小块，提高网页下载速度。 ● 图像映射：把图像上的某一块区域超级链接到一个URL上。 ● 优化：设置图像优化参数。 ● 颜色表：通过这个面板可以控制颜色表的颜色，主要用于图像优 化。 ● 动画：制作Gif动画。
ImageReady工作界面中的工具箱与Photoshop中的工具箱相比少了许多图像绘制工具，如路径工具、模糊工具与多边形工具等。但是ImageReady多了一个新工具——图像映射 ，使用此工具可以给图像的某个区域设置超级链接，从而达到跳至另一个网页的目的。 3. 工具箱
20.2 切 片 切片是图像里的矩形区域，通过使用切片工具组可以将原图分割成几个小的切片，成为单个的功能模块。将图像存为 Web 页时，每个切片作为一个独立的文件存储，文件中包含切片自己的设置、颜色调板、链接及动画效果，这样做的最大作用是可以进行局部图像优化，从而加快网页下载速度。另外，切片还可用于在Web页中创建链接和动画，丰富了网页的制作手段。 20.2.1 切片工具组 20.2.2 【切片】面板 20.2.3 创建切片
20.2.1 切片工具组 在Photoshop和ImageReady的工具箱中都有切片工具组，如图20.3所示。切片工具组由两个工具组成： ●【切片工具】：用于对图像进行分割操作。 ●【切片选择工具】：在对图像进行分割后，可以使用该工具选择 切片。
20.2.2 【切片】面板 当使用切片工具制作好分割区域后，如需要对分割区域进行编辑，设置切片的相关参数，就需要使用【切片】面板。单击【窗口】|【切片】命令可打开【切片】面板，然后单击【切片】标签上的双向小三角，打开附加选项面板，如图20.4所示。 ●【类型】：用来设置分割区域的类型。选择【图像】选项，在网 页中1会显示当前区域中的图像内容；选择【无图像】选项，在网 页中不显示分割区域中的图像内容，而显示在【切片】面板的【 文字】文本框中设置的文本内容，如图20.5所示。
● 【名称】：用户可以在此设置切片的名称。如果不设置，系统会提供 默认的名称，为“文件名_切片编号”。 ● 【URL】：图像分割以后，在该文本框中输入各个分割区域的超链接地 址，可以给图像中的各个部分设置超链接，当在网页中点击图像的某 个区域时，可以打开该区域对应的网址。 ● Target：如果用户在URL中设置了超链接，该下拉列表框将被置亮。 在此下拉列表框中选择一种打开网页的方式(注意，该选项主要应用 于框架网页中)。选择_blank选项，表示打开此链接的网页时，将在 空白的窗口中打开；选择_self选项，表示将在同一框架窗口中打开 ；选择_parent选项，表示在父框架窗口中打开，并删除其他框架； 选择_top选项，表示在顶部框架窗口中打开，并删除其他框架。
● Alt：在此文本框中输入注释性文字，当用户浏览网页时，鼠标移动 到此切片上就会显示这些文字。 ● 尺寸】：此选项组中的X和Y栏用于设置被选择切片左上角的坐标值， W和H栏用于设置该切片的宽度和高度。其下面的【约束比例】复选框 用于设置该切片在变化时是否固定宽高比例。 ● 单元格对齐】：可在【水平】下拉列表框中选择左、中、右或默认值 的对齐方式，在【垂直】下拉列表框中选择顶、基线、居中、底或默 认值的对齐方式。 ● 背景】：设置背景颜色。 ● 状态栏信息】：在此文本框中输入提示信息，这些提示信息显示在浏 览器窗口的状态栏中。
单击【切片】面板右上角的小三角，弹出如图20.6所示的菜单，各项功能如下：单击【切片】面板右上角的小三角，弹出如图20.6所示的菜单，各项功能如下： ●【停放到调板窗】：单击此命令可以把【切片】面板停放到调板窗中 ●【隐藏选项】/【显示选项】：单击此命令可隐藏或显示【切片】面 板的附加选项面板。 ●【复制切片】：可用此命令制作两个大小一样的切片。 ●【划分切片】：使用此命令可以对一个指定切片平均切分，执行该命 令后会弹出如图20.7所示的对话框，用户在第一项可设置切片在纵 向被划分的数目；在第二项可设置被划分出来的每个切片的纵向像 素值；在第三项可设置切片在横向被划分的数目；在第四项可设置 被划分出来的每个切片的横向像素值。 ●【删除切片】：使用此命令可删除选中的切片。 ●【取消切片链接】：使用此命令可取消切片的链接。
要将一个图像进行分割，可如下操作： (1)在ImageReady工具箱中选择【切片工具】 ，然后移动光标至窗 口中拖动就可以拉出一个分割区域，如图20.8所示。执行分割操 作后工具箱中的【切换分割区域显示】按钮 会自动呈按下状 态，表示此时在图像窗口中将显示分割区域的内容，如果取消此 按钮按下状态，则隐藏分割区域。如果按下Ctrl+H键，则可以隐 藏/显示分割区域(图像映射区域也可以使用此快捷键来显示/隐 藏)。 20.2.3 创建切片
(2) 分割图像后，ImageReady会自动将图像分成多个区域 ，并自动为各 个分割区域自左向右、自上而下自动编号 ，默认设置下按照01、02 、03……顺序命名。而在分割区域四周将出现一个边框线 ，如果这 个边框线呈黄色显示，则表示该分割区域正被选中 ，若分割区域框 线显示为蓝色实线，则表示该区域是由用户画出的 、而且是没有选 中的分割区域；若分割区域框线显示为蓝色虚线 ，则表示这个分割 区域是由ImageReady自动产生的分割区域。 (3) 继续进行图像分割，把图像分割成如图20.10所示的3个区域 。这样 ，输出此图像文件后，就可分3个文件保存，在网络上传输时，可分 开传输，从而加快了图像传输速度。
(4) 在工具箱中选择【切片选择工具】，然后单击分割区域可选择 切片。按下Shift键单击分割区域，可选择多个切片，或者取消 已选择的多个切片。按下Ctrl键，可在【切片选择工具】和【 切片工具】之间切换。 (5) 选择某个切片后，按下鼠标拖动即可移动切片。 创建切片以后，可以利用菜单栏中的【切片】菜单对切片进行编辑，【切片】菜单如图20.11所示。
20.3 图 像 映 射 ImageReady提供了一个图像映射工具，使用此工具可以在图像中画出一个热区，热区可以是图像上的圆形、多边形或矩形区域，通过它们把图像上的某一块区域超级链接到一个URL上。本节将简单介绍如何创建图像映射。 20.3.1 图像映射工具 20.3.2 【图像映射】面板 20.3.3 创建图像映射
20.3.1 图像映射工具 ImageReady在工具箱中提供了一个图像映射工具组，如图20.15所示，此工具组包含【矩形图像映射工具】、【圆形图像映射工具】、【多边形图像映射工具】和【图像映射选择工具】4个工具 ，其中前三个工具主要用于设置不同形状的热区，最后一个工具用于选择已经设置的热区。
20.3.2 【图像映射】面板 只有在使用图像映射工具设置热区以后才可以使用【图像映射】 面板，否则【图像映射】面板呈灰色不可用状态。图20.16所示的【图像映射】面板中各个选项功能如下： ●【名称】：可以在此设置热区名称，如果不设置，系统会提供默 认的名称，为图像映射_热区编号。 ●URL：在此文本框中输入网址，创建超级链接。
● Target：此文本框必须在URL栏中键入网址之后才会置亮，用于设置 链接目标网址的网页属性。 ●Alt：此文本框用来输入关于热区的注释性文字。 ●尺寸：在此选项组中可以设置热区的尺寸。如果创建的是矩形热区， 其中X、Y项是设置矩形区域左上角的坐标值，W、H则是设置矩形区域 的高和宽。如果创建的是圆形热区， X、Y项是设置圆心的坐标值， 而半径项则是用来设置圆形热区的半径值。
单击【图像映射】面板右上角的小三角可以打开如图20.17所示的菜单，功能如下：单击【图像映射】面板右上角的小三角可以打开如图20.17所示的菜单，功能如下： ●【停放到调板窗】：单击此命令可以把【图像映射】面板停放到 调板窗中。 ●【隐藏选项】/【显示选项】：单击此命令可隐藏或显示【图像映 射】面板的附加选项面板。 ●【删除图像映射区域】：选中一个或多个热区后，单击该命令可 将其删除，也可以通过按下Delete键进行删除。 ●【复制图像映射区域】：选中一个或多个热区后，单击该命令可 复制出选中的热区。另外，使用【图像映射选择工具】，在按下 Alt键的同时拖动热区也可实现复制操作。 ●【提升基于图层的图像映射区域】：主要用于提升基于图层的图 像映射区域。
20.3.3 创建图像映射 下面介绍使用图像映射工具设置热区的操作。 (1) 首先制作一张图像，如图20.18所示。 (2) 现在为图20.18中的每个按钮设置一个热区。在工具箱中选择【 矩形图像映射工具】，然后在图像窗口中的每个按钮上拖曳拉 出一个矩形热区，效果如图20.19所示。 (3) 绘制出多个热区后，要选择某个热区，可以在工具箱中选择【 图像映射选择工具】，然后单击要选中的热区，按下Shift键单 击可选中多个热区。当前选中的热区线条颜色显示为深红色， 四周有8个控制点，未选中的热区线条颜色显示为青色。
(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个不同形象的动物，在它们之间做出渐变的效果。用户可以根据这个原理制作出图像切换的广告条。下面再制作一个图像切换的例子。在本例中，将出现一种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中最优化图像的操作，可在图像窗口中完成，但在最优化图像时必须配合使用【优化】和【颜色表】面板。在讲解最优化图像之前，先了解一下【优化】和【颜色表】面板的基本功能。 1. 【优化】面板 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格式的【优化】面板。 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格式的压缩比，这里的压缩是有损●K：【损耗】文本框。用于设置GIF格式的压缩比，这里的压缩是有损 • 压缩，即参数值越大图像的文件尺寸就越小，但图像的质量就越差。 • 如果优化的图像包含Alpha通道，可按下【损失】参数后面的 按钮 • 打开【修改损耗设置】对话框设置Alpha通道的压缩比，如图20.38所 • 示，在对话框中可以在【通道】下拉菜单中选择通道，通过滑杆或者 • 在【最小化】和【最大化】参数中设置Alpha通道的压缩比。
●A：【格式】下拉列表框。在这个下拉列表框中可以选择优化图像的●A：【格式】下拉列表框。在这个下拉列表框中可以选择优化图像的 格式。 ●B：【品质】下拉列表框。用于设置图像的品质级别，也可在其右侧的 【品质】文本框中直接输入品质值。使用高品质设置比使用低品质设 置生成的文件大。当图像中包含了Alpha通道，可以按下【品质】文本 框后面的按钮，对Alpha通道进行压缩设置。 ●C：【连续】复选框。选中该复选框后，可以使用户在整个图像下载完 成之前，在浏览器中看到低分辨率的图像，功能类似于GIF【优化】面 板中的【交错】选项。 ●D：【保留ICC配置文件】复选框。选中该复选框可以将图片的ICC 配 置文件与文件保留在一起。ICC 配置文件主要用于在某些浏览器中进 行色彩校正。
●E：【添加元数据】。选中该选项可添加来自数码相机的元数据。●E：【添加元数据】。选中该选项可添加来自数码相机的元数据。 ●F：【模糊】菜单。用于指定图像的模糊量。该选项可以产生与高斯 模糊滤镜相同的效果。 ●G：【杂边】菜单。用于指定图像中透明像素的填充色。图像中完全 透明的像素由选中的颜色填充，部分透明的像素与选中的颜色相混 合。 ●H：【优化的】复选框。选中该选项后可以以最好的方式优化图像， 文件较小，一般设置为选中。提示：GIF、JPEG和PNG格式的特点，参 见附录B。
2. 【颜色表】面板 【颜色表】面板主要用于显示图像中所使用的颜色数目，如图20.39所示。只有当在【优化】面板中设置为GIF或PNG-8的图像文件格式 ，并且在图像窗口选择 【优化】 、【双联】或【四联】的窗口模式时 ，在【颜色表】面板中才会显示出当前图像的颜色表格。若按下Shift键再单击【颜色表】面板中的颜色，则可选取多个颜色。当用户在【优化】 面板中重新设颜色数目时，该面板中的颜色数目也会产生相应的变化。
图像显示模式 文件缩放级别 图像信息 图20.2 图像窗口
