赞助商
立即赞助

从零开始学!B 端产品图标绘制指南(软件篇)

UI设计3年前 (2021)更新 流光
2.9K 0 0

今天给大家介绍几个 Illustrator 杀手级功能,分享一下何让图档尽量小,反复修改且不破坏对象的图小技巧,合一通行云流水的快捷键操,你就是高手中的高手啦。

知识点

今天重点介绍外观属和几个相关的识点。为什么外观属很重要?有以下三点原因:

  • 利用外观属性能够「无损」作图,即不破坏对象本身;
  • 快速选择具有相同外观属的对象;
  • 可量修改、增、删除具有相同外观属性对象的属性参数。

1. 外观属性和外观面板

首先了解下什是外观属性,以及如何在外观面板中查外观属性:

外观属性是一组在不改变对象基础结构的前提下响对象外观的属性。外观属性包括填色、描边、透度和效果。如果把一个外观属性应用于某对象而后编辑或删除这个属性,该基本对象以及任何应用于该对象的其属性都不会改变。──Adobe Illustrator 用户指南

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图1.1-1 使用观板查看观属性内容。

您可以在图层层结构任意层级设观属性。例如,如您个图层应用投影效,则该图层所有象都将应用此投影效。是,如您将其个象移出该图层,则此象将不再具有投影效,为投影效属于图层,而不属于图层内个象。──Adobe Illustrator 用户指南

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图1.1-2 点击图层右侧圆点可查看图层外观面板,「圆角」效果应用于图层一。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图1.1-3 径3(黄色)从图层1挪至图层2之后,不再具「圆角」效果。

您可以使用「外观」面板(「窗口」>「外观」)查看调整对象、组或图层的外观属性。填充描将按堆栈顺序列出;面板中从到下的顺序对应于图稿中从到后的顺序。各种效果按其图稿中的应用顺序从到下排列。──Adobe Illustrator 用户指南

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图1.1-4 面顺序和效果呈现。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图1.1-5 一个对象可添多重描边、多重填色、多重效果。

2. 偏移路径 VS 位移路径

偏移路径:择对象执行「对象」>「路径」>「偏移路径」,根据位移值的正负,会外扩或缩一条的路径,本质上是复制。

移径:选择对象执行「效果」>「径」>「移径」,根据移的负,原径外扩或内缩,只外观产变化,产新的径,之后还可以外观面板里修改属性参数。

3. 扩展 VS 扩展外观

两者的区别于否应用了外观属性。

扩展对象可用将单一对象分割若对象,这些对象共同组其外观。例如,如果扩展一简单对象,例如一具实色填色描的圆,那么,填色描就会变离散的对象。如果扩展加复杂的图稿,例如具图案填充的对象,则图案会被分割各种截然不同的径,所这些径组合一起,就创建这一填充图案的径。

如象应用了观属性,则「象」>「扩展」命令将变暗。在这情况下,请选择「象」>「扩展观」,然后再选择「象」>「扩展」。

──Adobe Illustrator 用户指南

无损画图技巧

1. 矢量效果(即Illustrator效果)

矢效果可以往宏观可以用对象、编组、图层,往微观可以用矢图形的描或填色,例如图1.1-2中「圆角」效果用图层、图1.1-4中「圆角」效果用描或填色。通过「外观」面板编辑、移动、复制、删除该效果,还可将效果存储图形样式的一部分(多内请查看章节4.2 图形样式)。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.1-1 矢效果单。

移径(「效果」>「径」>「移径」)

不规则的矢图形比缩后,径间距宽窄不均。使用移径,可以确保距宽窄一致。如果对径形状行调整,移径的形状也会自动随之变化,无需手动调整。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.1-2 使用移径制作填色内缩效果。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.1-3 根据设规范,图标的景背景间距须保持一致,如图点标记置。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.1-4 统一将景的填色使用移径效果。然后对景「对象」>「扩展外观」,将白色填色独立出,作背景对象裁剪径的基准(裁剪时,剪刀具会自动捕捉到径)。

