用户指南 取消(C)

创建 Web 图形的最佳做法

  1. 《Illustrator 用户指南》
  2. 了解 Illustrator
    1. Illustrator 简介
      1. Illustrator 的新增功能
      2. 常见问题
      3. Illustrator 系统要求
      4. 适用于 Apple Silicon 的 Illustrator
    2. 工作区
      1. 工作区基础知识
      2. 创建文档
      3. 工具
      4. 默认键盘快捷键
      5. 自定快捷键
      6. 画板简介
      7. 管理画板
      8. 自定义工作区
      9. “属性”面板
      10. 设置首选项
      11. 触控工作区
      12. Illustrator 中的 Microsoft Surface Dial 支持
      13. 恢复、还原以及自动化
      14. 旋转视图
      15. 标尺、网格和参考线
      16. Illustrator 中的无障碍功能
      17. 安全模式
      18. 查看图稿
      19. 将 Touch Bar 与 Illustrator 结合使用
      20. 文件和模板
    3. Illustrator 中的工具
      1. 选区
        1. 概述
        2. 选择
        3. 直接选择
        4. 套索
        5. 画板
      2. 导航
        1. 概述
        2. 缩放
        3. 旋转视图
      3. 上色
        1. 概述
        2. 渐变
        3. 形状生成器
      4. 文字
        1. 概述
        2. 文字
        3. 路径文字
  3. Illustrator iPad 版
    1. Illustrator iPad 版简介
      1. Illustrator iPad 版概述
      2. Illustrator iPad 版常见问题解答
      3. 系统要求 | Illustrator iPad 版
      4. 在 Illustrator iPad 版上可以或无法执行的操作
    2. 工作区
      1. Illustrator iPad 版工作区
      2. 触控快捷键和手势
      3. Illustrator iPad 版的键盘快捷键
      4. 管理应用程序设置
    3. 文档
      1. 在 Illustrator iPad 版中处理文档
      2. 导入 Photoshop 和 Fresco 文档
    4. 选择和排列对象
      1. 创建重复对象
      2. 混合对象
    5. 绘图
      1. 绘制和编辑路径
      2. 绘制和编辑形状
    6. 文字
      1. 处理文字和字体
      2. 在路径上创建文本设计
      3. 添加您自己的字体
    7. 处理图像
      1. 对栅格图像进行矢量化
    8. 颜色
      1. 应用颜色和渐变
  4. 云文档
    1. 基本信息
      1. 使用 Illustrator 云文档
      2. 共享并协作处理 Illustrator 云文档
      3. 升级 Adobe Illustrator 的云存储空间
      4. Illustrator 云文档 | 常见问题
    2. 故障诊断
      1. Illustrator 云文档创建或存储问题故障诊断
      2. 对 Illustrator 云文档问题进行故障诊断
  5. 添加和编辑内容
    1. 绘图
      1. 绘图基础知识
      2. 编辑路径
      3. 绘制像素级优化的图稿
      4. 使用钢笔、曲率或铅笔工具绘制
      5. 绘制简单线段和形状
      6. 图像描摹
      7. 简化路径
      8. 定义透视网格
      9. 符号工具和符号组
      10. 调整路径段
      11. 利用简单 5 步设计花朵
      12. 透视图
      13. 符号
      14. 绘制用于 Web 工作流程的像素对齐路径
    2. 3D 效果和 Adobe Substance 材质
      1. 关于 Illustrator 中的 3D 效果
      2. 创建 3D 图形
      3. 将图稿贴在 3D 对象上
      4. 创建 3D 对象
      5. 创建 3D 文本
    3. 颜色
      1. 关于颜色
      2. 选择颜色
      3. 使用和创建色板
      4. 调整颜色
      5. 使用“Adobe Color 主题”面板
      6. 颜色组(协调)
      7. “颜色主题”面板
      8. 重新着色图稿
    4. 绘画
      1. 关于绘画
      2. 使用填色和描边上色
      3. 实时上色组
      4. 渐变
      5. 画笔
      6. 透明度和混合模式
      7. 为对象应用描边
      8. 创建和编辑图案
      9. 网格
      10. 图案
    5. 选择和排列对象
      1. 选择对象
      2. 图层
      3. 编组和扩展对象
      4. 移动、对齐和分布对象
      5. 堆叠对象    
      6. 锁定、隐藏和删除对象
      7. 复制对象
      8. 旋转和镜像对象
    6. 改变对象形状
      1. 裁切图像
      2. 变换对象
      3. 组合对象
      4. 剪切、分割和裁切对象
      5. 操控变形
      6. 缩放、倾斜和扭曲对象
      7. 混合对象
      8. 使用封套改变形状
      9. 使用效果改变对象形状
      10. 使用 Shaper 和形状生成器工具构建新的形状
      11. 使用实时转角
      12. 增强的支持触摸式变形工作流程
      13. 编辑剪贴蒙版
      14. 实时形状
      15. 使用形状生成器工具创建形状
      16. 全局编辑
    7. 文字
      1. 添加文本并使用文字对象
      2. 管理文本区域
      3. 字体和排版
      4. 设置文字格式
      5. 导入和导出文本
      6. 设置段落格式
      7. 特殊字符
      8. 创建路径文字
      9. 字符和段落样式
      10. 制表符
      11. 文本和文字
      12. 查找缺失字体(Typekit 工作流程)
      13. 从 Illustrator 10 更新文本
      14. 阿拉伯语和希伯来语文字
      15. 字体 | 常见问题解答和故障排除提示
      16. 创建 3D 文本效果
      17. 创意排版设计
      18. 缩放和旋转文字
      19. 行距和字距
      20. 连字和换行
      21. 文本增强功能
      22. 拼写和语言词典
      23. 设置亚洲字符格式
      24. 亚洲语言脚本书写器
      25. 使用混合对象创建文本设计
      26. 使用图像描摹创建文本海报
    8. 创建特殊效果
      1. 使用效果
      2. 图形样式
      3. 创建投影
      4. 外观属性
      5. 创建素描和马赛克
      6. 投影、发光和羽化
      7. 效果小结
    9. Web 图形
      1. 创建 Web 图形的最佳做法
      2. 图表
      3. SVG
      4. 创建动画
      5. 切片和图像映射
  6. 导入、导出和存储
    1. 导入
      1. 导入图稿文件
      2. 导入位图图像
      3. 从 Photoshop 导入图稿
      4. 置入多个文件
      5. 取消嵌入图像
      6. 导入 Adobe PDF 文件
      7. 导入 EPS、DCS 和 AutoCAD 文件
      8. 链接信息
    2. Illustrator 中的 Creative Cloud Libraries 
      1. Illustrator 中的 Creative Cloud Libraries
    3. 保存
      1. 存储图稿
    4. 导出
      1. 在 Photoshop 中使用 Illustrator 图稿
      2. 导出图稿
      3. 收集资源并批量导出
      4. 打包文件
      5. 创建 Adobe PDF 文件
      6. 提取 CSS | Illustrator CC
      7. Adobe PDF 选项
      8. 文件信息和元数据
  7. 打印
    1. 准备打印
      1. 设置打印文档
      2. 更改页面大小和方向
      3. 指定用于裁切或对齐的裁切标记
      4. 大型画布快速入门
    2. 打印
      1. 叠印
      2. 使用颜色管理进行打印
      3. PostScript 打印
      4. 打印预设
      5. 印刷标记和出血
      6. 打印和存储透明图稿
      7. 陷印
      8. 打印分色
      9. 打印渐变、网格和颜色混合
      10. 白色叠印
  8. 任务自动化
    1. 使用“变量”面板合并数据
    2. 脚本的自动化
    3. 动作的自动化
  9. 故障诊断 
    1. 崩溃问题
    2. 崩溃后恢复文件
    3. 文件问题
    4. 支持的文件格式
    5. GPU 设备驱动程序问题
    6. Wacom 设备问题
    7. DLL 文件问题
    8. 内存问题
    9. 首选项文件问题
    10. 字体问题
    11. 打印机问题
    12. 与 Adobe 共享崩溃报告

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

Adobe 徽标

登录到您的帐户

[Feedback V2 Badge]