当前位置: 萬仟网 > IT编程>UI设计>Illustrator > 在 Illustrator 中创建 Web 图形的最佳做法

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

2021年12月27日 Illustrator 我要评论
illustrator 提供多种工具用来创建网页输出,以及创建并优化网页图形。例如,使用 web 安全颜色,平衡图像品质和文件大小以及为图形选择最佳文件格式。web 图形可充分利用切片、图像映射的优势

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%,即可查看像素网格。如果移动、添加或变换对象,则对象会自动对齐像素网格。因此,沿对象“对齐”边缘的任何消除锯齿效果(通常在左侧边缘和顶部边缘)都会消失。现在,取消选择“视图”>“对齐像素”命令,然后移动该对象。这样,您将能够在网格线之间放置对象。注意这将如何影响对象的消除锯齿效果。正如您所看到的,非常细微的调整也可能会影响对象栅格化的方式。

在 illustrator 中创建 web 图形的最佳做法

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

注意:像素网格对标尺原点 (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 安全颜色

绘制像素级优化的图稿

关于位图图像

以上就是在 illustrator 中创建 web 图形的最佳做法的详细内容,更多关于illustrator下载的资料请关注萬仟网其它相关文章!

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • Win11怎么设置小任务栏?Win11设置小任务栏图文方法

    Win11怎么设置小任务栏?Win11设置小任务栏图文方法

    很多小伙伴都已经升级到了win11系统进行体验,但是在使用的时候觉得自带的任务栏太大,想要变小却不知道如何操作,那么遇到这种问题应该怎么办呢?下面就和小编一起来... [阅读全文]
  • airpods通透模式和降噪模式有什么区别?

    airpods通透模式和降噪模式有什么区别?

    airpods通透模式和降噪模式区别并不大,差不多的功能,但往细了说还是有点差别的。如果你不太了解airpods通透模式如何开启关闭,可以看看本站提供的详细介绍... [阅读全文]
  • 攀升A3刀锋一体机电脑评测

    办公电脑不同于游戏电脑,不需要酷炫的外观作为装饰,也不需要强力的性能作为支撑,而在办公领域一体机有天然的优势。在外观上,一体机没有花哨的光效,能适应各类办公场所。同时又因为脱离了机…

    2021年12月27日 办公
  • 如何在 Adobe Illustrator 中创建投影?ai制作投影

    如何在 Adobe Illustrator 中创建投影?ai制作投影

    illustrator 是一款由adobe公司设计的全球最为知名的矢量图形软件。借助这款行业标准的矢量图形软件,您可以制作适用于印刷、web、视频和移动设备的徽... [阅读全文]
  • 腾讯守护平台实名认证怎么解除 腾讯守护平台实名认证如何修改

    为了守护用户上网安全,腾讯守护平台要求用户进行实名认证。如果不小心输错了实名信息,可以进行更改。如果你不知道该如何修改的话,就来看看下面小编带来的文章吧,看完你就知道了。微信安卓版…

    2021年12月27日 腾讯

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com