《图像处理及网页制作》课件第10章.ppt

1、1 1第10章 ImageReady简单应用10.1 使用使用ImageReady10.2 切片与导出切片与导出10.3 创建翻转效果创建翻转效果10.4 创建动画创建动画本章小结本章小结2 2ImageReady是嵌入Photoshop中的一款应用软件，通过ImageReady，可完成Web图像处理和动画制作。ImageReady的主要操作包括对图像进行切片、映射、翻转和动画的处理，本章主要介绍利用ImageReady的“切片”功能和“动画”功能制作网页页面和简单动态图像的方法。3 3使用ImageReady可以创建图像切片、图像映射、翻转效果和动画，并且可对图像的不同部分采用不同的优化设置

2、，从而更好地控制文件的大小。通过使用数据驱动图像，可以根据模板替换图像内容。ImageReady结合了部分Photoshop的图像处理功能和动画制作功能，是一个很方便的工具。10.1 使用使用ImageReady4 410.1.1 ImageReady简介Photoshop自带了一个Web图像处理和动画制作工具ImageReady。在设计网页时，两个工具互相配合，各司其职。Photoshop主要用于创建在Web上的静态图像，而ImageReady则用于高级Web处理和创建动态Web图像(如动画和翻转)。ImageReady的主要功能有创建和管理切片、图像映射、制作翻转和动画，并可对图像进行We

3、b优化。Photoshop和ImageReady可以很方便地进行相互切换，只需单击工具箱底部的切换按钮，或按快捷键Ctrl+Shift+M即可(如图10-1所示)。5 5图10-1 ImageReady切换按钮6 6注意：由于Photoshop和ImageReady是对同一幅图像进行处理的，因此一个程序中所做的修改会反映到另一个程序中。7 710.1.2 ImageReady 的桌面环境ImageReady桌面的风格与Photoshop非常相似，很多操作也是一致的，只是菜单栏中比Photoshop多了一组“切片”菜单，而“工具箱”中的工具则相对要少一些，调板窗口也更少。通过“窗口”菜单分别执行

4、“动画”、“图像映射”和“切片”命令时，可在桌面底部新增“动画”、“图像映射”和“切片”3个调板。图10-2所示为ImageReady的桌面环境。8 8图10-2 ImageReady 的桌面环境9 910.1.3 查看图像与查看图像信息1.查看图像在ImageReady中打开图像时，文档窗口中同时会显示4个视图(如图10-3所示)，分别是原稿、优化、双联和四联。通过文档顶部的选项卡可在这4个视图之间切换。10 10 图10-3 ImageReady的文档窗口11 11(1)“原稿”视图：显示未优化的图像。(2)“优化”视图：显示经优化设置的图像。(3)“双联”视图：并排显示图像的两个版本。(

5、4)“四联”视图：同时显示图像的四个版本。12 122.查看图像信息(1)缩放比例：单击文档窗口左下部的”缩放级别”区域，弹出一组菜单，从中可选择图像的显示比例，或者对图像进行缩放。(2)图像信息：单击文档窗口下部的“图像信息”，弹出一组菜单，在从中选择所要显示的信息，如原稿/优化文件大小、优化信息、图像尺寸等，还可以显示在不同网络速度时的估计下载时间。在“双联”和“四联”视图中，每个视图下方的注释区域也提供了相关的优化信息。13 13切片就是将图像切割成若干个矩形区域，在这个区域上可以创建链接、翻转和动画，在保存的时候，每个切片各自保存为一个文件。切片一旦定义好后，就可以有自己的优化设置、调

