《Illustrator教程》由会员分享，可在线阅读，更多相关《Illustrator教程（90页珍藏版）》请在金锄头文库上搜索。
1、344上次更新2010/5/18 第 11 章: Web 图形创建 Web 图形的最佳做法Illustrator 提供多种工具用来创建网页输出，以及创建并优化网页图形。例如，使用 Web 安全颜色，平衡图像品质和文件大小以及为图形选择最佳文件格式。Web 图形可充分利用切片、图像映射的优势，并可使用多种优化选项，同时可以和 Device Central 配合以确保文件在网页上的显示效果良好。关于 Web 图形设计 Web 图形时，所要关注的问题与设计印刷图形截然不同。有关存储 Web 图形的视频，请参阅 Web 应用程序之间进行导入、复制以及粘贴的视频，请参阅 Web 图形方面作出客观决策
2、，请记住以下三项原则：1. 使用 Web 安全颜色。颜色通常是图稿的重要方面。然而，在画板上看到的颜色未必是在其他系统上的 Web 浏览器中所显示的颜色。创建 Web 图形时，可以通过采取两个预防措施来防止仿色 （模拟不可用颜色的方法）和其他颜色问题。第一，始终在 RGB 颜色模式下工作。其次，使用 Web 安全颜色。2. 通过文件大小平衡图像品质。在 Web 上发布图像，创建较小的图形文件非常重要。使用较小的文件，Web 服务器能够更高效地存储和传输图像，而用户能够更快地下载图像。可以在“存储为 Web 和设备所用格式”对话框中查看 Web 图形的大小和估计的下载时间。 3. 为图形选择最佳
3、文件格式。不同的图形类型需要存储为不同的文件格式，以便以最佳方式显示，并创建适用于 Web 的文件大小。有关特定格式的详细信息，请参阅 Web 图形优化选项。有许多专为 Web 设计的 Illustrator 模板，包括网页和横幅。选择“文件”“从模板新建”以选择一个模板。更多帮助主题 第131 页的“将颜色转换为 Web 安全颜色”关于像素预览模式为了使网页设计师能够创建像素精确的设计，已在 Illustrator CS5 中添加了像素对齐属性。为对象启用像素对齐属性之后，该对象中的所有水平和垂直段都会对齐到像素网格，像素网格可以为描边提供清晰的外观。在任何变换中，只要为对象设置了此属性，对
4、象都会根据新的坐标重新对齐像素网格。您可以通过选择“变换”面板中的“对齐像素网格”选项来启用此属性。 Illustrator CS5 也在文档级别提供了“使新建对象与像素网格对齐”选项，默认情况下已对 Web 文档启用该选项。启用此属性后，默认情况下您绘制的任何新对象都会具有像素对齐属性。 有关更多信息，请参阅第53 页的“绘制用于 Web 工作流程的像素对齐路径”。以位图格式 （如 JPEG、GIF 或 PNG）保存图稿时，Illustrator 会以每英寸 72 像素来栅格化该图稿。可以通过选择“视图 ”“像素预览”来预览栅格化的对象显示情况。如果您要在栅格化图形中控制对象的精确位置、大小
5、和对象的消除锯齿效果时，这个功能尤其有用。 345使用 ILLUSTRATOR CS5 Web 图形上次更新2010/5/18 要了解 Illustrator 如何将对象划分为像素，请打开一个包含矢量对象的文件，选择“视图”“像素预览”，然后放大图稿以便能够看到其单个像素。像素位置由像素网格确定，此网格将 1 磅（1/72 英寸）作为增量来分割画板。当放大到 600% 视图时，您就可以查看像素网格。如果移动、添加或变换对象，则对象会自动对齐像素网格。因此，沿对象“对齐”边缘的任何消除锯齿效果 （通常在左侧边缘和顶部边缘）都会消失。现在，取消选择“视图”“对齐像素”命令，然后移动该对象。这样，您
6、将能够在网格线之间放置对象。注意这将如何影响对象的消除锯齿效果。正如您所看到的，非常小的调整都会影响对象的栅格化操作。“像素预览”关闭 （顶部）与打开 （底部）的比较图重要说明： 像素网格对标尺原点 (0,0) 敏感。移动标尺原点将改变 Illustrator 网格化图稿的方式。更多帮助主题 第53 页的“绘制用于 Web 工作流程的像素对齐路径”第245 页的“关于位图图像”将 Adobe Device Central 与 Illustrator 配合使用通过使用 Device Central，Illustrator 用户可以预览 Illustrator 文件在各种移动设备上的显示效果。例如
7、，图形设计师可以使用 Illustrator 为移动电话设计墙纸。在创建文件后，设计师可以方便地在多种不同的电话上测试该文件。设计师可随后进行相应的调整，如更改文件以使其在很多电话上都具有不错的显示效果，或者创建两个单独的文件以涵盖常用的电话屏幕大小范围。更多帮助主题 在 Illustrator 中创建移动内容从 Adobe Device Central 访问 Illustrator 1启动 Device Central。2选择“文件”“在以下应用程序中新建文档”“Illustrator”。在 Device Central 中，将显示“新建文档”面板，其中包含在所选应用程序中创建新的移动文档的
8、正确选项。3进行任何所需更改，例如选择播放器版本、显示大小、Flash 版本或内容类型等。4执行下列操作之一：选择“所有选定设备的自定尺寸”选项，然后添加一个宽度和高度 （以像素为单位） 。从“设备组”列表或“可用的设备”列表中选择一个或多个设备。5如果选择了多个设备，Device Central 将为您选择一个大小。如果要选择不同的大小，请单击一个不同的设备或一组设备。6单击“创建”。将打开所选的应用程序，其中包含准备编辑的新移动文档。346使用 ILLUSTRATOR CS5 Web 图形上次更新2010/5/18 使用 Adobe Device Central 和 Illustrator
9、 创建移动内容 1在 Illustrator 中，选择“文件” “新建”。2在“新建文档配置文件”中，选择“移动和设备”。 3单击“Device Central”以关闭 Illustrator 中的对话框并打开 Device Central。4选择一种内容类型。将更新左侧的“可用的设备”列表，并显示支持所选内容类型的设备。5在 Device Central 中，选择一个设备、几个设备或设备组。根据所选的设备和内容类型，Device Central 将建议一个或多个要创建的画板大小。要一次创建一个文档，请选择一个建议的文档大小 （或选择“所有选定设备的自定尺寸”选项并为“宽度”和“高度”输入自定
10、义值） 。6单击“创建”。 将在 Illustrator 中打开一个具有指定大小的空白 AI 文件。默认情况下，新文件设置了以下参数：颜色模式：RGB栅格分辨率：72 ppi7在 Illustrator 中使用内容填充空白 AI 文件。8完成后，请选择“文件”“存储为 Web 和设备所用格式”。9在“存储为 Web 和设备所用格式”对话框中，选择所需的格式，并根据需要更改其他导出设置。10单击“Device Central”。 在“Device Central 模拟器”选项卡中，将显示一个具有指定导出设置的临时文件。要继续进行测试，请在“设备组”或“可用的设备”列表中双击另一个设备的名称。11
11、在 Device Central 中预览文件后，如果需要对文件进行更改，请返回到 Illustrator。12在 Illustrator 的“存储为 Web 和设备所用格式”对话框中进行调整，如选择不同的导出格式或品质。 13要使用新的导出设置再次测试文件，请单击“Device Central”。14如果对结果感到满意，请在 Illustrator 的“存储为 Web 和设备所用格式”对话框中单击“存储”。注： 要仅从 Illustrator 中打开 Device Central（而不是创建和测试文件） ，请选择“文件”“Device Central”。有关使用 Illustrator 和 D
12、evice Central 创建内容的教程，请参阅 http:/ Illustrator 图像的提示要为移动设备优化图形内容，请以任何 SVG 格式来存储用 Illustrator 创建的图稿，其中包括 SVG-t（这种格式是专为移动设备设计的） 。可以使用以下提示来确保用 Illustrator 创建的图像能够在移动设备上正确显示：使用 SVG 标准来创建内容。通过使用 SVG 在移动设备上发布矢量图形，可获得较小的文件大小、显示独立性、绝佳的颜色控制、缩放功能以及可编辑的文本 （源代码中） 。此外，由于 SVG 基于 XML，因此，您可以在图像中集成交互功能，如高光、工具提示、特殊效果、音
13、频以及动画。从一开始工作时，就将目标移动设备的最终尺寸作为设计依据。虽然 SVG 是可缩放的，但通过在工作时将正确大小作为设计依据，可确保为目标设备优化最终图形的品质和大小。将 Illustrator 颜色模式设置为 RGB。SVG 是在 RGB 栅格显示设备上进行查看的，如显示器。要减小文件大小，请尽量减少对象 （包括组）数量或降低其复杂性 （较少的点） 。通过使用较少的点，可显著减少在 SVG 文件中描述图稿所需的文本信息量。要减少点数，请选择“对象”“路径”“简化”，并尝试不同的组合以找到品质和点数之间的平衡点。347使用 ILLUSTRATOR CS5 Web 图形上次更新2010/5
14、/18 尽可能使用符号。符号定义一次描述对象的矢量，而不是定义多次。如果图稿包含重复使用的对象 （如按钮背景） ，这是非常有用的。对图形进行动画处理时，应限制所使用的对象数量，并尽可能重复使用对象以减小文件大小。将动画应用于对象组而非单个对象以避免代码重复。考虑使用 SVGZ，这是 SVG 的压缩 gzip 版本。压缩可以显著减小文件大小，具体取决于内容。通常可以对文本进行大量压缩，但无法显著压缩采用二进制编码的内容，如嵌入的栅格（JPEG、PNG 或 GIF 文件） 。任何可展开使用 gzip 压缩的文件的应用程序都能够解压缩 SVGZ 文件。要成功使用 SGVZ，请检查目标移动设备能否解压
15、缩 gzip 文件。有关创建移动电话和移动设备内容的更多技巧和方法，请参阅 - HTML 文本、位图图像和矢量图等等。在 Illustrator 中，可以使用切片来定义图稿中不同 Web 元素的边界。例如，如果图稿包含需要以 JPEG 格式进行优化的位图图像，而图像其他部分更适合作为 GIF 文件进行优化，则可以使用切片隔离位图图像。使用“存储为 Web 和设备所用格式”命令将图稿存储为网页时，您可以选择将每个切片存储为一个独立文件，它具有其自己的格式、设置以及颜色表。Illustrator 文档中的切片与生成的网页中的表格单元格相对应。默认情况下，切片区域可导出为包含于表格单元格中的图像文
16、件。如果希望表格单元格包含 HTML 文本和背景颜色而不是图像文件，则可以将切片类型更改为“无图像”。如果希望将 Illustrator 文本转换为 HTML 文本，则可以将切片类型更改为“HTML 文本”。 使用不同切片类型的切片图稿 A. “无图像”切片 B. “图像”切片 C. “HTML 文本”切片 可以在画板上和“存储为 Web 和设备所用格式”对话框中查看切片。Illustrator 会从图稿的左上角开始，对切片从左到右、从上到下编号。如果更改切片的排列或切片总数，切片编号则会更新，以反映新的顺序。 创建切片时，Illustrator 会将周围的图稿切为自动切片，以使用基于 Web 的