变换效果(「效果」>「扭曲变换」>「变换」)

变换效果可以宝藏效果,家试随便画一点,一条线,通过调试面板参数感受下魔般神奇的效果。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.1-5 使用变换的旋转设置绘制雪花图标。

波纹效果(「效果」>「扭曲变换」>「波纹效果」)

使用波纹效果制作波浪线,基本对象依旧直线,扩展外观之都可以反复调整波浪起伏小波浪数。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.1-6 制作纸张波浪线裁切效果。

2. 混合工具

混合具的优势,对象混合后,混合选项可继续编辑,被混合的对象也可单独调整。

将混合后象「象」>「扩展」,过渡矢量图形被路径化了,可被选并编辑。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.2-1 使用混合工具制作心圆。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.2-2 使用混合工具制作渐变波浪线,上线条含「波纹」效。

3. 剪切蒙版

「象」>「剪切蒙版」>「立」,快捷键ctrl+7/cmd+7。下案例利用剪切蒙版绘制WiFi图标:

  • 使用混合具绘制同圆,绘制蒙版。
  • 创剪切蒙版。
  • 旋转,完成。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图2.3-1 利用剪切蒙版绘制WiFi图标。

注:此时WiFi图标各部分没有被路径化。若想将其彻底路径化,需要先扩展心圆,再使用路径查找,利用剪切蒙版扩展后心圆进分隔。

快速选择目标

1. 按特征选择对象

若要择具有相同属性的有对象,请择一个具有您需属性的对象,然后择「择」>「相同」,之后再从列表(混合模式、填色和描边、填充颜色、透明、描边颜色、描边粗细、样式、符号实例和链接系列)中择一种属性。──Adobe Illustrator 户指南

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图3.1-1 选特征类型。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图3.1-2 选中一个黄对象,「选择」>「相同」>「填充颜」,即选中所有黄对象。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图3.1-3 选中具有相同外观属的对象(即位移路径2px)。

注意:如果将工具栏的「例缩放工具」面中「例缩放描边和效果」勾,单个对象在缩放过程中描边粗细和效果参数(如圆角半径、路径位移距离、模糊大小等)等缩放,那么按照特征量择时,「择相同描边」或「择相同外观」就无法将中。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图3.1-4 描边粗细和效果参数等缩放。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图3.1-5 建议取消勾「例缩放描边和效果」,避免微调过程中对象特征统一,无法量择。

2. 编组和隔离对象

隔离模式自动锁定其他所有对象,因此您所做的编辑只影响处隔离模式的对象 — 您不需要关心对象在哪个图上,也不需要手动锁定或隐藏不应受所做编辑影响的对象。
隔离模处于现用状态时,隔离象以全色显示,而图稿其余部分则会变暗。geli(有时称为「屑」)显示在隔离模边框,而「图层」板则仅仅显示隔离子图层或组图稿。退出隔离模时,其他图层和组将新显示在「图层」板。──Adobe Illustrator 用户指南

将需要批量操作象编组,进入隔离模后(使用选择工具双击路径或组,按 Esc 键退出)编辑象,隔离部分以内容不会被选。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图3.2-1 隔离象后,选择相描边粗细或描边颜色,隔离部分以内容不会被选。

3. 巧用图层

创作者要在作图开始图层内容有所规划,避免将所有内容都放在个图层内,否则到后选择目标时会团乱麻。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图3.3-1把图标描边和填色分两个图层,便于单独调。

批量修改外观

1. 复制外观

对象间复制外观属性两种方法:

拖动:将象A「观」板缩略图拖动到象B,即可将象A观复制到象B。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图4.1-1 拖动观板缩略图,复制观。

使用吸管工:选中对象B,用「吸管」工点击对象A,即可将对象A外观复制对象B。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图4.1-2 使用「吸管」工复制外观记得要勾选「外观」选项。

2. 图形式