6、色板、URL、滚动及动画效果。切片可以用来定义网页上典型的切片式导航条、选项条、信息区和图片区等。在处理含有复杂图像及有文字和混合图像时，用切片还可以提高下载速度和图像质量。比如说：可以使用切片，将图像的一部分以GIF格式优化，而另一部分以JPEG格式优化，这样可以获得更快的下载速度。10.2 切切片片与与导导出出14 14切片有3种类型：用户切片、基于图层的切片和自动切片。用户切片是用切片工具创建的，基于图层的切片当然是从图层转化而来的，而自动切片是ImageReady自动生成的，用来填充为被定义为切片的部分。15 1510.2.1 使用切片工具“切片工具”用于创建用户切片，操作步骤如下：(

7、1)创建切片(如图10-4所示)。从工具箱中选择“切片工具”，在图像中拖出一个矩形框，将要创建切片的区域包括进去。默认情况下所创建的用户切片其边缘显示为黄色的实线，而自动切片的边缘为蓝色的虚线。自动切片区域呈半透明显示。(2)修改切片大小。如果对切片的区域不满意，可以调整其大小，自动切片区域会根据调整结果重新划分。将鼠标放到切片边缘上，此时该切片区边缘显示为黄色实线，其上还会显示八个控制点。将鼠标放到切片边缘，光标呈或形状时，按下鼠标左键进行拖动，即可调整其大小。16 16(3)移动切片。要改变切片的位置，可在切片区域上按下鼠标左键，直接进行拖动。(4)设置切片工具选项。在“切片工具”的选项栏

8、中，“样式”中包括以下选项：“正常”：通过拖移确定切片的大小和比例。这是默认选项。“固定长宽比”：拖移时保持切片长宽比不变。“固定大小”：固定切片区域的大小。17 17图10-4 “创建切片”示意图18 1810.2.2 使用切片选择工具“切片选择工具”用于选择不同的切片区域，其操作步骤如下：(1)选择一个切片。要选择其他的切片区域，在工具箱中选择“切片选择工具”并直接在切片区域上单击；默认情况下，被选的切片区域边缘为黄色的实线，而未被选中的切片的边缘为蓝色的实线。(2)选择多个切片。使用切片选择工具并按Shift键，可选择连续或不连续的多个切片区域。19 19图10-5 “切片”调板2020

9、(3)隐藏自动切片。单击选项栏上的“隐藏自动切片”按钮可以隐藏自动切片。21 2110.2.3 使用“切片”调板ImageReady中提供了一个”切片”调板，可用于设置切片在Web浏览器中出现的方式。默认情况下，连续单击该调板的名字两次，会得到一个完整的“切片”调板，或者从“切片”调板的选项菜单中选择“显示选项”命令，也可以打开“切片”调板(如图10-5所示)。1.设置调板参数在“切片”调板中可设置如下参数：“类型”：切片又分为图像和无图像两种类型，“图像”切片包含图像数据，“无图像”切片只包含纯色或者HTML文本。设置为“无图像”时，在ImageReady中看不到什么变化，只有用浏览器预览时

10、才能看到其不同。2222从菜单中选择“文件预览Internet Explorer”命令也可以进行预览，快捷键Ctrl+Alt+P则可在图像的下方列出有关图像的一些信息以及HTML源代码。“名称”：给切片命名，默认名为原图像名+切片编号，如未标题-1_09。“URL”：用于设置切片区域链接的Internet地址，如http:/。“Target”：指定载入帧的URL。2323“Alt”：指定浏览器替换文本。替换文本是当浏览器不支持图像时，用来代替图像的文本。“尺寸”：用于精确地设置切片的大小，其单位是像素。在X和Y中分别指定切片的宽和高；若选中“约束比例”选项，修改尺寸时自动会保持长宽比不变。“单

11、元格对齐”：可设置单元格水平和垂直对齐。“背景”：设置图像的透明部分或者“非图像”切片区域的颜色。“状态栏信息”：指定在浏览器中选中切片时，状态栏中出现的提示信息。24242.使用“切片”调板选项菜单在“切片”调板的选项菜单中，可以执行以下功能：“复制切片”：执行此命令，会弹出“复制切片”对话框，若将“位置”设置为“原稿的上面”，则复制后的切片如图10-6所示。2525图10-6 “复制切片”对话框及复制效果2626“划分切片”：执行此命令，会弹出“划分切片”对话框，在对话框中可以指定切片的水平和垂直划分数，或者切片划分的大小。若将水平和垂直的切片数都设置为2，则切片划分的效果如图10-7所示

