PhotoshopCS2实用教程网页图像设计.ppt

第11章 网页图像设计,Photoshop CS2和ImageReady CS2中的图形工具和功能简化了大多数Web设计任务，可以使用文本、绘图和绘画工具向版面中添加内容，可以设计和制作在Web上使用的静态或动态的图像。还可以使用切片工具，将页面版式或复杂图形划分为多个区域，并指定独立的压缩设置（从而获得较小的文件大小）。可以将图像分为切片、超链接和HTML文字、优化切片并将图像存储为一个Web页面。 还可以使用“动画”调板结合切片组、嵌套表、百分比宽度表以及远程翻转（将鼠标移到某幅图像上时，另一幅图像发生变化）来创建简单的Web动画，逐帧确定动画的外观。从 Photoshop CS2中将动画导出为动画GIF，也可以从Image-Ready CS2中将动画导出为动画GIF或SWF文件。,单击工具箱下方的，便会打开ImageReady CS2，其工作界面与PhotoshopCS2相似，如图11-1所示。,图11-1,第11章 网页图像设计,11.2 优化图像,11.3 翻转和动画,11.4 小结,11.1 设计Web页,11.1 设计Web页,11.1.1 关于切片,11.1.2 切片的类型,11.1.3 创建切片,11.1.4 查看切片,11.1.5 修改切片,11.1.1 关于切片,切片是根据图层、参考线、精确选择区域或用切片工具创建的一块矩形图像区域，利用Photoshop和ImageReady可以使用切片工具将图像分割成许多功能区域。在存储网页图像和HTML文件时，每个切片都会作为独立文件存储，并具有其自己的设置和颜色调板，并且在关联的Web页中会保留所创建的正确的链接、翻转效果以及动画效果。 可以创建一个HTML表格或CSS样式表来包含和排列切片。可以生成一个HTML文件，使之包含附带这个表格或CSS的切割图像。通过将图像划分为切片，能够更好地控制图像的功能和文件大小。,11.1.2 切片的类型,切片按照其内容类型以及创建方式分类。,1.切片内容类型,可以指定在与HTML文件一起导出时，切片数据在Web浏览器中的显示方式。可用选项因所选的应用程序和切片类型而异。 图像切片 包含图像数据（包括翻转状态），这是默认的内容类型。 无图像切片 允许创建可在其中填充文本或纯色的空表单元格。可以在“无图像”切片中输入HTML文本。如果设置了“文本为HTML”标记，在浏览器中查看文本时，文本会被解释为HTML。 （ImageReady）表切片 充当切片子集（导出时作为嵌套表写入到HTML文本文件中）的容器。表切片包含嵌套表。是用ImageReady中的Web内容调板创建的。, 用户切片 使用切片工具创建的切片称为用户切片。 基于图层的切片 基于图层内容创建的切片称为基于图层的切片。 自动切片 当创建新的用户切片或基于图层的切片时，将会用自动生成的自动切片来占据图像的其余区域。换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。还可以将自动切片转换为用户切片。,2.切片创建方式类型, 子切片 子切片是一种自动切片，它是在创建重叠切片时生成的。当存储被优化的文件时，子切片会显示文件的分割状况。尽管子切片有编号并显示切片标记，但是不能在脱离切片存在的情况下独立选择或编辑它们。每次排列切片的堆叠顺序时都会重新生成子切片。,“用户切片”、“基于图层的切片”和“自动切片”的外观不同。“用户切片”和“基于图层的切片”由实线定义，而“自动切片”由虚线定义。 另外，每种类型的切片都显示不同的图标。可以选取显示或隐藏自动切片，这更容易查看使用用户切片和基于图层的切片的作品。,11.1.3 创建切片,1.使用切片工具创建切片,在图像中使用切片工具拖出一矩形定义的切片称为“用户切片”。一旦在一幅图像中定义了一个“用户切片”，Photoshop或ImageReady就会把周围没有定义的区域生成为“自动切片”。,具体操作步骤如下：,（1）在Photoshop CS2中，打开软件自带的ImageReady Files文件夹中名为Button Factory.psd的图像文件，如图11-2所示。,（2）选择切片工具箱中的切片工具，任何现有切片都将自动出现在文档窗口中，01是灰色的自动切片，02、03、04、05为用户切片，如图11-3所示。,图11-2打开的图像文件,图11-3 现有切片都将自动出现在文档窗口中,（3）相应的工具选项栏，如图11-4所示。,（4）使用切片工具，在自动切片01的左下角向右上角拖出矩形边框。松开鼠标，Photoshop会生成一个编号为02的自动切片（在切片左上角显示灰色数字），左侧和下方会自动形成编号为01、03、04、05、06的用户切片，每创建一个新的用户切片，自动切片就会重新标注数字，如图11-5所示。,图11-5 生成一个编号为02的自动切片,（4）如果要改变切片的大小，可在工具箱中选择“切片选择工具”选择切片，然后拖曳切片边框的调节点。 （5）选择“文件”“存储”命令，将完成的工作存储起来。,一定要确保所创建的切片之间没有间隙，因为任何间隙都会生成自动切片。可使用缩放工具将图像放大，观察有无不必要的切片生成。双击缩放工具可回到100%图像显示状态。,为了制作方便，我们选择置入参考线来定义不同的切片区域，向图像中添加参考线。 从参考线创建切片时，可以把参考线之间的所有区域创建成“用户切片”。,2.使用参考线创建切片,注意：,具体操作步骤如下：,选取“视图”“新建参考线”，如图11-6所示。在对话框中，选择“水平”或“垂直”方向，输入一个位置，然后单击。 (ImageReady)选取“视图”“创建参考线”，如图11-7所示。在对话框中，指定参考线选项，然后单击。,图11-6 “新建参考线”对话框,图11-7 “创建参考线”对话框, 从垂直标尺拖移以创建垂直参考线，如图11-8所示。,图11-8 创建垂直参考线, 选择切片工具，在选项栏中单击“基于参考线的切片”，如图11-9所示。,图11-9 根据拖出的参考线创建的切片,3.基于图层的切片,在处理翻转时，基于图层的切片特别有用。如果将诸如投影或发光等效果应用于图层以创建翻转状态，切片将自动调整以包含新的像素。,（1）在图层调板中选择图层，如图11-10所示。 （2）选取“图层”“新建基于图层的切片”，结果如图11-11所示。,图11-10 选择图层,图11-11 新建基于图层的切片,（3）单击工具箱中的按钮，进入ImageReady的编辑窗口，ImageReady用一个“图层切片”取代了“自动切片”。注意切片左上角数字右侧的图标，它表示此切片（05）是一个“图层切片”，如图11-12所示。“Web内容”调板，如图11-13所示。,图11-12 05切片是一个“图层切片”,图11-13 “Web内容”调板,（4）单击工具箱中的按钮，返回到Photoshop中，保持当前图层的选中状态，选取“图层”“图层样式”“投影”和“描边”。注意“图层切片”的边框扩大，将执行效果后新的像素包含进来，如图11-14所示。,图11-14 添加了图层样式的效果,（5）选取“编辑”“还原投影”，可取消刚才的操作。 （6）选择“文件”“存储”命令，将完成的工作存储起来。,由于基于图层的切片受图层的像素内容限制，因此编辑图层（移动、组合、划分、调整大小）是对齐该切片的惟一方法。还可以将基于图层的切片转换为用户切片，以取消它与图层的链接。,4.将基于图层的切片转换为用户切片,可以对用户切片进行移动、复制、组合、划分、调整大小、删除、排列、对齐和分布。还可以对用户切片应用不同的优化设置。相反，图像中的所有自动切片都链接在一起并共享相同的优化设置。 这是由于每次创建或编辑用户切片或基于图层的切片时都重新生成自动切片。,5.将自动切片转换为用户切片,11.1.4 查看切片,可以在Photoshop的“存储为Web所用格式”对话框和Image-Ready中查看切片。下列特性有助于识别并区分切片： 切片行 定义切片的边界。实线指明切片是用户切片或基于图层的切片；虚线指明切片是自动切片。 切片颜色 将用户切片和基于图层的切片与自动切片区分开来。默认情况下，用户切片和基于图层的切片带蓝色标记，而自动切片带灰色标记。 此外，ImageReady和Photoshop的“存储为Web所用格式”对话框使用颜色调整使未选中的切片变暗。这些调整只是出于显示目的，不会影响最终图像的颜色。默认情况下，对自动切片的颜色调整量是用户切片的两倍。,1.更改切片行的颜色,（1）在Photoshop中，选取“编辑”“首选项”“参考线、网格和切片”，打开“首选项”对话框，如图11-17所示。 （2）或在ImageReady中，选取“编辑”“首选项”“切片”，如图11-18所示。 （3）在“切片行”下“直线颜色”下拉菜单中选取一种颜色。颜色改变后，选定的切片行将自动以对比颜色显示。,2.更改切片的颜色调整 (ImageReady),（1）选取“编辑”“首选项”“切片”。 （2）为“用户切片”、“自动切片”（或两者）输入一个值，或从“颜色调整”滑块中选取值。,3.显示或隐藏切片编号和切片标记 (ImageReady), 切片编号 切片从图像的左上角开始，从左到右、从上到下进行编号。如果更改切片的排列或切片总数，切片编号将更新以反映新的顺序。 切片标记 “Web内容”调板使用许多标记（或图标）来指示某些条件，并且这些图标也会出现在文档本身中： 用户切片具有“图像”内容。 用户切片具有“无图像”内容。 切片基于图层。 切片已链接。 切片包含翻转效果。 切片包含现有翻转状态。 切片是嵌套表。 切片是远程触发器。 切片是远程目标。,11.1.5 修改切片,可以创建与原切片的尺寸和优化设置相同的复制切片。如果原切片是链接的用户切片，则复制切片链接到同一组链接切片。复制切片总是用户切片，不管原切片是用户切片、基于图层的切片还是自动切片。 在ImageReady中，也可以在文档内部或文档间拷贝并粘贴切片。选择一个或多个切片，按住Alt键从选区内拖移即可。,1.复制切片,2.使用“Web内容”调板复制切片(ImageReady),在“复制切片”对话框中，从下列选项中进行选择： 复制翻转状态 保留与原切片关联的任何翻转状态。 为基于图层的切片复制图层 复制与基于图层的切片关联的图层。,3.拷贝和粘贴切片 (ImageReady),（1）使用切片选择工具选择一个或多个切片。 （2）从“编辑”菜单中选取“拷贝切片”。 （3）如果要将切片粘贴到另一个图像中，打开并显示该图像。 （4）从“编辑”菜单中选取“粘贴切片”。如果在同一图像中拷贝和粘贴，则粘贴的切片将出现在原切片之上。,“拷贝切片”和“粘贴切片”命令与常规“拷贝”和“粘贴”命令的键盘快捷键是相同的。,11.2 优化图像,11.2.1 在Photoshop CS2中优化图像切片,11.2.2 在ImageReady中优化切片,11.2.3 链接切片,在针对Web和其他联机介质准备图像时，通常需要在图像显示质量和图像文件大小之间加以折衷。Photoshop和ImageReady提供了许多控制选项，用于压缩图像的文件大小，同时优化其联机显示质量。 可以采用以下两种方式来针对Web存储图像： 对于基本优化，Photoshop的“存储为”命令能够将图像存储为GIF、JPEG或 PNG-24文件。根据文件格式的不同，可以指定图像品质、背景透明度或杂边、颜色显示和下载方法。但是，将不会保留向文件中添加的任何Web功能（如切片、链接、动画和翻转）。,11.2 优化图像, 对于精确优化，可以使用Photoshop的“存储为Web所用格式”或ImageReady的“存储优化结果”，以不同的文件格式和不同的文件属性预览优化图像。当预览图像时，可以同时查看图像的多个版本并修改优化设置，选择最适合自己需要的设置组合。也可以指定透明度和杂边，选择用于控制仿色的选项，以及将图像大小调整到指定的像素尺寸或原大小的指定百分比。,11.2.1 在Photoshop CS2中优化图像切片,在使用“存储为Web所用格式”(Photoshop) 或“存储优化结果”(ImageReady)命令存储优化的文件时，可以选择为图像生成HTML文件。此文件包含在Web浏览器中，显示图像所必需的所有信息。可以使用“存储为Web所用格式”对话框(Photoshop)或“优化”调板(ImageReady)来优化图像切片。,1.在Photoshop中设置切片选项,在“切片选项”对话框中： 切片类型 选择“图像”选项表示当前切片在网页中显示为图像。也可在后面的弹出菜单中选择“无图像”选项，使切片包含HTML和文本。, 名称 可以设置用户切片的名称。 URL可以设置在网页中单击用户切片可链接至的网络地址。 目标 在网页中单击用户切片时，在网络浏览器中弹出一个新窗口打开链接网页。否则网络浏览器在当前窗口中打开链接网页。 信息文本 是在网络浏览器中，将鼠标移动至该切片时，在“信息文本”中输入的文字出现在浏览器的状态栏中。 Alt标记 是在网络浏览器中，将鼠标移动至该切片时，该切片上弹出提示内容。当网络浏览器设置为不显示图片时，该切片图像的位置上显示“Alt标记”框中的内容。 尺寸 “X”、“Y”值为用户切片的坐标。“W”、“H”值为用户切片的宽度和高度。 切片背景类型 可以选择不同的切片背景和不同的背景颜色。,2.在Photoshop中优化切片,（1）选取“文件”“存储为Web所用格式”，弹出如图11-23所示对话框。,在“存储为Web所用格式”对话框中左上方的标签行中：, 原稿：用来查看未优化的图像。 优化：对话框中显示优化后的图像效果。 双联：对话框中分为两个窗口，分别展示原始图像和优化后的图像效果。 四联：对话框中分为4个窗口，分别展示原始图像和3种优化后的图像效果。,图11-23 “存储为Web所用格式”对话框,在“存储为Web所用格式”对话框中左侧的工具栏中：,“抓手工具”和“缩放工具”与Photoshop工具箱中的工具功能相同。可在视图区域内拖移以查看图像全景。 选择切片选择工具，然后双击一个切片，可在“存储为Web所用格式”对话框中选择切片。按住Shift键单击或按住Shift键拖移可选择多个切片。 选择吸管工具，在图像的某一颜色上单击，可以将图像上该像素的颜色吸到吸管工具下方的色块上。单击色块，可以在弹出的对话框中修改颜色。 单击切换图片可视性按钮，在“存储为Web所用格式”对话框中显示或隐藏所有切片。, 左侧显示当前图像的显示比例，可以在此框中重新设置图像的显示比例。 单击最右侧的按钮，可以利用IE浏览器预览网页的效果。如果你使用的是其它浏览器，可以单击最右侧的按钮，在弹出的菜单中选择“其它”命令，选择适当的网络浏览器。,在“存储为Web所用格式”对话框下方的状态栏中：, 单击“预览”弹出式菜单按钮，选择“隐藏自动切片”，可在“存储为Web所用格式”对话框中显示或隐藏自动切片，如图11-24所示。 选择两个或两个以上的切片，然后从“优化”弹出式菜单中选择“链接切片”，链接图标即可出现在链接切片上。选择“取消全部切片链接”，即可取消所有切片的链接，如图11-25所示。,在“存储为Web所用格式”对话框中查看优化图像的信息, “存储为Web所用格式”对话框中每个图像下方的注释区域提供了优化信息。原稿图像的注释显示文件名和文件大小。优化图像的注释显示当前优化选项、优化文件的大小以及使用选中的调制解调器速度时的估计下载时间。可以在“预览”弹出式菜单中选取一个调制解调器速度。,图11-24 “预览”弹出式菜单,图11-25 “优化”弹出式菜单,选取的文件格式很大程度上取决于图像的特性。选择“优化”选项，才可以对图像进行优化设置。 格式：GIF是用于压缩具有单调颜色和清晰细节的图像（如艺术线条、徽标或带文字的插图）的标准格式。如图11-26所示。 格式：与GIF格式一样，PNG-8格式可有效地压缩纯色区域，同时保留清晰的细节。PNG-8 和GIF文件支持8位颜色，因此它们可以显示多达256种颜色。确定使用哪些颜色的过程称为建立索引，因此GIF和PNG-8格式图像有时也称为索引颜色图像。如图11-27所示。,在“存储为Web所用格式”对话框中右侧的选项及命令区域, 格式：可以选择保存图像切片的格式。JPEG是用于压缩连续色调图像（如照片）的标准格式。将图像优化为JPEG格式的过程依赖于有损压缩，它有选择地扔掉数据。如图11-28所示。,图11-26GIF格式,图11-27 索引颜色表,图11-28 JPEG格式, 在“品质”框中，设置允许降低图像质量对图像进行压缩的比例。 勾选“连续”选项，允许使用多种途径下载。 设置“模糊”值，可以在用户切片图像中产生模糊效果。 单击“杂边”框右侧的按钮，可以选择适当的颜色作为用户切片图像的背景（只有在当前图像有透明效果时，才能看出效果）。其中“吸管颜色”命令是指使用吸管工具下方的色块颜色。, 格式： PNG-24适合于压缩连续色调图像；但它所生成的文件比JPEG格式生成的文件要大得多。使用PNG-24的优点在于可在图像中保留多达256个透明度级别。如图11-29所示。, 格式：WBMP格式是用于优化移动设备（如移动电话）图像的标准格式。WBMP支持1位颜色，意即WBMP图像只包含黑色和白色像素。如图11-30所示。 右下方的“图像大小”类参数功能非常明确，不再详细讲解了。如图11-31所示。,突11-29 PNG-24格式 图11-30 WEMP格式 图11-31 图像大小类参数,（2）选择切片选择工具 ，在按住Shift键的同时，选中02、03、04号切片。单击 按钮。会弹出“将优化结果存储为”对话框，如图11-32所示。 （3）创建一个新的名称为“Web Pages”的文件夹，保留自定的名称，在格式后面的弹出菜单中选择“仅限图像”，在切片后面的弹出菜单中选择“选中的切片”。设定完成后，单击“保存”按钮。在硬盘中找到刚刚创建的文件夹，可看到生成的分别包含3个切片的图像文件，如图11-33所示。 （4）选择“文件”“存储”命令，将完成的工作存储起来。,图11-32 “将优化结果存储为”对话框 图11-33 生成的包含3个切片的图像文件,11.2.2 在ImageReady中优化切片,ImageReady可为图像中的每个切片记录各自的优化设置。选择切片，在“优化”调板中对切片进行优化设置，然后，把选定的切片存储为优化图像。,在ImageReady中，可以使用“优化”调板来选择优化选项。此调板与Photoshop CS2的“存储为Web所用格式”对话框中的“优化”面板相对应。 要显示“优化”调板，请选取“窗口”“优化”。 要显示所有优化选项，请单击“优化”调板选项卡上的“显示选项”控件，或从“优化”调板菜单中选取“显示选项”。如图11-34所示。,1.使用“优化”调板, 要显示一组选项，请单击该组选项的“显示选项”控件 。如图11-35所示。 要从“优化”调板菜单中选取选项，请单击调板右上角的控件 。,图11-34 选取“显示选项” 图11-35 显示一组选项,具体操作步骤如下：,（1）选择工具箱中的“切片选择工具”。选中图像中编号为01的自动切片。 （2）在文件窗口单击“双联”标签，将并排显示原稿和优化图像，如图11-36所示。,图11-36 并排显示原稿和优化图像,（3）如果没有显示“优化”调板，可选择“窗口”“优化”命令。在“优化”调板中，从“预设”下拉菜单中选择“GIF 32 仿色”，如图11-37所示。此选项的图像质量要高于默认“未命名”设置的图像质量（默认设置中优化图像的质量低于原稿的质量），如图11-38所示。,图11-37 选择“GIF 32 仿色”图11-38 默认“优化”调板,（4）单击工具箱中的“切换切片可视性按钮”可隐藏切片编号，以方便观察不同优化设置的图像显示效果。,（5）选择图像中另一个自动切片02，如图11-39所示。在优化调板上可看到也采用了相同的“GIF 32 仿色”设置，如图11-40所示。这是因为所有的自动切片都被链接在一起，对任何一个自动切片所做的优化设置自动适用于其他所有自动切片。,图11-39 选择图像中另一个自动切片02 图11-40 相同的“优化”调板,11.2.3 链接切片,在ImageReady中，可以把切片链接在一起使它们共享同样的优化设置。在Image- Ready或Photoshop中，改变链接组中任何一个切片的设置，链接组中的其他切片都会变成同样的设置。同一链接组中的切片是同一种颜色标识。,（1）选择工具箱中的“切片选择工具”，按住Shift键的同时，选中4个文字按钮切片02、03、04、05，继续按住Shift键，选择上面的01自动切片，如图11-41所示。,图11-41 按住Shift键的同时选择切片,（2）选择“切片”“链接切片进行优化”命令，一个链接图标将出现在每个链接切片的左上角并且切片编号和标识颜色都变成红色，如图11-42所示。,（3）单独选择自动切片01，在“优化”调板上可看到该切片的设置变成和其他链接切片相同的设置。,图11-42 切片编号和标识颜色都变成红色,11.3 翻转和动画,11.3.1 关于翻转,11.3.2 关于图像映射,11.3.3 在Web浏览器中预览切片,11.3.4 关于动画,11.3.5 关于动画调板,11.3.6 制作网页动画,11.3.1 关于翻转,“翻转”是Web页上的按钮或图像，当在“翻转”按钮上移动鼠标或单击时，页面就会发生变化。在ImageReady CS2中，按钮本身可能会发生变化，或者页面上可能会出现另一个项目（如一幅照片或菜单项列表）。远程翻转触发被翻转的按钮或图像以外的 Web页图素发生变化。可以从切片或图像映射（Image Map）区域创建“翻转”或“次级翻转”。当在“翻转”按钮上单击鼠标时，“次级翻转”将影响其他区域的显示或动作。 要创建翻转，请将翻转图像定义为基于图层的切片或基于图层的图像映射。然后，使用ImageReady中的“Web内容”调板和“图层”调板，执行以下任何操作来创建不同版本的图形：, 添加或更改图层样式或移动图层内容来修改图层内容。 使用新图层替换图像内容。 替换页面上其他位置的图层内容。 添加帧以创建翻转动画。 还可以将“样式”调板中的一个预设翻转样式应用于图像图层。可以使用翻转样式来创建翻转或者重复使用通过其他图形创建的翻转，这是一种快速而方便的方法。 “翻转”的不同状态可创建不同的效果，“翻转”的状态包括： Over：当鼠标经过切片或图像映射区域时的“翻转”状态，此时并没有按下鼠标键（Over是自动被选中的第二个“翻转”状态）。 Down：在切片或图像映射区域上按下鼠标键的“翻转”状态（只要在这个区域上按着鼠标，这一状态就会一直保留）。, Click：在切片或图像映射区域单击鼠标时的“翻转”状态（单击鼠标后，这一状态会一直保留至浏览者激活另一个翻转状态）。 Out：将鼠标移出切片或图像映射区域时的“翻转”状态（通常这一状态与正常相同）。 Up：在切片或图像映射区域上方释放鼠标时的“翻转”状态。 None：保留图像的当前状态以供以后使用，但在将文件存储为Web页时不输出图像。 自定义：如果了解JavaScript，还可以创建客户自定义的状态。当然，也可以保留图像的当前状态作为以后使用的一个新的翻转状态（Custom）。,不同的Web浏览器或不同的浏览器版本对单击和双击的处理可能不同。例如，一些浏览器在单击后保持切片为Click状态，双击后为Over状态；而有些浏览器不管单击还是双击，都只是将Over状态作为向Click状态的过渡。为了确保Web页正确运行，务必在各种Web浏览器中预览翻转。,11.3.2 关于图像映射,“图像映射”将图像的一个区域链接到URL。可以在一个图像中建立多个链接区域（这个链接区域被称为图像映射区域）链接到其他Web页或多媒体文件。也可以在图像映射区域创建“翻转效果”。,使用“图像映射”和使用“切片”创建链接的主要不同之处是：源图像如何被作为一个Web页面输出。使用“图像映射”可以保持输出图像是一个完整的文件。使用“切片”会导致图像输出时成为一个分离的文件。另外一个不同是“图像映射”可以链接到图像的一个圆形、多边形或矩形区域，而切片只能链接到矩形区域。如果只需要链接到矩形区域，那么，使用切片比使用“图像映射”更好。下面将以一个实例来进一步了解关于应用“图像映射”的效果。,在“图像映射”调板的“目标”文本框中输入目标框架名称，或从“目标”菜单中选取一个选项： _blank 在新窗口中显示链接文件，同时保持原始浏览器窗口为打开状态。 _self 在原始文件的同一框架中显示链接文件。 _parent 在自己的原始父框架组中显示链接文件。如果HTML文档包含帧，并且当前帧是子帧，则使用此选项。链接文件显示在当前的父框架中。 _top 用链接文件替换整个浏览器窗口，同时移去所有当前框架。框架名称必须与之前在HTML文件中为该文档定义的框架名称匹配。当用户点击链接时，指定的文件将出现在新框架中。,11.3.3 在Web浏览器中预览切片,（1）在工具箱中，单击默认的浏览器按钮或从按钮的自动弹出菜单中选择一个浏览器，保存的图像将出现在浏览器窗口，并且HTML资源将出现在图像的下面的表中，移动鼠标到图像中的03号切片上，文字将会发生变化，如图11-52所示。,图11-52 浏览器窗口,（2）在03号切片（Classes）上单击，画面将会变化为如图11-53所示。,图11-53 在03号切片上单击,（3）随后，将会链接到所设定的链接地址上，如图11-54所示。,图11-54 设定的链接地址,11.3.4 关于动画,动画就是在一段时间内显示的一系列图像或帧。每一帧较前一帧都有轻微的变化，当连续、快速地显示这些帧时，就会产生运动的错觉。 在ImageReady CS2中将动画调板与图层调板和“Web内容”调板配合使用，可以从原来的多图层图像创建动画帧。可以为每一帧指定延迟时间，从而产生动画效果。利用过渡命令还可以在两个指定的动画帧之间自动创建新的过渡状态的动画帧并为动画指定循环。可以创建的帧的数量受系统中可用于ImageReady的内存数量的限制。,11.3.5 关于动画调板,选择“窗口”“动画”命令，便可显示“动画”调板，如图11-55所示。 单击调板右上角的三角形会弹出选项菜单，如图11-56所示。 “动画”调板可以创建、查看和设置动画中帧的选项。在“动画”调板中，可以更改帧的缩览图视图，使用较小的缩览图可以减小调板所需的空间，并在给定的调板宽度上显示更多的帧。,图11-55 动画调板,图11-56,11.3.6 制作网页动画,对于包含多层的图像而言，可通过单击动画选项卡中的“复制当前帧”按钮制作帧动画。接下来分别选中不同帧，然后通过打开或关闭图像中的不同图层，可使不同动画呈现不同的状态，从而产生动画效果。, 由于动画依赖于图层的开关，因此，图像中至少包括2个图层才能制作动画。 选中某一帧后，单击“复制当前帧”按钮可继续增加帧。 要删除帧，可在选中帧后单击“删除选中的帧”按钮 。 通过单击动画调板中 按钮，可观看动画效果。 要设置动画的播放次数，可单击动画调板中的 。,具体操作步骤如下：,（1）打开软件自带的ImageReady Files文件夹中名为Button Factory.psd的图像文件，使用切片选择工具在图像中选择04号切片，如图11-57所示。 （2）选择“窗口”“Web内容”调板，打开“Web内容”调板，创建翻转的Over状态，如图11-58所示。,图11-57 选择04号切片 图11-58 翻转的Over状态,（3）选择“窗口”“动画”命令，显示“动画”调板，当前的图层显示状态显示为动画的第一帧，预览视图的周围有边框则表示动画帧的选中状态。如图11-59所示。相应的图层调板，如图11-60所示。,图11-59 显示“动画”调板 图11-60 图层调板,（4）在动画调板右上角的弹出菜单中选择“新建帧”命令或单击动画调板中的按钮，在动画调板中会显示新创建的动画第2帧，其实是第一帧的复制，将其右移，如图11-61所示。相应的图层调板，如图11-62所示。,图11-61 新创建的动画第2帧 图11-62 图层调板,（5）继续增加帧，右移，动画调板及图层调板如图11-63、图11-64所示。,图11-63 动画调板 图11-64 图层调板,（6）依此类推，直至增加到第7帧，如图11-65所示。图层调板如图11-66所示。,（8）在“优化”调板中选择GIF格式，设置选项后，便可以对图像进行优化，选择“双联”或“四联”，观察优化结果，,图11-65 新创建的动画第2帧 图11-66 图层调板,（7）在动画调板的左下角的弹出菜单中选择循环选项，“一次”或“永远”，如果选择了其他选项，请在弹出的“设置循环计数”对话框中设定循环次数，如图11-67所示。,如图11-68所示。最后将优化结果保存。至此动画制作就完成了。,图11-67 “设置循环计数”对话框 图11-68 对图像进行优化后保存,（9）单击默认的浏览器按钮，即可预览鼠标经过Button按钮时的动画效果，可以看到鼠标移到3号切片上时，文字呈现外发光效果，同时出现一按钮渐现右移的动画，如图11-69所示。实际效果请参见光盘中相应的效果图。,图11-69 预览鼠标经过Button按钮时的动画效果,本章以通俗易懂的语言，以Photoshop CS2中自带“样本”中的范例为主线，系统地介绍了网页图像设计的方法及技巧。从设计Web页、对切片的认识理解开始，到介绍在Photoshop CS2和ImageReadey CS2中优化图像等，以实战的方式介绍了翻转和动画的应用。这些内容为学习者运用所学知识进行Web设计打下了坚实的基础。,