PhotoshopCS2实用教程网页图像设计

第11章

网页图像设计

Photoshop CS2和ImageReady CS2中的图形工具和功能 简化了大多数Web设计任务，可以使用文本、绘图和绘画工 具向版面中添加内容，可以设计和制作在Web上使用的静态 或动态的图像。还可以使用切片工具，将页面版式或复杂图 形划分为多个区域，并指定独立的压缩设置(从而获得较小 的文件大小)。可以将图像分为切片、超链接和HTML文字、 优化切片并将图像存储为一个Web页面。 还可以使用“动画”调板结合切片组、嵌套表、百分比 宽度表以及远程翻转(将鼠标移到某幅图像上时，另一幅图 像发生变化)来创建简单的Web动画，逐帧确定动画的外观。 从 Photoshop CS2中将动画导出为动画GIF,也可以从ImageReady CS2中将动画导出为动画GIF或SWF文件。

单击工具箱下方的，便会打开ImageReady CS2,其工作界面 与PhotoshopCS2相似，如图11-1所示。

图11-1

第11章

网页图像设计

11.1 设计Web页

11.2 优化图像11.3 翻转和动画 11.4 小结

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)选取“视图”→“创建参考线”,如图117所示。在对话框中，指定参考线选项，然后单击。

图11-6 “新建参考线”对话框

图11-7 “创建参考线”对话框

从垂直标尺拖移以创建垂直参考线，如图11-8所示。

图11-8 创建垂直参考线

选择切片工具，在选项栏中单击“基于参考线的切片”,如 图11-9所示。

图11-9 根据拖出的参考线创建的切片

3.基于图层的切片 在处理翻转时，基于图层的切片特别有用。如果将诸如投影 或发光等效果应用于图层以创建翻转状态，切片将自动调整以包 含新的像素。 (1)在图层调板中选择图层，如图11-10所示。 (2)选取“图层”→“新建基于图层的切片”,结果如图 11-11所示。

图11-10

选择图层

图11-11

新建基于图层的切片