12、。“删除切片”：将选中的切片删除。另外，执行“拷贝切片”和“粘贴切片”命令可以实现切片的拷贝和粘贴。2727图10-7 “划分切片”对话框及切片划分效果282810.2.4 优化和导出图像制作完图像或Web页面后，在ImageReady中可使用“优化”调板来精确设定应如何导出图像或Web页面。1.针对 Web 优化图像(1)在ImageReady中，打开“优化”调板，如图10-8所示。(2)在顶部的选项卡选择一种显示选项，可供选择的有“优化”、“双联”或“四联”。如果选择“四联”，单击想要优化的预览，结果如图10-9所示。2929图10-8 “优化”调板3030图10-9 四联“优化”调板31

13、 31(3)(可选)如果图像包含多个切片，选择想要优化的一个或多个切片。(4)从“预设”菜单中选择一个预设优化设置，或设置个别优化选项。可用的选项将随选择的文件格式不同而发生变化，如图10-10所示。(5)如果在“四联”模式下工作，从“优化”菜单中选择“重组视图”，可在更改优化设置后自动生成一个品质较低的图像版本。(6)对优化设置进行微调，直至对图像品质和文件大小满意为止。如果图像包含多个切片，确保优化所有切片。3232图10-10 从“预设”中选择优化设置示意图33332.导出图像执行下列操作之一：(1)执行“文件存储优化结果”命令，一步完成存储优化结果。(2)执行“文件将优化结果存储为”命

14、令，以不同的文件名存储文件的备用版本(如图10-11所示)。3434图10-11 “将优化结果存储为”对话框3535在“将优化结果存储为”对话框中，应执行以下操作：输入一个文件名，并为生成的文件选择存储位置。选择“保存类型”选项，以指定要保存文件的类型，可选类型包括“HTML和图像”、“仅限图像”和“仅限HTML”。(可选)为HTML和图像文件设置输出设置。如果图像包含多个切片，请从“切片”列表中选择一个用于保存切片的选项，可选项包括“所有切片”或“选中的切片”。在ImageReady中，如果存储了切片选区，还可以从列表中选取一个已存储的切片选区。(3)单击“保存”按钮，完成“将优化结果存储为

15、”操作。3636利用翻转效果，在Web页上可以使按钮或图像发生变化。例如，当用户将指针放置在该按钮上或者点击它时，该按钮就会发光；当指针移到页面上面时，页面就会发生变化。并且，还可以管理按钮或图像的状态以及这些状态中的活动。10.3 创建翻转效果创建翻转效果3737要创建翻转，将翻转图像定义为基于图层的切片或基于图层的图像映射。然后，使用 ImageReady 中的“Web内容”调板和“图层”调板，执行以下任何操作来创建不同版本的图形：通过添加或更改图层样式或移动图层来修改图像内容；使用新图层替换图像内容；替换页面上其他位置的图层内容；添加帧，创建翻转动画。3838或者，可以从“样式”调板中选

16、择一个预设翻转样式应用于图像，还可以使用通过其他图形创建的翻转，后者是一种快速而方便的方法。393910.3.1 使用“翻转”调板在ImageReady 中，是利用“Web 内容”调板来跟踪切片及其翻转状态的。使用“Web 内容”调板能够创建和查看图像中的翻转状态以及设置其选项，还能够显示切片、图像映射和动画帧，还可通过显示切片和图像映射跟踪图像中包含翻转效果的各个图素。利用显示动画帧可以很方便地查看图像的哪些状态包含动画。4040执行“窗口Web内容”命令，打开“Web内容”调板，如图10-12所示。“Web 内容”调板上根据切片功能的不同会出现以下图标：41 414242图10-12 “W

17、eb 内容”调板434310.3.2 设置翻转变化在网页中，“翻转变化”功能主要可用于创建页面的导航栏(如图10-13所示)。4444图10-13 选中“状态翻转”4545设置“翻转变化”的操作方法如下：(1)设置一个翻转按钮，在单击其他翻转按钮之前，它一直处于选中状态。(2)创建多个具有“正常”状态的翻转，为按钮指定在未选中时应具有的外观。(3)如果为每个按钮添加新的状态，首先选取“选中”状态选项，并编辑该按钮，以便为其指定“单击”或“选中”时的外观(如图10-14所示)。(4)如果要使一个按钮在第一次载入页面时显示为“选中”，在“Web内容”调板中单击该按钮的“选中”状态两次，并选取“用作

