赞助商
立即赞助

从零开始学!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端设计师在学插画、C4D等软件,我在纠结要不要去学? 这个答案很简单,看你是怎么规划未来的。 设计师分为体验设计...
B端设计
一、图标的定义 1. 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。 2. ...
ICO
列表页是构成后台使用界面的重要组成之一,聚合了众多信息并提供操作入口。区别于小而美的C端产品列表,后台系统的用户希望列...
B端设计
文章结合过往案例讲述如何通过设计要点和方法有效系统地进行界面图标设计。 作者: KongZhen@腾讯视频TVD
ICON
橙子的橙子:记得刚开始学美术的时候,都是从临摹开始的,等到一定的阶段才开始写生,照着实物画。这个过程根据个人能力有长...
ui设计
大部分UI设计师面对B端产品设计都是唯恐避之不及的,那B端产品应该从哪些角度去切入设计? 对于很多设计师来说,遇上B端产品...
2b产品
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪。今天分享的是几个常见小问题,看看大家有没有遇到过。 1. 为什么你做的投...
ui设计
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标