图形与图像处理技术教学课件作者张枝军编著第9章.ppt

图 9-9　编辑水平切片 返回 图 9-10　基于图层的切片 返回 图 9-11　将切片提升到用户切片 返回 图 9-12　切片选项 返回 * 第9章　图像的输出与优化 9.1　图像的输出 9.2　图像的优化 9.3　图像优化与输出的应用 返回 9.1　图像的输出 1. 使用 Web 图形 Photoshop 中的 Web 工具可以帮助设计人员设计和优化单个 Web 图形或整个页面布局。使用 Photoshop 的 Web 工具，可以轻松构建网页的组件块，或者按照预设或自定格式输出完整网页。Web 工具主要包括以下内容： （1）使用图层和切片设计网页和网页界面元素。 （2）使用图层复合可以实现不同的页面组合或导出页面的各种变化形式。 （3）创建用于导入到 Dreamweaver 或 Flash 中的翻转文本或按钮图形。 下一页 返回 9.1　图像的输出 （4）使用动画面板创建 Web 动画，然后将其导出为动画 GIF 图像或 QuickTime 文件。 （5）使用 Bridge 创建 Web 照片画廊，从而通过使用各种具有专业外观的模板将一组图像快速转变为交互网站。 运用菜单“存储为 Web 所用格式”命令，可以将图像文件转化为 Web 所用格式文件，如图 9-1 所示。 2. 创建翻转 翻转是网页上的当鼠标移动到其上方时会发生变化的一个按钮或图像。要创建翻转， 至少需要两个图像：主图像表示处于正常状态的图像，而次图像表示处于更改状态的图像。 上一页 下一页 返回 9.1　图像的输出 Photoshop 提供了许多用于创建翻转图像的工具： （1）使用图层创建主图像和次图像。在一个图层上创建内容，然后复制并编辑图层以创建相似内容，同时保持图层之间的对齐。当创建翻转效果时，可以更改图层的样式、可见性或位置，调整颜色或色调，或者应用滤镜效果。 （2）可以利用图层样式对主图层应用各种效果，如颜色叠加、投影、发光或浮雕。若要创建翻转对象，请启用或禁用图层样式并存储处于每种状态下的图像。 （3）使用样式面板中的预设按钮样式快速创建具有正常状态、鼠标移过状态和鼠标按下状态的翻转按钮。 上一页 下一页 返回 9.1　图像的输出 使用矩形工具绘制基本形状，并应用样式以自动将该矩形转换为按钮。然后拷贝图层并应用其他预设样式，以创建其他按钮状态。将每个图层存储为单独的图像以创建完成的翻转按钮组。 （4）使用“存储为 Web 所用格式”对话框以 Web 兼容的格式和优化的文件大小来存储翻转图像。 当存储翻转图像时，可使用命名约定区分主（非翻转状态）图像和次（翻转状态）图像。在 Photoshop 中创建翻转图像组之后，使用 Dreamweaver 将这些图像置入网页中并自动为翻转动作添加 JavaScript 代码。 3. 导出到 Zoomify 上一页 下一页 返回 9.1　图像的输出 在 Photoshop 中可以将高分辨率的图像发布到 Web 上，以便图像浏览人员平移和缩放该图像以查看更多的细节。下载基本大小的图像与下载同等大小的 JPEG 文件所花费的时间一样。Photoshop 会导出 JPEG 文件和 HTML 文件，可以将这些文件上传到 Web 服务器。具体方法如下： （1）选择“文件—导出—Zoomify”并设置导出选项，如图 9-2 所示。模板设置在浏览器中查看的图像的背景和导航。输出位置指定文件的位置和名称。图像拼贴选项指定图像的品质。浏览器选项设置基本图像在查看者的浏览器中的像素宽度和高度。 （2）将 HTML 文件和图像文件上传到 Web 服务器。 上一页 下一页 返回 9.1　图像的输出 4. 切片的 Web 页 在 Photoshop 切片使用 HTML 表或 CSS 图层将图像划分为若干较小的图像，这些图像可在 Web 页上重新组合。通过划分图像，可以指定不同的 URL 链接以创建页面导航， 或使用其自身的优化设置对图像的每个部分进行优化。可以使用“存储为 Web 和设备所用格式”命令来导出和优化切片图像。Photoshop 将每个切片存储为单独的文件并生成显示切片图像所需的 HTML 或 CSS 代码。将图像在 Web 处理切片时，要注意以下基本 要点： （1）可以通过使用切片工具或创建基于图层的切片来创建切片。 上一页 下一页 返回 9.1　图像的输出 （2）创建切片后，可以使用切片选择工具选择该切片，然后对它进行移动和调整大小，或将它与其他切片对齐。 （3）可以在“切片选项”对话框中为每个切片设置选项，如切片类型、名称和 URL。 （4）可以使用“存储为 Web 所用格式”对话框中的各种优化设置对每个切片进行 优化。 5. 切片类型 在 Photoshop 中，切片按照其内容类型（表格、图像、无图像）以及创建