《PhotoshopCS2基础教程与上机指导》课程教学资源（PPT课件讲稿）第20章 Web图像与动画设计

第20章Web图像与动画设计 教学提示:当今 nternet盛行,网页制作爱好者越来越多,各个软 件公司都纷纷加强了图像处理软件的网页制作功能。作为网页设计者 眼中的高效工具, Photoshop也扩展了其Web功能,捆绑了一个功能强 大的Web制作软件 Image Ready Image Ready足以完成最复杂的 Web制作任务,从图像切割工具到多种多样的按钮变换样式,从图像 优化到功能强大的Gi动画制作,为Web图像处理提供了完美的解决方 案 教学目标:通过本章的学习,使读者掌握制作Web图像和动画的 基本方法

第20章 Web图像与动画设计 教学提示：当今Internet盛行，网页制作爱好者越来越多，各个软 件公司都纷纷加强了图像处理软件的网页制作功能 。作为网页设计者 眼中的高效工具，Photoshop也扩展了其Web功能 ，捆绑了一个功能强 大的 Web制作软件 —— ImageReady。ImageReady 足以完成最复杂的 Web 制作任务 ，从图像切割工具到多种多样的按钮变换样式，从图像 优化到功能强大的Gif动画制作，为Web 图像处理提供了完美的解决方 案。 教学目标：通过本章的学习，使读者掌握制作Web图像和动画的 基本方法

20.1 imagEready0s简介 由于 I mageReady和 Photoshop有众多相似之处,其操作也基本相同,因此, I makeReady与 Photohsop相同的功能,在本章中将不再重复,相关内容请参见前 面章节的相关部分,本章主要介绍 I makeReady软件所独有的功能。 20.1.1| mage Ready0s简介 20.1.2 imagEready cs的操作界面

20.1 ImageReady CS简介 由于ImageReady和Photoshop有众多相似之处，其操作也基本相同，因此， ImageReady与Photohsop相同的功能，在本章中将不再重复，相关内容请参见前 面章节的相关部分，本章主要介绍ImageReady软件所独有的功能。 20.1.2 ImageReady CS的操作界面 20.1.1 ImageReady CS简介

20.1.1 ImageReady CS简介 Adobe I mageReady CS是与 Photoshop0s捆绑销售的图像处理软件,同 Photoshop一样具有图像处理功能。虽然 Photoshop CS功能已经非常强大,也 具有处理网页图像的能力,但是在网页图像处理功能方面,它没有 I makeReady 专业、全面,比如在 Photoshop中无法制作悬停按钮、网页动画、设置超链接 等网页元素,而这一切在 I mage Ready中都能轻松做到。因此, I mageReady是对 Photoshop Web功能的强有力的补充,它和 Photoshop的无缝结合使其他图像处 理软件难望其项背。而且由于 I mage Ready和 Photoshop的操作方法非常相似 使众多熟悉 Photoshop的设计师能够在最短的时间里掌握它的使用方法,大大 简化了学习过程

Adobe ImageReady CS是与Photoshop CS捆绑销售的图像处理软件，同 Photoshop一样具有图像处理功能。虽然Photoshop CS功能已经非常强大，也 具有处理网页图像的能力，但是在网页图像处理功能方面，它没有ImageReady 专业、全面，比如在Photoshop中无法制作悬停按钮、网页动画、设置超链接 等网页元素，而这一切在ImageReady中都能轻松做到。因此，ImageReady是对 Photoshop Web功能的强有力的补充，它和Photoshop的无缝结合使其他图像处 理软件难望其项背。而且由于ImageReady和Photoshop的操作方法非常相似， 使众多熟悉Photoshop的设计师能够在最短的时间里掌握它的使用方法，大大 简化了学习过程。 20.1.1 ImageReady CS简介

20.1.2 imagEready CS的操作界面 启动 mage Ready cS有以下几种方式 在【开始】菜单的【程序】中选择 Adobe ImageReady CS命令。 在 Photoshop CS中,可以单击 Photoshop工具箱中的按v 进入 mageReady工作界面。 ●在 Photoshop CS中,也可以按otrl+ Shift+M键启动 I mageReady。 启动后窗口组成如图20.1所示。y 1.图像窗口 2.面板 3.工具箱

20.1.2 ImageReady CS的操作界面 启动ImageReady CS有以下几种方式： ● 在【开始】菜单的【程序】中选择Adobe ImageReady CS命令。 ● 在Photoshop CS中，可以单击Photoshop工具箱中的 按钮， 进入ImageReady工作界面。 ● 在Photoshop CS中，也可以按Ctrl+Shift+M键启动ImageReady。 启动后窗口组成如图20.1所示。 2. 面板 1. 图像窗口 3. 工具箱

