创建 Web 图形的最佳做法

关于 Web 图形

设计 Web 图形时，所要关注的问题与设计印刷图形截然不同。有关存储 Web 图形的视频，请参阅 www.adobe.com/go/vid0063_cn。有关在 Web 应用程序之间进行导入、复制以及粘贴的视频，请参阅 www.adobe.com/go/vid0193_cn。

为了帮助您在 Web 图形方面作出客观决策，请记住以下三项原则：

1. 1. 使用 Web 安全颜色。
2. 颜色通常是图稿的重要方面。然而，在画板上看到的颜色未必是在其他系统上的 Web 浏览器中所显示的颜色。创建 Web 图形时，可以通过采取两个预防措施来防止仿色（模拟不可用颜色的方法）和其他颜色问题。第一，始终在 RGB 颜色模式下工作。其次，使用 Web 安全颜色。
1. 2. 通过文件大小平衡图像品质。
2. 在 Web 上发布图像，创建较小的图形文件非常重要。使用较小的文件， Web 服务器能够更高效地存储和传输图像，而用户能够更快地下载图像。可以在 “存储为 Web 和设备所用格式 ”对话框中查看 Web 图形的大小和估计的下载时间。
1. 3. 为图形选择最佳文件格式。

不同的图形类型需要存储为不同的文件格式，以便以最佳方式显示，并创建适用于 Web 的文件大小。有关特定格式的详细信息，请参阅第 348 页的 “Web 图形优化选项 ”。

有许多专为 Web 设计的 Illustrator 模板，包括网页和横幅。选择 “文件 ”>“从模板新建 ”以选择一个模板。

另请参阅

第 344 页的 “存储为 Web 和设备所用格式概述 ”

第 345 页的 “针对 Web 优化图像 ”

第 109 页的 “将颜色转换为 Web 安全颜色 ”

关于像素预览模式

在位图格式（如 JPEG、GIF 或 PNG）中存储图稿时， Illustrator 以每英寸 72 像素来栅格化图稿。可以通过选择 “视图 ”>“像素预览 ”来预览栅格化的对象显示情况。如果您要在栅格化图形中控制对象的精确位置、大小和对象的消除锯齿效果时，这个功能尤其有用。

要了解 Illustrator 如何将对象划分为像素，请打开一个包含矢量对象的文件，选择 “视图 ”>“像素预览 ”，然后放大图稿以便能够看到其单个像素。像素位置是由不可见的网格确定的，此网格将 1 磅（1/72 英寸）作为增量来分割画板。如果移动、添加或变换对象，您将注意到对象会自动对齐到像素网格。因此，沿对象 “对齐 ”边缘的任何消除锯齿效果（通常在左侧边缘和顶部边缘）都会消失。现在，取消选择 “视图 ”>“对齐像素 ”命令，然后移动该对象。这样，您将能够在网格线之间放置对象。注意这将如何影响对象的消除锯齿效果。正如您所看到的，非常小的调整都会影响对象的栅格化操作。

“像素预览 ”关闭（顶部）与打开（底部）的比较图

重要说明：像素网格对标尺原点 (0,0) 敏感。移动标尺原点将改变 Illustrator 网格化图稿的方式。

另请参阅

第 231 页的 “关于位图图像 ”

将 Adobe Device Central 与 Illustrator 配合使用

通过使用 Device Central， Illustrator 用户可以预览 Illustrator 文件在各种移动设备上的显示效果。

例如，图形设计师可以使用 Illustrator 为移动电话设计墙纸。在创建文件后，设计师可以方便地在多种不同的电话上测试该文件。设计师可随后进行相应的调整，如更改文件以使其在很多电话上都具有不错的显示效果，或者创建两个单独的文件以涵盖常用的电话屏幕大小范围。

另请参阅

在 Illustrator 中创建移动内容

从 Adobe Device Central 访问 Illustrator 1启动 Device Central。 2选择 “文件 ”> “在以下应用程序中新建文档 ”>“Illustrator”。在 Device Central 中，将显示 “新建文档 ”面板，其中包含在所选应用程序中创建新的移动文档的正确选项。 3进行任何所需的更改，如选择新的 Player 版本、 ActionScript® 版本或内容类型。 4执行下列操作之一：

选择 “所有选定设备的自定尺寸 ”选项，然后添加一个宽度和高度（以像素为单位）。

从 “设备组 ”列表或 “可用的设备 ”列表中选择一个或多个设备。 5如果选择了多个设备， Device Central 将为您选择一个大小。如果要选择不同的大小，请单击一个不同的设备或一组设

