Download - 第 20 章 Web 图像与动画设计
![Page 1: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/1.jpg)
第 20 章 Web 图像与动画设计
教学提示:当今 Internet 盛行,网页制作爱好者越来越多,各个软件公司都纷纷加强了图像处理软件的网页制作功能 。作为网页设计者眼中的高效工具, Photoshop 也扩展了其 Web 功能 ,捆绑了一个功能强大的 Web 制作软件 —— ImageReady 。 ImageReady 足以完成最复杂的 Web 制作任务 ,从图像切割工具到多种多样的按钮变换样式,从图像优化到功能强大的 Gif 动画制作,为 Web 图像处理提供了完美的解决方案。
教学目标:通过本章的学习,使读者掌握制作 Web 图像和动画的基本方法。
![Page 2: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/2.jpg)
20.1 ImageReady CS 简介
由于 ImageReady 和 Photoshop 有众多相似之处,其操作也基本相同,因此,ImageReady 与 Photohsop 相同的功能,在本章中将不再重复,相关内容请参见前面章节的相关部分,本章主要介绍 ImageReady 软件所独有的功能。
20.1.2 ImageReady CS 的操作界面
20.1.1 ImageReady CS 简介
![Page 3: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/3.jpg)
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 简介简介
![Page 4: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/4.jpg)
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. 工具箱
![Page 5: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/5.jpg)
ImageReady 共有原稿、优化、双联和四联 4 种不同图像窗口显示方式。
要切换窗口显示模式 ,只要单击窗口上方的标签名称即可,如图 20.2 所示。
1. 1. 图像窗口图像窗口
![Page 6: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/6.jpg)
与 Photoshop 相比, ImageReady 多了以下几个面板:
● 切片:可以将图像分割成几个小块,提高网页下载速度。
● 图像映射:把图像上的某一块区域超级链接到一个 URL 上。
● 优化:设置图像优化参数。
● 颜色表:通过这个面板可以控制颜色表的颜色,主要用于图像优
化。
● 动画:制作 Gif 动画。
2. 2. 面板面板
![Page 7: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/7.jpg)
3. 3. 工具箱工具箱
ImageReady 工作界面中的工具箱与 Photoshop 中的工具箱相比少了许多
图像绘制工具,如路径工具、模糊工具与多边形工具等。但是 ImageReady 多
了一个新工具——图像映射 ,使用此工具可以给图像的某个区域设置超级
链接,从而达到跳至另一个网页的目的。
![Page 8: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/8.jpg)
20.2 切 片
切片是图像里的矩形区域,通过使用切片工具组可以将原图分割成几个小的切片,成为单个的功能模块。将图像存为 Web 页时,每个切片作为一个独立的文件存储,文件中包含切片自己的设置、颜色调板、链接及动画效果,这样做的最大作用是可以进行局部图像优化,从而加快网页下载速度。另外,切片还可用于在 Web 页中创建链接和动画,丰富了网页的制作手段。
20.2.2 【切片】面板
20.2.1 切片工具组
20.2.3 创建切片
![Page 9: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/9.jpg)
在 Photoshop 和 ImageReady 的工具箱中都有切片工具组,如图 20.3所示。
切片工具组由两个工具组成:
● 【切片工具】:用于对图像进行分割操作。
● 【切片选择工具】:在对图像进行分割后,可以使用该工具选择
切片。
20.2.1 20.2.1 切片工具组切片工具组
![Page 10: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/10.jpg)
当使用切片工具制作好分割区域后,如需要对分割区域进行编辑,设置切片的相关参数,就需要使用【切片】面板。单击【窗口】 |【切片】命令可打开【切片】面板,然后单击【切片】标签上的双向小三角,打开附加选项面板,如图 20.4 所示。 ● 【类型】:用来设置分割区域的类型。选择【图像】选项,在网 页中 1会显示当前区域中的图像内容;选择【无图像】选项,在网 页中不显示分割区域中的图像内容,而显示在【切片】面板的【 文字】文本框中设置的文本内容,如图 20.5所示。
20.2.2 20.2.2 【切片】面板【切片】面板
![Page 11: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/11.jpg)
● 【名称】:用户可以在此设置切片的名称。如果不设置,系统会提供 默认的名称,为“文件名 _切片编号”。● 【 URL】:图像分割以后,在该文本框中输入各个分割区域的超链接地 址,可以给图像中的各个部分设置超链接,当在网页中点击图像的某 个区域时,可以打开该区域对应的网址。● Target :如果用户在 URL中设置了超链接,该下拉列表框将被置亮。 在此下拉列表框中选择一种打开网页的方式 ( 注意,该选项主要应用 于框架网页中 )。选择 _blank选项,表示打开此链接的网页时,将在 空白的窗口中打开;选择 _self 选项,表示将在同一框架窗口中打开 ;选择 _parent 选项,表示在父框架窗口中打开,并删除其他框架; 选择 _top 选项,表示在顶部框架窗口中打开,并删除其他框架。
![Page 12: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/12.jpg)
● Alt :在此文本框中输入注释性文字,当用户浏览网页时,鼠标移动 到此切片上就会显示这些文字。● 尺寸】:此选项组中的 X和 Y 栏用于设置被选择切片左上角的坐标值, W 和 H栏用于设置该切片的宽度和高度。其下面的【约束比例】复选框 用于设置该切片在变化时是否固定宽高比例。● 单元格对齐】:可在【水平】下拉列表框中选择左、中、右或默认值 的对齐方式,在【垂直】下拉列表框中选择顶、基线、居中、底或默 认值的对齐方式。● 背景】:设置背景颜色。● 状态栏信息】:在此文本框中输入提示信息,这些提示信息显示在浏 览器窗口的状态栏中。
![Page 13: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/13.jpg)
单击【切片】面板右上角的小三角,弹出如图 20.6所示的菜单,各项功能如下: ●【停放到调板窗】:单击此命令可以把【切片】面板停放到调板窗中 ●【隐藏选项】 /【显示选项】:单击此命令可隐藏或显示【切片】面 板的附加选项面板。 ●【复制切片】:可用此命令制作两个大小一样的切片。 ●【划分切片】:使用此命令可以对一个指定切片平均切分,执行该命 令后会弹出如图 20.7所示的对话框,用户在第一项可设置切片在纵 向被划分的数目;在第二项可设置被划分出来的每个切片的纵向像 素值;在第三项可设置切片在横向被划分的数目;在第四项可设置 被划分出来的每个切片的横向像素值。 ●【删除切片】:使用此命令可删除选中的切片。 ●【取消切片链接】:使用此命令可取消切片的链接。
![Page 14: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/14.jpg)
20.2.3 20.2.3 创建切片创建切片
要将一个图像进行分割,可如下操作: (1)在 ImageReady 工具箱中选择【切片工具】 ,然后移动光标至窗 口中拖动就可以拉出一个分割区域,如图 20.8所示。执行分割操 作后工具箱中的【切换分割区域显示】按钮 会自动呈按下状 态,表示此时在图像窗口中将显示分割区域的内容,如果取消此 按钮按下状态,则隐藏分割区域。如果按下 Ctrl+H键,则可以隐 藏 /显示分割区域 (图像映射区域也可以使用此快捷键来显示 / 隐 藏 )。
![Page 15: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/15.jpg)
(2) 分割图像后, ImageReady会自动将图像分成多个区域 ,并自动为各 个分割区域自左向右、自上而下自动编号 ,默认设置下按照 01 、 02 、 03……顺序命名。而在分割区域四周将出现一个边框线 ,如果这 个边框线呈黄色显示,则表示该分割区域正被选中 ,若分割区域框 线显示为蓝色实线,则表示该区域是由用户画出的 、而且是没有选 中的分割区域;若分割区域框线显示为蓝色虚线 ,则表示这个分割 区域是由 ImageReady自动产生的分割区域。(3) 继续进行图像分割,把图像分割成如图 20.10 所示的 3个区域 。这样 ,输出此图像文件后,就可分 3个文件保存,在网络上传输时,可分 开传输,从而加快了图像传输速度。
![Page 16: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/16.jpg)
(4) 在工具箱中选择【切片选择工具】,然后单击分割区域可选择
切片。按下 Shift 键单击分割区域,可选择多个切片,或者取消
已选择的多个切片。按下 Ctrl 键,可在【切片选择工具】和【
切片工具】之间切换。
(5) 选择某个切片后,按下鼠标拖动即可移动切片。
创建切片以后,可以利用菜单栏中的【切片】菜单对切片进行编辑,【切片】
菜单如图 20.11 所示。
![Page 17: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/17.jpg)
20.3 图 像 映 射
ImageReady 提供了一个图像映射工具,使用此工具可以在图像中画出一个热
区,热区可以是图像上的圆形、多边形或矩形区域,通过它们把图像上的某一块
区域超级链接到一个 URL 上。本节将简单介绍如何创建图像映射。
20.3.2 【图像映射】面板
20.3.1 图像映射工具
20.3.3 创建图像映射
![Page 18: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/18.jpg)
ImageReady 在工具箱中提供了一个图像映射工具组,如图 20.15所示,此工
具组包含【矩形图像映射工具】、【圆形图像映射工具】、【多边形图像映射工
具】和【图像映射选择工具】 4 个工具 ,其中前三个工具主要用于设置不同形状
的热区,最后一个工具用于选择已经设置的热区。
20.3.1 20.3.1 图像映射工具图像映射工具
![Page 19: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/19.jpg)
只有在使用图像映射工具设置热区以后才可以使用【图像映射】 面板,否则【图像映射】面板呈灰色不可用状态。图 20.16所示的【图像映射】面板中各个选项功能如下: ● 【名称】:可以在此设置热区名称,如果不设置,系统会提供默 认的名称,为图像映射 _热区编号。 ● URL:在此文本框中输入网址,创建超级链接。
20.3.2 20.3.2 【图像映射】面板【图像映射】面板
![Page 20: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/20.jpg)
● Target :此文本框必须在 URL 栏中键入网址之后才会置亮,用于设置
链接目标网址的网页属性。
● Alt :此文本框用来输入关于热区的注释性文字。
● 尺寸:在此选项组中可以设置热区的尺寸。如果创建的是矩形热区,
其中 X、 Y项是设置矩形区域左上角的坐标值, W 、 H则是设置矩形区域
的高和宽。如果创建的是圆形热区, X、 Y项是设置圆心的坐标值,
而半径项则是用来设置圆形热区的半径值。
![Page 21: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/21.jpg)
单击【图像映射】面板右上角的小三角可以打开如图 20.17所示的菜单,功能如下: ● 【停放到调板窗】:单击此命令可以把【图像映射】面板停放到 调板窗中。 ● 【隐藏选项】 /【显示选项】:单击此命令可隐藏或显示【图像映 射】面板的附加选项面板。 ● 【删除图像映射区域】:选中一个或多个热区后,单击该命令可 将其删除,也可以通过按下 Delete 键进行删除。 ● 【复制图像映射区域】:选中一个或多个热区后,单击该命令可 复制出选中的热区。另外,使用【图像映射选择工具】,在按下 Alt 键的同时拖动热区也可实现复制操作。 ● 【提升基于图层的图像映射区域】:主要用于提升基于图层的图 像映射区域。
![Page 22: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/22.jpg)
下面介绍使用图像映射工具设置热区的操作。 (1) 首先制作一张图像,如图 20.18所示。 (2) 现在为图 20.18中的每个按钮设置一个热区。在工具箱中选择【 矩形图像映射工具】,然后在图像窗口中的每个按钮上拖曳拉 出一个矩形热区,效果如图 20.19所示。 (3) 绘制出多个热区后,要选择某个热区,可以在工具箱中选择【 图像映射选择工具】,然后单击要选中的热区,按下 Shift 键单 击可选中多个热区。当前选中的热区线条颜色显示为深红色, 四周有 8个控制点,未选中的热区线条颜色显示为青色。
20.3.3 20.3.3 创建图像映射创建图像映射
![Page 23: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/23.jpg)
(4) 如果要移动热区,需要先在工具箱中选择【图像映射选择工具】, 然后在热区中按下鼠标拖动。或在选中矩形、圆形、多边形这 3种图 像映射工具的情况下,按下 Ctrl 键在热区上按下鼠标拖动 ,都可移 动热区。(5) 如果要改变热区大小,可以移动光标至热区控制点上 ,光标变成双 箭头时按下鼠标拖动即可。另外 ,还可在【图像映射面板】中的【 尺寸】选项组中设置参数。(6) 当在一个按钮图像设置了热区后,就可以为热区设置超链接地址。 打开【图像映射】面板,在 URL下拉列表框中输入链接网址,在 Target
下拉列表框中选择打开网页的方式,在 Alt文本框中输入超链接的提 示文字。(7) 设置完热区后,如果要将它们应用到 Dreamweaver 等网页编辑的软件 中,则还需将它们导出为 GIF 格式的图像文件。
![Page 24: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/24.jpg)
20.4 制 作 动 画
动画已经成为网页中不可缺少的一个重要组成部分,它比静态图像更具有宣传效果,更容易吸引浏览者的注意力,成为目前网页上使用最广泛的广告手段。 下面举一个具体例子来说明动画制作的基本过程。在本例中,将把“新闻报导”的文字制作成一个动画,这些字以打字效果一一显示出来。操作步骤如下: (1) 在 ImageReady 窗口中选择【文件】 |【新建】命令建立一个新文 件,图像大小定为 500 像素×150 像素。
![Page 25: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/25.jpg)
(2) 在图像窗口中输入“新”字,并设置其字体及颜色,并将图层“新”和 “背景”设置为可见,如图 20.20 所示。(3) 在【动画】面板上单击【复制当前帧】按钮。此时,在【动画】面 板中多了一帧图像,并自动命名为 2 ,如图 20.21 所示。(4) 在【图层】面板中将图层“新”设置为不可见,然后右击该层,在弹 出的菜单中选择【复制图层】命令,复制后的图层“新 副本”将出现 在原文本层的上方,将该层设置为可见,并将文字改为“新闻”,如 图 20.22 所示。
![Page 26: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/26.jpg)
(5) 重复第 4步的操作,在【图层】面板中将“背景”图层设为可见,其他 图层都不可见,右击文本层“新闻”,在弹出的菜单中选择【复制图 层】命令,复制后的图层“新闻 副本”将出现在原文本层的上方,将 该层设置为可见,并将文字改为“新闻报”,如图 20.23所示。(6) 重复第 4步的操作,在【图层】面板中将“背景”图层设为可见,其他 图层都不可见,右击文本层“新闻报”,在弹出的菜单中选择【复制 图层】命令,复制后的图层“新闻报 副本”将出现在原文本层的上 方,将该层设置为可见,并将文字改为“新闻报导”,如图 20.24 所 示。
![Page 27: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/27.jpg)
(7) 重复第 4步的操作,在【图层】面板中将“背景”图层设为可见,其他
图层都不可见,如图 20.25所示。
(8) 在【动画】面板中单击【选择第一帧】按钮 ,回到第一帧,单击
【播放 /停止动画】按钮 ,开始预览动画效果。
(9) 根据动画效果的要求,可以单击【动画】面板中帧下方的帧延迟值
,弹出帧延迟定义快捷菜单,如图 20.26所示,选择一个选项即可。
注意: 该例制作成功的关键是必须正确设置每一帧显示对应的图层,即第一帧显示图层“背景”和“新”,第二帧显注意: 该例制作成功的关键是必须正确设置每一帧显示对应的图层,即第一帧显示图层“背景”和“新”,第二帧显示示 “ “ 背景”和“新闻”,第三帧显示“背景”和“新闻报”,第四帧显示“背景”和“新闻报导”,第五帧显示背景”和“新闻”,第三帧显示“背景”和“新闻报”,第四帧显示“背景”和“新闻报导”,第五帧显示“背景”,如“背景”,如 果设置错误,在某个帧里面显示了不对应的图层,就不会形成动画效果。果设置错误,在某个帧里面显示了不对应的图层,就不会形成动画效果。
![Page 28: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/28.jpg)
下面再制作一个图像切换的例子。在本例中,将出现一种 3个不同形象的动物,
在它们之间做出渐变的效果。用户可以根据这个原理制作出图像切换的广告条。
(1) 在 Photoshop 中制作好图像,共 3个图层,每个图层对应动物的
一种形象,如图 20.27所示。
(2) 此时的【动画】面板只显示一个帧,为了将每个图层分别作为
一个帧,选择【动画】面板菜单中的【从图层建立帧】命令,
如图 20.28所示。
![Page 29: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/29.jpg)
(3) 选中第 1帧,单击【动画帧过渡】按钮,弹出【过渡】对话框,可以
对拟合的参数进行设置,如图 20.29所示。下面对其选项进行介绍:
● 【过渡】:选择拟合的对象,共有【选区】、【下一帧】和【最后一
帧】 3个选项,在此选择【下一帧】。
● 【要添加的帧】:设置在两个拟合的帧之间要增加的帧数,帧数越多
,过渡越自然,在此输入 5。
●【参数】:设置拟合参数。
![Page 30: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/30.jpg)
(4) 拟合后的【动画】面板如图 20.30 所示,可见在原来的第 1帧与第 2帧
之间多出了 5 帧,原来的第 2帧变成了第 7 帧。
(5) 选择第 7 帧,重复第 (3) 步操作,使第 2帧与第 3 帧之间产生过渡。
(6) 单击【播放 /停止动画】按钮,预览动画效果,如图 20.31 所示。
(7) 选择【文件】 |【预览】 | iexplore 命令,把图形显示在 Web浏览器
中,并附带显示该动画的 HTML代码,如图 20.32 所示。
![Page 31: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/31.jpg)
20.5 优化和输出图像
网页在网络上传输时,较大的图片将使网页下载时间过长,这就产生了一个问题,如何在不影响图像品质的情况下将图像进行最大程度压缩,成为最优化图像,提高网页浏览速度。 在 ImageReady 中最优化图像的操作,可在图像窗口中完成,但在最优化图像时必须配合使用【优化】和【颜色表】面板。在讲解最优化图像之前,先了解一下【优化】和【颜色表】面板的基本功能。
2. 【颜色表】面板
1. 【优化】面板
![Page 32: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/32.jpg)
在【优化】面板中,可以设置图像文件格式、色彩显示方式、颜色混合方式、颜色数量、是否保持透明、透明区域以哪一种颜色取代和下载时显示方式等参数。在该面板中,可以选择 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所示,各项含义如下:
![Page 33: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/33.jpg)
● A :【格式】下拉列表框 。在这个下拉列表框中可以选择优化图像的 格式。● B:【深度减低】下拉列表框。通过这个下拉列表框可以选择哪些颜 色作为 GIF中的颜色,有 9个颜色方案选项,如果选择【自定】选项, 可以在【颜色表】面板中设置颜色。● C :【方法】下拉列表框。在包含连续色调 (尤其是颜色渐变 )的图像 中 ,设置仿色可以防止出现颜色过渡不均匀的现象。选项中后面的 3 种模式是仿色算法的不同运算方式。当选择【扩散】选项时还可以在 右侧的【仿色】中设置扩散程度。当图像中存在 Alpha 通道的时候 , 还可以按下【仿色】后面的按钮,设置 Alpha 通道的扩散程度。
![Page 34: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/34.jpg)
● D:选中【透明区域】复选框后,可以在【透明度仿色】下拉列表框 中选取对部分透明的像素应用仿色的方法。选择【无透明度仿色】选 项即不对图像中部分透明的像素应用仿色。【扩散透明度仿色】选项 表示应用与【图案透明度仿色】选项相比不太明显的随机图案,仿色 效果在相邻像素间扩散。选择该选项后可以在下方的【仿色】中设置 应用于图像的仿色量。【图案透明度仿色】选项表示对部分透明的像 素应用方块图案。【杂色透明度仿色】选项表示应用与【扩散透明度 仿色】选项相似的随机图案,但不在相邻像素间扩散图案。● E:【交错】复选框。选中该选项后,在整个图像文件的下载过程中 ,可以在浏览器中以低分辨率显示图像。
![Page 35: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/35.jpg)
● F:【使用统一的颜色表】复选框。选中该选项可对所有翻转状态使 用同一颜色表。● G:单击该箭头图标可以将当前面板中的参数设置创建成一个可执行 文件 .exe ,以便应用到一个图像或批处理的图像中。● H:【颜色】下拉列表框。可以设置 GIF 格式的颜色数,范围是 2~ 256。● I :【 Web 对齐】菜单。指定将颜色转换为最接近的 Web 调板颜色 的容差级别,值越大,转换的颜色越多。
![Page 36: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/36.jpg)
● J:【杂边】菜单。若要使完全透明的像素透明并将部分透明的像素 与一种颜色相混合,选中【透明区域】复选框,并在该菜单中选择一 种杂边颜色;若要使透明度大于 50% 的所有像素完全透明并使透明 度小于或等于 50% 的所有像素完全不透明,选中【透明区域】,并 从【杂边】菜单中选取【无】;若要用选中的颜色填充完全透明的像 素并将部分透明的像素与同一种颜色相混合,可在该菜单中选择一种 杂边颜色,并取消选择【透明区域】复选框。
![Page 37: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/37.jpg)
● K:【损耗】文本框。用于设置 GIF 格式的压缩比,这里的压缩是有损
压缩,即参数值越大图像的文件尺寸就越小,但图像的质量就越差。
如果优化的图像包含 Alpha 通道,可按下【损失】参数后面的 按钮
打开【修改损耗设置】对话框设置 Alpha 通道的压缩比,如图 20.38所
示,在对话框中可以在【通道】下拉菜单中选择通道,通过滑杆或者
在【最小化】和【最大化】参数中设置 Alpha 通道的压缩比。
![Page 38: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/38.jpg)
● A :【格式】下拉列表框。在这个下拉列表框中可以选择优化图像的 格式。● B:【品质】下拉列表框。用于设置图像的品质级别,也可在其右侧的 【品质】文本框中直接输入品质值。使用高品质设置比使用低品质设 置生成的文件大。当图像中包含了 Alpha 通道,可以按下【品质】文本 框后面的按钮,对 Alpha 通道进行压缩设置。● C :【连续】复选框。选中该复选框后,可以使用户在整个图像下载完 成之前,在浏览器中看到低分辨率的图像,功能类似于 GIF【优化】面 板中的【交错】选项。● D:【保留 ICC配置文件】复选框。选中该复选框可以将图片的 ICC 配 置文件与文件保留在一起。 ICC 配置文件主要用于在某些浏览器中进 行色彩校正。
![Page 39: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/39.jpg)
● E:【添加元数据】。选中该选项可添加来自数码相机的元数据。● F:【模糊】菜单。用于指定图像的模糊量。该选项可以产生与高斯 模糊滤镜相同的效果。● G:【杂边】菜单。用于指定图像中透明像素的填充色。图像中完全 透明的像素由选中的颜色填充,部分透明的像素与选中的颜色相混 合。● H:【优化的】复选框。选中该选项后可以以最好的方式优化图像, 文件较小,一般设置为选中。提示: GIF、 JPEG和 PNG格式的特点,参 见附录B。
![Page 40: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/40.jpg)
【颜色表】面板主要用于显示图像中所使用的颜色数目,如图 20.39所示。只
有当在【优化】面板中设置为 GIF 或 PNG-8的图像文件格式 ,并且在图像窗口
选择 【优化】 、【双联】或【四联】的窗口模式时 ,在【颜色表】面板中才会
显示出当前图像的颜色表格。若按下 Shift 键再单击【颜色表】面板中的颜色,
则可选取多个颜色。当用户在【优化】 面板中重新设颜色数目时,该面板中的颜
色数目也会产生相应的变化。
2. 2. 【颜色表】面板【颜色表】面板
![Page 41: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/41.jpg)
图 20.1 ImageReady 工作界面
![Page 42: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/42.jpg)
图 20.2 图像窗口
图像显示模式
文件缩放级别 图像信息
![Page 43: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/43.jpg)
图 20.3 工具箱中的切片工具组
![Page 44: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/44.jpg)
图 20.4 【切片】面板
![Page 45: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/45.jpg)
图 20.5 选择【无图像】类型时的【切片】面板
![Page 46: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/46.jpg)
图 20.6 【切片】面板菜单
![Page 47: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/47.jpg)
图 20.7 【划分切片】对话框
![Page 48: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/48.jpg)
图 20.8 分割图像
![Page 49: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/49.jpg)
图 20.9 【样式】下拉列表框
![Page 50: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/50.jpg)
图 20.11 【切片】菜单
![Page 51: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/51.jpg)
图 20.12 【将优化结果存储为】对话框
![Page 52: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/52.jpg)
图 20.13 【切片】选项组
![Page 53: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/53.jpg)
图 20.14 【存储文件】选项组
![Page 54: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/54.jpg)
图 20.15 工具箱中的图像映射工具组
![Page 55: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/55.jpg)
图 20.16 【图像映射】面板
![Page 56: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/56.jpg)
图 20.17 【图像映射】 面板菜单
![Page 57: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/57.jpg)
图 20.18 制作好的按钮图像
![Page 58: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/58.jpg)
图 20.19 给图像设置热区
![Page 59: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/59.jpg)
图 20.20 输入“新”文字
![Page 60: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/60.jpg)
图 20.21 复制当前帧
![Page 61: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/61.jpg)
图 20.22 设置第 2 帧的效果
![Page 62: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/62.jpg)
图 20.23 设置第 3 帧的效果
![Page 63: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/63.jpg)
图 20.24 设置第 4 帧的效果
![Page 64: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/64.jpg)
图 20.25 设置第 5 帧的效果
![Page 65: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/65.jpg)
图 20.26 设置帧延迟值
![Page 66: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/66.jpg)
图 20.27 【图层】面板
![Page 67: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/67.jpg)
图 20.28 【动画】面板
![Page 68: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/68.jpg)
图 20.29 【过渡】对话框
![Page 69: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/69.jpg)
图 20.30 拟合后的【动画】面板
![Page 70: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/70.jpg)
图 20.31 预览动画
![Page 71: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/71.jpg)
图 20.32 在 Internet Explorer 中预览动画
![Page 72: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/72.jpg)
图 20.33 选择 GIF 格式时的【优化】面板
![Page 73: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/73.jpg)
图 20.34 选择 JPEG 格式时的【优化】面板
![Page 74: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/74.jpg)
图 20.35 选择 PNG-8 格式时的【优化】面板
![Page 75: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/75.jpg)
图 20.36 选择 PNG-24 格式时的【优化】面板
![Page 76: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/76.jpg)
图 20.37 选择 WBMP 格式时的 【优化】面板
![Page 77: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/77.jpg)
图 20.38 【修改损耗设置】对话框
![Page 78: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/78.jpg)
图 20.39 【颜色表】面板
![Page 79: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/79.jpg)
图 20.40 3 种不同格式的图像
![Page 80: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/80.jpg)
图 20.41 3 种不同的颜色数目设置下的 GIF 图像
![Page 81: 第 20 章 Web 图像与动画设计](https://reader033.vdocuments.net/reader033/viewer/2022061406/56814084550346895dac09af/html5/thumbnails/81.jpg)
20.6 上 机 指 导
20.6.2 制作图像切片
20.6.1 制作跑动的运动员
在前面小节里介绍了动态文字效果制作,下面举一个例子,介绍一下如何制作动态的图像效果,步骤如下:
在制作主页时,可以将一张漂亮的图片作为首页,然后在上面制作切片,既可以加快网页的下载速度,又可以在切片上创建超链接,分别链接到主页的各个分类页面。