在 Photoshop 中使用 Web 图形

使用 Photoshop 的 Web 工具，可以轻松构建网页的组件块，或者按照预设或自定格式输出完整网页。

• 使用图层和切片设计网页和网页界面元素。（请参阅图层和将 Web 页切片。）
• 使用图层复合可以试验不同的页面组合或导出页面的各种变化形式。（请参阅图层复合。）
• 创建用于导入到 Dreamweaver 或 Flash 中的翻转文本或按钮图形。
• 使用“动画”面板创建 Web 动画，然后将其导出为动画 GIF 图像或 QuickTime 文件。请参阅创建帧动画。
• 使用 Adobe Bridge 创建 Web 照片画廊，从而通过使用各种具有专业外观的模板将一组图像快速转变为交互网站。

有关使用 Photoshop 和 Dreamweaver 设计网站的视频，请参阅从 Dreamweaver 访问 Photoshop 以增强 Web 图像。

创建翻转图像

翻转是网页上的一个按钮或图像，当鼠标移动到它上方时会发生变化。要创建翻转，至少需要两个图像：主图像表示处于正常状态的图像，而次图像表示处于更改状态的图像。

Photoshop 提供了许多用于创建翻转图像的有用工具：

• 使用图层创建主图像和次图像。在一个图层上创建内容，然后复制并编辑图层以创建相似内容，同时保持图层之间的对齐。当创建翻转效果时，可以更改图层的样式、可见性或位置，调整颜色或色调，或者应用滤镜效果。请参阅复制图层。
• 也可以利用图层样式对主图层应用各种效果，如颜色叠加、投影、发光或浮雕。若要创建翻转对，请启用或禁用图层样式并存储处于每种状态下的图像。请参阅图层效果和样式。
• 使用“样式”面板中的预设按钮样式快速创建具有正常状态、鼠标移过状态和鼠标按下状态的翻转按钮。使用矩形工具绘制基本形状，并应用样式（如“斜面，正常”）以自动将该矩形转换为按钮。然后拷贝图层并应用其它预设样式（如“斜面，鼠标移过”）以创建其它按钮状态。将每个图层存储为单独的图像以创建完成的翻转按钮组。
• 使用“存储为 Web 和设备所用格式”对话框以 Web 兼容的格式和优化的文件大小来存储翻转图像。请参阅优化图像。

注意:当存储翻转图像时，可使用命名约定区分主（非翻转状态）图像和次（翻转状态）图像。

在 Photoshop 中创建翻转图像组之后，使用 Dreamweaver 将这些图像置入网页中并自动为翻转动作添加 JavaScript 代码。

导出到 Zoomify

可以将高分辨率的图像发布到 Web 上，以便查看者平移和缩放该图像以查看更多的细节。下载基本大小的图像与下载同等大小的 JPEG 文件所花费的时间一样。Photoshop 会导出 JPEG 文件和 HTML 文件，您可以将这些文件上载到 Web 服务器。

1. 选择“文件”>“导出”>“Zoomify”并设置导出选项。

   模板

   设置在浏览器中查看的图像的背景和导航。

   输出位置

   指定文件的位置和名称。

   图像拼贴选项

   指定图像的品质。

   浏览器选项

   设置基本图像在查看者的浏览器中的像素宽度和高度。

2. 将 HTML 文件和图像文件上载到 Web 服务器。

使用十六进制颜色值

Photoshop 可以显示图像颜色的十六进制值或拷贝颜色的十六进制值以便在 HTML 文件中使用。

在信息面板中查看十六进制颜色值

1. 选取“窗口”>“信息”或单击“信息”面板选项卡以查看面板。
2. 从面板菜单中选取“面板选项”。在“第一颜色信息”或“第二颜色信息”下，从“模式”菜单中选择“Web 颜色”并单击“确定”。
3. 将指针放在要查看十六进制值的颜色上。

以十六进制值的形式拷贝颜色

Photoshop 会将颜色拷贝为 HTML COLOR 属性（包含十六进制值，color=#xxyyzz），或只拷贝为十六进制值。

1. 执行下列操作之一：
   • 选择吸管工具，然后将指针移至您希望拷贝的颜色上。右键单击 (Windows) 或单击 Control (Mac OS)，然后选取“将颜色拷贝为 HTML”或“拷贝颜色的十六进制代码”。
   • 使用“颜色”面板、“色板”面板或 Adobe 拾色器设置前景色。从“颜色”面板菜单中选取“将颜色拷贝为 HTML”或“拷贝颜色的十六进制代码”。
   • 在“存储为 Web 所用格式”对话框中，单击色板或选取“杂边”>“其它”。在 Adobe 拾色器中，右键单击十六进制值，然后选择“拷贝”。
2. 在 HTML 编辑应用程序中打开需要的文件，然后选择“编辑”>“粘贴”。

更多此类内容

• 选择 Web 安全颜色
• 教程：提取 PSD 资源
• 将 Web 页切片