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

关于 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 网格化图稿的方式。

将 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 图像的提示

要为移动设备优化图形内容,请以任何 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 文件。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略