返回

从零开始学图标

#设计知识
#知识库
27%
进度
0/8
知识点
0
笔记
概述
图标是什么
图标的基本介绍
图标的使用场景
图标的基本分类
图标设计的基础知识
矢量图和位图
布尔运算和钢笔
图标的设计工具
图标的设计规范
表意的准确
图标的一致性
图形的视觉差
图标的栅格
像素对齐
图标设计实例
工具图标的设计实例
操作总结和线面转换
装饰图标的设计实例
启动图标的设计实例
工具图标的进阶
进阶线性图标
多种粗细风格
多色描边风格
描边缺口风格
装饰图标的进阶
轻拟物风格
玻璃拟态风格
实物贴图风格
首页知识库设计知识从零开始学图标

布尔运算和钢笔

UX百科编辑部 编辑于 2024-01-1033人正在学
20

布尔运算和钢笔是我们在完成图标的矢量绘制时最主要的两个工具,大多数图标可以仅通过布尔和钢笔完成轮廓的设计,所以本篇我们着重介绍这两个工具。

布尔运算

图形绘制中的布尔运算指的是几种特定的,图形意义上的逻辑运算,例如:交集、并集、相减等等。只通过语言描述可能无法直观理解,但看一下图例就一眼便知。

并集、减去顶层、交集、排除重叠是最常见的四种布尔运算,不同的软件中它们的名字可能各不相同,但所表达的逻辑运算却是一摸一样的。

  • 并集:又称联集、相加,指将两个形状拼合;
  • 减去顶层:又称扣减,指将位于顶层的形状在位于底层的形状中减除;
  • 交集:又称交叉、相交,指仅保留两个形状重叠的部分;
  • 排除重叠:又称异或、差集,指在并集中排除图形重叠的部分;

通过这四则最基础的图形间的逻辑运算,我们可以得到大部分常用的图标图形绘制,例如:

钢笔

与布尔运算通过图形的逻辑关系来间接获得目标形状不同,钢笔是直接对矢量图形的基本组成——锚点进行编辑的工具,可以通过对锚点位置和曲率的调整,绘制出任意不规则的图形,是以钢笔经常用来做那些不规则形状的调整。

钢笔可以调整的锚点部分有两个:位置、方向线。

锚点的位置

在大多数软件中,使用钢笔工具在画布上单击一次就可以创建图形的第一个锚点,之后连续单击可创建一个不规则多边形,锚点的位置决定了图形的大致轮廓,没有方向线的锚点所呈现出的是一条锐利的多段折线。

在大多数软件中,打下第二或之后的锚点之前,按住shift键可以锁定锚点的方向在前一个锚点的45°整倍数方向上。

如果将最后一个锚点打回第一个,那么此时的曲线我们称之为「闭合曲线」,理论上来说只有闭合曲线才可以赋予填充色彩的值,也只有闭合曲线才能调整描边的位置——即内部、居中和外部描边。

锚点的方向线

方向线,就是我们常在矢量图中看到的,锚点两侧那个像手柄一样的东西,每个锚点最多可以有两条方向线,代表着它某一侧曲线的方向和趋势,方向线越长,它的趋势越明显。

两条方向线默认锁定180°角呈同一直线,不管它们的长度是否相等,这种状态下曲线在该锚点处总是平滑的;也可以呈现其他角度,那么曲线在该锚点处会变得有角度。

以上便是布尔运算和钢笔,在图形绘制中所需要掌握的基础知识,掌握了这些,基本就掌握了图标图形勾勒的大部分内容,有关两者的具体应用和更进一步的技法则需要在实践中不断熟练。

点赞
收藏
学会
12052033
下一篇: 图标的设计工具
了解了图标的类型,就要开始了解做出这些图标应该使用哪些软件了!通常,UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款,理论上,它们都包含了图标绘制的功能,如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了,这是非常不负责任的,所以为了对新人更友好一点(如果已经全部精...
笔记 (3)
只看自己
logo
15972992297 记录于 2024-11-14
钢笔绘制的路径可以变成形状,也就可以填充颜色、设置描边之类的
原文: 只有闭合曲线
上课困难户 记录于 2024-06-26
手柄
原文: 方向线,就是我们常在矢量图中看到的,锚点两侧那个像手柄一样的东西,每个锚点最多可以有两条方向线,代表着它某一侧曲线的方向和趋势,方向线越长,它的趋势越明显。
UX小学生 记录于 2024-06-19
布尔运算和钢笔两个功能就能构建基本的图标,图片或者logo也应该简洁,易构建,个人感觉会更好,容易被大众接受。
原文: 并集:又称联集、相加,指将两个形状拼合;
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