1、图像窗口 I mage Ready共有原稿、优化、双联和四联4种不同图像窗口显示方式。 要切换窗口显示模式,只要单击窗口上方的标签名称即可,如图20.2所示

ImageReady共有原稿、优化、双联和四联4种不同图像窗口显示方式。 要切换窗口显示模式 ，只要单击窗口上方的标签名称即可，如图20.2所示。 1. 图像窗口

2.面板 与 Photoshop相比, I mageReady多了以下几个面板: 切片:可以将图像分割成几个小块,提高网页下载速度。 图像映射:把图像上的某一块区域超级链接到一个URL上。 优化:设置图像优化参数。y ●颜色表:通过这个面板可以控制颜色表的颜色,主要用于图像优 化 ●动画:制作Gif动画

与Photoshop相比，ImageReady多了以下几个面板： ● 切片：可以将图像分割成几个小块，提高网页下载速度。 ● 图像映射：把图像上的某一块区域超级链接到一个URL上。 ● 优化：设置图像优化参数。 ● 颜色表：通过这个面板可以控制颜色表的颜色，主要用于图像优 化。 ● 动画：制作Gif动画。 2. 面板

3工具箱 ImageReady工作界面中的工具箱与 Photoshop中的工具箱相比少了许多 图像绘制工具,如路径工具、模糊工具与多边形工具等。但是 ImageReady多 了一个新工具图像映射·使用此工具可以给阅像的某个区域设置超 级链接,从而达到跳至另一个网页的目的

3. 工具箱 ImageReady工作界面中的工具箱与Photoshop中的工具箱相比少了许多 图像绘制工具，如路径工具、模糊工具与多边形工具等。但是ImageReady多 了一个新工具——图像映射 ，使用此工具可以给图像的某个区域设置超 级链接，从而达到跳至另一个网页的目的

20.2切片 切片是图像里的矩形区域,通过使用切片工具组可以将原图分割成几个小的 切片,成为单个的功能模块。将图像存为Web页时,每个切片作为一个独立的 文件存储,文件中包含切片自己的设置、颜色调板、链接及动画效果,这样做的 最大作用是可以进行局部图像优化,从而加快网页下载速度。另外,切片还可用 于在Web页中创建链接和动画,丰富了网页的制作手段。 20.2.1切片工具组 20.2.2【切片】面板 20.2.3创建切片

20.2 切 片 切片是图像里的矩形区域，通过使用切片工具组可以将原图分割成几个小的 切片，成为单个的功能模块。将图像存为 Web 页时，每个切片作为一个独立的 文件存储，文件中包含切片自己的设置、颜色调板、链接及动画效果，这样做的 最大作用是可以进行局部图像优化，从而加快网页下载速度。另外，切片还可用 于在Web页中创建链接和动画，丰富了网页的制作手段。 20.2.2 【切片】面板 20.2.1 切片工具组 20.2.3 创建切片

20.2.1切片工具组 在 Photoshop和 I I mage Ready的工具箱中都有切片工具组,如图20.3所示。切 片工具组由两个工具组成 ●【切片工具】:用于对图像进行分割操作。 ●【切片选择工具】:在对图像进行分割后,可以使用该工具选择 切片

在Photoshop和ImageReady的工具箱中都有切片工具组，如图20.3所示。切 片工具组由两个工具组成： ● 【切片工具】：用于对图像进行分割操作。 ● 【切片选择工具】：在对图像进行分割后，可以使用该工具选择 切片。 20.2.1 切片工具组

20.2.2【切片】面板 当使用切片工具制作好分割区域后,如需要对分割区域进行编辑,设置切片 的相关参数,就需要使用【切片】面板。单击【窗口】|【切片】命令可打开4 【切片】面板,然后单击【切片】标签上的双向小三角,打开附加选项面板,如 图20.4所示。 ●【类型】:用来设置分割区域的类型。选择【图像】选项,在网 页中1会显示当前区域中的图像内容;选择【无图像】选项,在网 页中不显示分割区域中的图像内容,而显示在【切片】面板的【 文字】文本框中设置的文本内容,如图20.5所示

当使用切片工具制作好分割区域后，如需要对分割区域进行编辑，设置切片 的相关参数，就需要使用【切片】面板。单击【窗口】|【切片】命令可打开 【切片】面板，然后单击【切片】标签上的双向小三角，打开附加选项面板，如 图20.4所示。 ●【类型】：用来设置分割区域的类型。选择【图像】选项，在网 页中1会显示当前区域中的图像内容；选择【无图像】选项，在网 页中不显示分割区域中的图像内容，而显示在【切片】面板的【 文字】文本框中设置的文本内容，如图20.5所示。 20.2.2 【切片】面板