Illustrator 提供多种工具用来创建网页输出，以及创建并优化网页图形。例如，使用 Web 安全颜色，平衡图像品质和文件大小以及为图形选择最佳文件格式。Web 图形可充分利用切片、图像映射的优势，并可使用多种优化选项，同时可以和 Device Central 配合以确保文件在网页上的显示效果良好。

关于 Web 图形

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

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

1. 使用 Web 安全颜色。

颜色通常是图稿的重要方面。然而，在画板上看到的颜色未必是在其他系统上的 Web 浏览器中所显示的颜色。创建 Web 图形时，可以通过采取两个预防措施来防止仿色（模拟不可用颜色的方法）和其他颜色问题。第一，始终在 RGB 颜色模式下工作。其次，使用 Web 安全颜色。

2. 通过文件大小平衡图像品质。

在 Web 上发布图像，创建较小的图形文件非常重要。使用较小的文件，Web 服务器能够更高效地存储和传输图像，而用户能够更快地下载图像。可以在“存储为 Web 和设备所用格式”对话框中查看 Web 图形的大小和估计的下载时间。

3. 为图形选择最佳文件格式。

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

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

关于像素预览模式

为了使网页设计师能够创建像素精确的设计，已在 Illustrator CS5 中添加了像素对齐属性。为对象启用像素对齐属性之后，该对象中的所有水平和垂直段都会对齐到像素网格，像素网格可以为描边提供清晰的外观。在任何变换中，只要为对象设置了此属性，对象都会根据新的坐标重新对齐像素网格。您可以通过选择“变换”面板中的“对齐像素网格”选项来启用此属性。Illustrator CS5 也在文档级别提供了“使新建对象与像素网格对齐”选项，默认情况下已对 Web 文档启用该选项。启用此属性后，默认情况下您绘制的任何新对象都会具有像素对齐属性。

有关更多信息，请参阅绘制用于 Web 工作流程的像素对齐路径。

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

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

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

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

另请参阅

绘制用于 Web 工作流程的像素对齐路径

关于位图图像

将 Adobe Device Central 与 Illustrator 配合使用

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

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

从 Adobe Device Central 访问 Illustrator

  1. 启动 Device Central。

  2. 选择“文件”>“在以下应用程序中新建文档”>“Illustrator”。

    在 Device Central 中，将显示“新建文档”面板，其中包含在所选应用程序中创建新的移动文档的正确选项。


  3. 进行任何所需更改，例如选择播放器版本、显示大小、Flash 版本或内容类型等。

  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 文件。

,