备。 6单击 “创建 ”。将打开所选的应用程序，其中包含准备编辑的新移动文档。

使用 Adobe Device Central 和 Illustrator 创建移动内容 1在 Illustrator 中，选择 “文件 ” > “新建 ”。 2在 “新建文档配置文件 ”中，选择 “移动和设备 ”。 3单击 “Device Central”以关闭 Illustrator 中的对话框并打开 Device Central。 4选择一种内容类型。

将更新左侧的 “可用的设备 ”列表，并显示支持所选内容类型的设备。 5在 Device Central 中，选择一个设备、几个设备或设备组。根据所选的设备和内容类型， Device Central 将建议一个或多个要创建的画板大小。要一次创建一个文档，请选择一个建议的

文档大小（或选择 “所有选定设备的自定尺寸 ”选项并为 “宽度 ”和 “高度 ”输入自定义值）。 6单击 “创建 ”。将在 Illustrator 中打开一个具有指定大小的空白 AI 文件。默认情况下，新文件设置了以下参数：

颜色模式：RGB

栅格分辨率：72 ppi 7在 Illustrator 中使用内容填充空白 AI 文件。 8完成后，请选择 “文件 ”>“存储为 Web 和设备所用格式 ”。 9在 “存储为 Web 和设备所用格式 ”对话框中，选择所需的格式，并根据需要更改其他导出设置。 10单击 “Device Central”。在 “Device Central 模拟器 ”选项卡中，将显示一个具有指定导出设置的临时文件。要继续进行测试，请在 “设备组 ”或 “可

用的设备 ”列表中双击另一个设备的名称。 11在 Device Central 中预览文件后，如果需要对文件进行更改，请返回到 Illustrator。 12在 Illustrator 的 “存储为 Web 和设备所用格式 ”对话框中进行调整，如选择不同的导出格式或品质。 13要使用新的导出设置再次测试文件，请单击 “Device Central”。 14如果对结果感到满意，请在 Illustrator 的 “存储为 Web 和设备所用格式 ”对话框中单击 “存储 ”。注：要仅从 Illustrator 中打开 Device Central（而不是创建和测试文件），请选择 “文件 ”>“Device Central”。有关使用 Illustrator 和 Device Central 创建内容的教程，请参阅 http://www.adobe.com/go/vid0207_cn。

有关为移动设备创建 Illustrator 图像的提示

要为移动设备优化图形内容，请以任何 SVG 格式来存储用 Illustrator 创建的图稿，其中包括 SVG-t（这种格式是专为移动设备设计的）。

可以使用以下提示来确保用 Illustrator 创建的图像能够在移动设备上正确显示：

使用 SVG 标准来创建内容。通过使用 SVG 在移动设备上发布矢量图形，可获得较小的文件大小、显示独立性、绝佳的颜色控制、缩放功能以及可编辑的文本（源代码中）。此外，由于 SVG 基于 XML，因此，您可以在图像中集成交互功能，如高光、工具提示、特殊效果、音频以及动画。

从一开始工作时，就将目标移动设备的最终尺寸作为设计依据。虽然 SVG 是可缩放的，但通过在工作时将正确大小作为设计依据，可确保为目标设备优化最终图形的品质和大小。

将 Illustrator 颜色模式设置为 RGB。 SVG 是在 RGB 栅格显示设备上进行查看的，如显示器。

要减小文件大小，请尽量减少对象（包括组）数量或降低其复杂性（较少的点）。通过使用较少的点，可显著减少在 SVG 文件中描述图稿所需的文本信息量。要减少点数，请选择 “对象 ”>“路径 ”>“简化 ”，并尝试不同的组合以找到品质和点数之间的平衡点。

尽可能使用符号。符号定义一次描述对象的矢量，而不是定义多次。如果图稿包含重复使用的对象（如按钮背景），这是非常有用的。

对图形进行动画处理时，应限制所使用的对象数量，并尽可能重复使用对象以减小文件大小。将动画应用于对象组而非单个对象以避免代码重复。

考虑使用 SVGZ，这是 SVG 的压缩 gzip 版本。压缩可以显著减小文件大小，具体取决于内容。通常可以对文本进行大量压缩，但无法显著压缩采用二进制编码的内容，如嵌入的栅格（ JPEG、PNG 或 GIF 文件）。任何可展开使用 gzip 压缩的文件的应用程序都能够解压缩 SVGZ 文件。要成功使用 SGVZ，请检查目标移动设备能否解压缩 gzip 文件。

有关创建移动电话和移动设备内容的更多技巧和方法，请参阅 www.adobe.com/go/learn_cs_mobilewiki_cn。