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

优质
小牛编辑
128浏览
2023-12-01

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

更多此类内容

  • 收集资源并批量导出
  • 将颜色转换为 Web 安全颜色
  • 绘制像素级优化的图稿
  • 关于位图图像