Photoshop CS2实用教程 第二版 高职多媒体第11章网页图像设计.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所用格式”或I。