可以将某对象的外观属性创建为图形式,再把图形式应用其对象上,即可复制成功。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图4.2-1 创建图形式,把对象拖进图形式面板就可以了。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图4.2-2 应用图形式,可以选中对象后点击图形式,或者直将图形式拖对象上。

3. 符号实例

Illustrator中的「符号」和Sketch中的「组件」如出一辙,可以显著降低图档大,提高修改效率。假如有领导想让你把计图百个按钮的颜色换一换,圆角调一调啥的,如果你把所有按钮都应用了「符号实例」,那这个功能就派上大用了。

符号是在文档中可重复使用的图稿对象。例如,如果您根据鲜花创建符号,可将该符号的实例多次添加您的图稿,而无须实际多次添加复杂图稿。每个符号实例都链「符号」面板中的符号或符号库。使用符号可节您的间并显著减文件大。

也以在 Illustrator 中指定 9 切缩放,以便符号在用用户界面组件时能够适当地缩放。

──Adobe Illustrator 户指南

「符号实例」和「图形样式」有点类似,差异点在于,对符号的外观属性进行修改,那么有联的符号实例的外观属性一起改变,联断开;而对应了图形样式的对象的外观属性进行修改,影响此图形样式,对象和图形样式的联断开。

Last But Not Least

1. 少用钢笔,多使用路径查找器

使用路径查找器考验的是设计师对图形特征进行提取和运的能力,深思熟虑往往能找到的最快图方案,果一开始就盲目使用钢笔,有能应句:

我赶时间,所以我走远路。──《认与设计》

2. 检查图档内有没有以下内容

游离。

「选择」>「象」>「游离」,选后删除。

多余锚。

是那看起来是个锚,放大发现是两个锚离很近,或者是叠起来两个锚,需要将多余锚删除。这多余锚生经常是在几个象未齐情况下使用路径查找导致。所以不要凭感觉齐,而是使用齐工具或者开启智能参考线(便于捕捉路径)。

描边和填色都为空路径。

在预览模下这路径是看不见,我办法是,画个描边和填色都为空路径,「选择」>「相」>「观」,选所有这样路径后删除。这路径生原往往是忘记除已经释放剪切蒙版。

从零开始学!B 端产品图标绘制指南(软件篇)

△ 图5.2-1 利用「选择相观」选不可见路径。

未闭合路径。

导出SVG格图标需要路径完全封闭,否则可导致填色溢出。

注:以上操作需要解锁和显示所有对象。

3. 文字转曲、扩展、扩展外观之前先备份

如果不备,后面可能会哭吧。

欢迎关注者的微信众号:「能呆书房一整天」

从零开始学!B 端产品图标绘制指南(软件篇)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

这篇文章是我自己在工作中受到各种摧残、无数次开会讨论总结而来,如果你现在深处B端行业,强烈建议大家一定要看完。 收到很...
B端设计
图标的分类和风格有很多种,而设计图标的时候,如何才能抓住用户的眼球,设计出自己满意的图标呢? 欢迎关注译者的微信公...
ICON
近年来,互联网进入下半场,C 端流量红利逐渐消退,很多企业转向了 B 端服务,随之而来的是产品设计者的转型,现在越来越多的...
B端产品
我们作为 UI 设计师,一开始入门接触最多的就是图标,而现在很多设计师都钟爱线性图标,导致很多新手设计师也跟随主流的脚步...
图标设计
如期而至,这是标签栏控件总结的第二期。这一期真是掏空职业经验,希望对你的工作有所帮助。 这一期我们来聊一聊标签栏中...
UI
有趣的灵魂万里挑一,人们对正面情绪的向往使“有趣”成为沟通交流中不可或缺的情感特征。随着越来越多的品牌涌入市场,用户对...
ui设计
作为一枚设计民工,不仅要面对甲爸们的百般刁难,遇到难搞的数据图表时更是苦不堪言:一份合格的数据图表,在有创意、让信息...
UI
关于下拉选择器、日期选择的攻略耐心看完,你一定有所收获! 在整个「数据录入场景」中,01 篇我们讲到了单选框、多选框、开...
B端产品