18、默认选中状态”(如图10-14所示)。4646图10-14 “翻转状态选项“对话框4747(5)如果要对每个“选中”状态生成唯一的HTML页，执行“文件输出设置存储 HTML”命令，在打开的对话框中，选择“输出多个HTML文件”(如图10-15所示)，ImageReady将为处于“选中”状态的每个按钮创建单独的页面，然后为每个页面添加相应的内容。4848图10-15 “输出设置”对话框4949动画就是在一段时间内显示的一系列图像或帧。当连续、快速地显示这些帧时，由于视觉暂留现象，会使人产生运动的感觉。动画可以和翻转结合起来，这样，当图像处于不同的翻转状态时，可以显示不同的动画效果。10.4 创

19、创 建建 动动 画画505010.4.1 “动画”调板的使用“动画”调板是ImageReady中用来创建动画的工具，用于创建、查看和设置动画。“动画”调板并不对图像进行特殊的处理，它主要用来控制各个帧播放的次序和时间，是动画的控制中心。至于图像效果，则需要使用其他工具来实现。执行“窗口动画”命令，打开“动画”调板，如图10-16所示。51 51图10-16 “动画”调板5252图10-17 “设置循环计数”对话框5353在“动画”调板底部是按钮区，其中的按钮(从左至右)分别介绍如下。“永远”按钮：单击此按钮可以打开一个“设置循环计数”对话框，用于选择播放次数(如图10-17所示)。“第一帧：单

20、击此按钮可选择动画的第一帧。“上一帧”：单击此按钮可选择上一帧。“播放停止动画”：用于播放或停止动画。“下一帧”：单击此按钮可选择下一帧。5454“过渡”：单击此按钮可以创建一种连续变化的效果，如渐隐效果。“复制当前帧”：单击此按钮可复制所选中的帧。“删除选中帧”：单击此按钮可删除所选中的帧。“动画”调板菜单中主要包含与动画相关的命令(如图10-16所示)。“拷贝帧”：将当前选中的帧拷贝到剪贴板上。“粘贴帧”：选择该命令，会弹出“粘贴帧”对话框，其中各选项说明如下。5555“替换帧”：用粘贴的帧替换选中的帧。“在选区之上粘贴”：将帧中所包含的图层信息粘贴到在“图层”调板上。“在选区前粘贴”：在

21、第一个选中的帧前插入新帧。“在选区后粘贴”：在最后一个选中的帧后插入新帧。“过渡”：过渡帧是在两个现有帧之间自动添加或修改的一系列帧，它可以均匀地改变新帧之间的图层属性(位置、不透明度或效果参数)以创建一种连续变化的效果。使用ImageReady的“过渡”功能可以大大减少制作动画所需要的时间。在打开的“过渡”对话框(如图10-18所示)中有如下选项：5656图10-18 “过渡”对话框5757“过渡”：包括“上一帧”、“下一帧”等选项，在当前帧和此选项指定的帧之间将设置中间帧。“要添加的帧”：用于设置添加中间帧的数量，设置完后单击“好”按钮，即可创建中间帧。“图层”：设置将过渡效果应用于选定的

22、图层还是所有图层。“参数”：用于设置动画中的各帧在变化时的作用对象，包括“位置”、“不透明度”和“效果”选项。5858“反相帧”：反转连续几帧的顺序。(注意：假如要想第2帧排在第3帧后面，可以直接将第2帧拖动到第3帧后。)例10-1 创建一个简单的动画，实现两幅图像的渐隐过渡效果。在“动画”调板中进行以下操作。(1)添加帧。在ImageReady中打开一幅图像，此时“动画”调板会自动添加一个帧；单击“动画”调板底部的“复制当前帧”按钮 或者从调板菜单中选取“新建帧”命令，可在“动画”调板中新增加一个帧，新建的帧是当前帧的副本。5959(2)新建图层。打开另一幅新图像，将它粘贴到本图像中的任何一

