当前位置: 首页 > news >正文

Adobe Illustrator关于图标创建的问题

余 佳 琪

一、前言

二、制作中问题产生

2.1图层繁多

2.2画板“失踪”

2.3填充物体还是颜色

导出问题

3.1图标不匹配

3.2图标导出混乱

关键词:AI,图层,画板,SVG图标

一、前言

在网页制作当中,可以看到有一种样式不可或缺,那就是SVG图标,又被称为可缩放矢量图形。而作为矢量图形来说,最重要的一点便是不会失真,这也是为什么我们怎么喜爱它的原因,毕竟谁也不想那些重要标识物,被人一放大就毁了吧,那就太糟了。好了,说回前言,在矢量图标的制作中,我们可以采用代码绘制,也可以通过Adobe Illustrator,摹客DT,CorelDRAW等等进行绘图然后交由软件生成代码。也正因此,今天我想和大家说说关于我在从PS转到学习AI(adobe illustrator)时遇到的相关问题。

二、制作中问题产生

2.1图层繁多

打开AI,你可以看到和PS不一样的图层展示。在PS中,你可以看到图层是由你自己决定的,你想要几个就几个,但在AI中,你会发现你再也不能随意添加图层了,因为只要你随便画一笔他就会给你建立一个图层,如图:

所以这个时候你就更要好好管理你的图层,可以进行编组也可通过一侧的工具栏中一些如混合工具,shaper,形状生成工具等来对你的图层进行组合处理。当然,要注意,像编组这样的从本质来说原本图层并没有发生组合,只是将其归为一组处理,但是你要对其在组内进行处理后,再将其取消编组,当然是不会有任何影响的,你之后要再想解除对它的处理都可以。但你若强行将其编组分开,你就会发现经你处理过的图层变成了“崭新的”图层,也就是说你在编组内对它的处理再也没办法消除了,它现在是经历过此类变化后的新图层。

而且用过PS的宝宝们,,相信大家都知道一些组合键用于混合你的图层,而假设你忘了你的组合键,你也可以选择直接右键然后点选。但是,在我们的AI里,你会发现在图层面板,右键没用了,他不会出来任何选项,只有当你在图像中直接点选右键后才会出现你想要的答案,而且组合键也不大一样了,像是PS中常用的Ctrl+J复制图层,在AI里却是做连接对象之用的,如图变化:

这也是AI和PS的不同之处,也因此要用惯PS的人在转向AI后可能会有点不大习惯,但没关系的,相信大家很快就又能掌握诀窍了。

2.2 画板“失踪”

相信大家看到这个画板失踪,都会有点蒙圈吧,画板怎么还会失踪呢,难不成它还长腿跑了。而事实是它虽然没有长腿跑了,但你却没有找到它,如图所示:

而这个时候你就可以点击窗口下面的导航器,并点选中所示图案,你就会发现如下图所示:

你原本的图层面板就会出现在正中央。不知道这个时候你们有没有注意到另一个问题,为什么我上面问题图层里的文件标签怎么好像不太对呀,和你的好像不大一样,我的,如图所示:

究其原因,是因为

CMYK/CPU 预览

RGB 预览

GPU 预览

色彩模式

基于印刷油墨(青、洋红、黄、黑)

基于电子屏幕(红、绿、蓝)

取决于文档模式(RGB/CMYK 等)

渲染方式

仅用 CPU 计算,复杂图形可能卡顿

CPU 渲染(部分情况可能轻度 GPU 加速)

用 GPU 并行加速,显示流畅

色域范围

色域较窄,部分 RGB 颜色无法准确呈现

色域更广,颜色更鲜艳

同文档模式,不改变色域

适用场景

印刷前检查颜色准确性

屏幕显示类设计(网页、UI 等)

大型复杂文件或高频操作(提升流畅度)

简单来说

CMYK/CPU:看印刷效果,可能慢;

RGB:看屏幕效果,颜色全;

GPU:操作流畅,适合复杂文件。

2.3 填充物体还是颜色

不知道大家在制作图标时有没有遇到这种情况,如图所示:

填色区域不再是颜色而是物体,这是什么原因?这是因为你点击了某个图案后,在对象-图案-建立为,最后把图案确立,如图面板:

在这里,你可以根据你的需求给你的某些图形添加此图案,就相当于在你的整个图标后面建立了一个剪贴蒙版,但不同的是经此位置后,再对其移动,内里图案不会再发生改变,只由刚开始所在位置决定,并且也只有添加了此图案的物体会产生效果,其余图案不会发生变化,如图:

在这里,你可以根据你的需求给你的某些图形添加此图案,就相当于在你的整个图标后面建立了一个剪贴蒙版,但不同的是经此位置后,再对其移动,内里图案不会再发生改变,只由刚开始所在位置决定,并且也只有添加了此图案的物体会产生效果,其余图案不会发生变化,如图:

最后需要注意的是在用吸管吸取时,吸取的物体不论填充是图案,颜色,甚至于描边的大小和颜色都会被一同复刻,但若是吸取图案,图案会根据所在位置相应地进行调整。

三、导出问题

在我们使用其他软件时,或许我们所需要做的只是导出,选择样式,然后就大功告成了,但是AI它不一般,它说你要想这么简单打发我,但我可就要出点问题啦,就图所示,图一导入网页全黑,没有色彩,图二直接开始错乱,无缘无故就多了条莫名的线,如:

图一

图二

而这些问题也好处理,且听我细细与你道来。

3.1 图标不匹配

首先先来解释一下为什么再放置于网站代码的时候我们原本完美的图标颜色会消失呢?如图所示:

这是因为在我们选择样式时选择了内部CSS,显示代码,我们能看到,如图:

采用的是外联样式,毫无疑问,这个的方便样式复用与修改,而且代码结构清晰,可以说深受前端工作者的喜爱。但是,这个也很容易造成不稳定,

文件路径错误:如果 HTML 文件引用外部 CSS 文件的路径设置不正确,就无法加载到对应的样式,导致页面样式出现混乱或丢失。比如,在 HTML 中使用<link rel="stylesheet" href="styles.css"> 引入样式表,但实际的 CSS 文件存放在css文件夹下,正确路径应该是<link rel="stylesheet" href="css/styles.css"> ,错误的路径会使样式无法生效。

网络问题:当外部 CSS 文件存放在远程服务器上时,如果网络不稳定,比如网络延迟、服务器响应慢或出现故障等,会导致 CSS 文件加载缓慢甚至无法加载。这样一来,页面在加载时可能会先以默认样式显示,或者出现样式闪烁等不稳定现象 。

缓存问题:浏览器会缓存 CSS 文件,当对 CSS 文件进行修改后,浏览器可能仍然使用缓存中的旧版本,导致页面显示的样式不是最新的,给人一种样式不稳定的错觉 。

样式优先级冲突:如果页面中同时存在内联样式、内部样式表以及外联样式,并且没有正确处理样式优先级,就可能导致外联样式的效果被其他高优先级的样式覆盖。例如,内联样式的优先级高于外联样式,当内联样式和外联样式针对同一个元素设置了不同的样式规则时,会优先显示内联样式 。

CSS 文件损坏:CSS 文件本身可能因为各种原因(如文件传输错误、存储设备故障等)出现损坏,导致其中的样式规则无法正常解析和应用,影响页面样式的稳定性 。

也因此,这个时候我们可以将我们的样式进行更改,将其换为内联样式或演示文稿属性。

3.2 图标导出混乱

说起我们图标导出混乱的事,那情况可就多了,有缺口的,有直线变曲线的,还有图二所示的多线,甚至还有直接变样的,只能说很优秀了,那现在来让我们看看怎么解决吧。

让我们继续聚焦于这张图:

在文字的选择上,我们可以看到有两个选择,区别在于SVG保留了文本属性,方便开发人员通过代码对文字进行动态修改和样式调整或自行修改文字内容,而转换为轮廓则是将其完全转化为矢量图形,规避了文字版权风险,方便了文字的变形。

图像,分为保留,嵌入,链接。

保留:维持图像原始属性,不做特殊处理,文件中记录图像信息但不直接整合数据,兼容性较弱,可能因环境差异导致显示问题。

嵌入:将图像数据直接整合到文件内部,形成独立完整的文件,传输共享方便,无外部依赖,但会增加文件体积。

链接:仅记录外部图像的存储路径,不包含实际数据,能控制文件大小,便于修改源图像,但依赖外部文件,路径变动易导致图像丢失。

对象ID于图像导出质量无关,只作为ID标识存在,小数所代表的则是控制 SVG 代码里坐标、尺寸等数值的小数位数,这里设为 1,意味着数值最多保留 1 位小数(比如原本坐标是10.234,会变成10.2 ),也因此你要想你的图标导出越准确,这里的值便要越高。

至于缩小和响应,一个是帮你 “压缩” SVG 的基础显示范围,避免导出后图标默认显示过大 / 过小 ,一个则是让导出后图标自动缩放适配于不同容器中,保持比例和显示效果,避免了手动调整的麻烦。

而要解决我们图标导出混乱的问题,首先我们的小数值要大,为避免麻烦,缩小和响应进行勾选,字体和图像则根据我们有无使用及相应的要求进行调整。

http://www.xdnf.cn/news/1108297.html

相关文章:

  • 【跟我学运维】chkconfig jenkins on的含义
  • 初等行变换会改变矩阵的什么?不变改变矩阵的什么?求什么时需要初等行变换?求什么时不能初等行变换?
  • 回归(多项式回归)
  • 电网通俗解析术语2:一二次设备关联
  • 【PycharmPyqt designer桌面程序设计】
  • Effective Modern C++ 条款9:优先考虑别名声明而非typedef
  • Socket到底是什么(简单来说)
  • 【Elasticsearch】昂贵算法与廉价算法
  • 史上最全 MySQL 锁详解:从理论到实战,一篇搞定所有锁机制
  • 网络编程员工管理系统
  • 【数据分析】03 - Matplotlib
  • 【Elasticsearch 】search_throttled
  • 力扣-19. 删除链表的倒数第N个节点
  • Windows环境下解决Matplotlib中文字体显示问题的详细指南
  • Git入门教程
  • JVM与系统性能监控工具实战指南:从JVM到系统的全链路分析
  • 虚拟现实的镜廊:当技术成为存在之茧
  • Unity VR手术模拟系统架构分析与数据流设计
  • 深度学习图像分类数据集—害虫识别分类
  • [论文阅读] 人工智能 + 软件工程 | AI助力软件可解释性:从用户评论到自动生成需求与解释
  • JVM 类加载过程
  • Django母婴商城项目实践(四)
  • OpenEuler操作系统中检测插入的USB设备并自动挂载
  • perftest测试连接是否稳定shell脚本
  • Typecho博客系统与WebSocket实时通信整合指南
  • Ubuntu快速搭建QT开发环境指南,5000字解析!!
  • 前端note
  • 【Lucene/Elasticsearch】**Query Rewrite** 机制
  • RabbitMQ面试精讲 Day 1:RabbitMQ核心概念与架构设计
  • PostgreSQL HOT (Heap Only Tuple) 更新机制详解