在 Illustrator 中创建 Web 图形的最佳做法

三岁教程网 2022-11-12 00:00:00 71 抢沙发

默认

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

关于 Web 图形

设计 Web 图形时，所要关注的问题与设计印刷图形截然不同。

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

使用 Web 安全颜色。

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

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

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

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

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

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

关于像素预览模式

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

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

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

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

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

注意:像素网格对标尺原点 (0,0) 敏感。移动标尺原点将改变 Illustrator 网格化图稿的方式。

有关为移动设备创建 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 文件。