23、帧，自动给每个帧都创建一个新的“图层2”；在“图层”调板中，将“图层2”拖到“图层1”的下面，并设置该层为“不可见”。(注意：在新建图层时，要将“动画”调板菜单中的“新建在所有状态/帧中都可见的图层”选项上打上勾，否则只会在选中的帧中增加图层。)(3)编辑帧。要实现渐隐效果，需要修改图层的不透明度。先选择第二帧，再在“图层”调板中将其不透明度设置为0。6060(4)建立过渡帧。选中第二帧，单击调板底部的“过渡”按钮 ，或从调板菜单中选择“过渡”命令，打开“过渡”对话框(如图10-18所示)；在“过渡”对话框中设置“过渡”为“第一帧”，“要添加的帧”为4，“图层”为“所有图层”，并在“参数”中选

24、择“不透明度”，单击“好”按钮，即可创建4个过渡帧。第二至第五帧的“不透明度”分别是 80%、60%、40%和 20%。同样方法，选中第六帧，在第六和第七帧之间插入4个新帧，其中，将“过渡”设置为“下一帧”。此时，共建立了11个帧，其中关键帧3个(第一帧、第六帧和第十一帧)，过渡帧8个(如图10-19所示)。61 61图10-19 “动画”调板上过渡帧的设计6262(5)查看动画。从“动画”调板可粗略看到，此时图像的渐隐效果已经制作完成，单击调板底部的“播放”按钮即可查看整个动画。(6)指定帧延迟。如果动画播放得太快了，希望能慢一点，可以通过设置每个帧的“延迟时间”让每个帧多保留一段时间。其操

25、作方法如下：从调板菜单中选择“选择全部帧”命令，可以选择全部11个帧。6363 单击任意一个帧右下角的延迟值，打开“延迟”选项菜单，从中设定帧的延迟时间。此处设置为0.2秒。按住Ctrl键，选择第一帧和第十一帧，将其延迟时间设为1秒。这样可使这两个帧的图像保持完全清晰的时间长一点。选择第六帧，将其延迟时间设置为2秒。至此，两幅图像的渐隐过渡效果动画就制作完成了(如图10-20所示)。提示：使用Shift键可以选择多个连续帧，使用Ctrl键可以选择多个不连续的帧。6464图10-20 两幅图像的渐隐过渡效果示意图656510.4.2 动画的优化对动画进行优化可以减小文件的大小，ImageRead

26、y确保图案在所有帧中都保持一致，并可防止在播放过程中发生闪烁。对于网络应用来说，这是非常必要的。从调板菜单中选择“优化动画”命令，弹出“优化动画”对话框，如图10-21所示，可在其中设置优化选项。“定界框”：将每一帧裁切到相对于上一帧发生了更改的区域，这样创建的动画文件比较小。“删除冗余像素”：可使一个帧中相对于上一帧没有发生更改的所有像素都变为透明。6666图10-21 “优化动画”命令及“优化动画”对话框676710.4.3 使用“动画”调板制作简单动态图像例10-2 利用“动画”调板制作“移动字幕”的处理效果。具体步骤如下：(1)在Photoshop中，打开本书素材库(可从出版社网站下载

27、)中的“Samples理工大学.jpeg”图像文件，用裁剪工具对图像大小进行修正。执行“图层复制图层”命令，复制该背景层为“背景副本”。(2)选择背景层为当前层，用画笔工具将原图像中的“浙江理工大学”用背景色覆盖，去掉文字内容。6868(3)选择“背景副本”为当前层，点击“图层”调板上的“添加图层蒙版”图标，在此层上添加蒙版。然后将“浙江理工大学”用矩形选框工具选中，并用黑色进行填充。点击缩览图与蒙版间的链接符，去掉它们之间的链接关系。用移动工具将蒙版作移动后，可看到文字随蒙版移动而一个一个显示出来。(4)点击工具箱下方的“ImageReady”图标，切换到ImageReady下，执行“窗口动

28、画”命令，打开“动画”调板。(5)将第一帧上的播放时间设置为0.5秒，并复制6帧。6969(6)在“图层”调板上，选择图层蒙版，用移动工具，分别在第一帧中显示“浙”字、第二帧中显示“浙江”二字，以此类推，直到第六帧将文字内容完全显示出来。再选择第七帧，将该层设为“不可见”。(7)点击“动画”调板上的“播放停止动画”按钮，观看效果。(8)执行“文件将优化结果存储为”命令，存储该图像文件。最终效果如图10-22所示。7070图10-22 滚动字幕的制作示意图71 71例10-3 利用“动画”调板制作帆船乘风破浪移动的效果。(1)在Photoshop中，打开本书素材库中的“Samples大海.jpe

29、g”图像文件，用裁剪工具对图像大小进行修正。执行“图层复制图层”命令，复制该背景层为“背景副本”。(2)选择背景层为当前层，用仿制图章工具，先在帆船右侧按Alt键进行局部图像取样处理，然后新建“图层1”并用仿制图章工具在其上进行涂抹，将帆船去掉。(3)选择“背景副本”为当前层，用多边形套索工具将该层上的帆船选中，7272并点击“图层”调板上的“添加图层蒙版”图标，做添加蒙版处理。此时，该图层除了帆船外，其余的图像均被蒙版遮盖，用移动工具将帆船移到最右边，如图10-23所示。7373图10-23 用移动工具将帆船移到最右边示意图7474(4)点击工具箱下方的“ImageReady”图标，切换到I

30、mageReady下，执行“窗口动画”命令，打开“动画”调板。(5)在“动画”调板中，将第一帧的播放时间设置为0.5秒，并复制10帧。(6)用移动工具，将每一帧上的帆船做从左到右不同位置的调整，直到最后一帧上没有帆船为止。(7)点击“动画”调板上的“播放停止动画”按钮，观看效果。(8)执行“文件将优化结果存储为”命令，存储该图像文件。最终效果如图10-24所示。7575图10-24 帆船移动效果示意图7676例10-4 利用“动作”和“动画”调板制作“雨中荷花”下雨的效果。(1)在Photoshop中，打开本书素材库中的“Sampleswater lilies.jpeg”图像文件，执行“窗口动

31、作”命令，打开“动作”调板。单击“创建新组”按钮，在对话框中给新组取名为“雨”，再单击“新建动作”按钮，建立“新动作”，取名为“下雨”。此时“开始记录”图标呈下陷状，开始记录每一步操作。(2)在图层调板上新建“图层1”，用“黑色”进行填充。执行“滤镜杂色添加杂色”命令，在打开的对话框中，将“数量”设置为150左右，在“分布”栏中选择“平均分布”，并将“单色”打上勾。7777同时，将“图层”调板上的混合模式设为“滤色”，不透明度为40%。(3)执行“滤镜模糊高斯模糊”命令，在打开的对话框中，将角度设为-65-75，距离为13左右，产生下雨的效果。(4)执行“图像调整亮度/对比度”命令，将“亮度”

32、设置为-27左右。(5)单击“动作”调板上的“停止播放记录”图标，停止记录。再选择新动作“下雨”，并点击3次“播放选定动作”图标，完成3次动作的复制。此时，在图层调板上又多了三个图层，分别为“图层2”、“图层3”和“图层4”，如图10-25所示。7878图10-25 利用“动作”调板记录动作示意图7979(6)点击工具箱下方的“ImageReady”图标，切换到ImageReady下，执行“窗口动画”命令，打开“动画”调板。(7)将第一帧上的播放时间设置为0.2秒，再复制3帧。在第一帧中，将“图层1”设为“可见”，其它层均为“不可见”；在第二帧中，将“图层2”设为“可见”，其它层均为“不可见”。以此类推，除背景层外，每一层针对一个帧。(8)点击“动画”调板上的“播放停止动画”按钮，观看效果。(9)执行“文件将优化结果存储为”命令，存储该图像文件。最终效果如图10-26所示。8080图10-26 下雨效果示意图81 81本章主要介绍了ImageReady的使用方法，通过ImageReady在图像中创建切片、翻转效果和动画。通过本章的学习，学习者应掌握如何利用“切片工具”和“切片”调板制作Web页，利用“动画”调板制作简单动态图像。本本 章章 小小 结结