返回

从零开始学图标

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

图标的设计工具

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

了解了图标的类型,就要开始了解做出这些图标应该使用哪些软件了!通常,UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款,理论上,它们都包含了图标绘制的功能,如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了,这是非常不负责任的,所以为了对新人更友好一点(如果已经全部精通了,就直接略过),我会分析一遍这四款软件对于图标设计的优劣,以及需要掌握的部分。

FIgma / 即时设计

这两款软件是我们设计 UI 界面的主力。但大家一定要记得,它们主要的功能是用来完成 UI 界面元素的排版,而不是创作和绘图。

虽然它们都包含路径、钢笔、布尔等功能,想要绘制一些非常基础的线性或面性图标时没有问题,但只要涉及到比较复杂的图形,往往就束手无策。

所以,我建议所有学习 UI 的新人,都不要从这两个软件中入手,而是先掌握 PS 和 AI,后面想要快速实现一些简单的图标时,自然懂得如何使用 Figma 和 即时设计。

可以说,PS 和 AI 的应用决定了我们图标设计的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。

Photoshop

PS 是一款无论什么东西都设计得出来的设计软件,但是,它本质上是一款 “位图软件”。后续的文章中会提及,在界面中采用矢量格式的图标是最理想的,而 PS 针对矢量的操作并不便捷,比如将矢量图层复制到其它软件中。

实际项目中,我们会用 PS 设计一些视觉表现相对复杂的图标,例如启动图标、拟物图标、实物图标等等。

绘制图标需要用到的 PS 功能并不太多,需要在前期学习这个软件的过程中加以筛选,重点是以下知识点:

  • 路径创建和调整
  • 钢笔工具和锚点
  • 路径图层
  • 布尔运算
  • 图层属性

虽然 PS 在实际项目中是用来画复杂的图标,但并不妨碍我们使用 PS 从最基础的图标开始画起,因为想要熟练掌握上方的知识点,简易的工具图标是最好的磨刀石,之后再学习 AI 的操作,就可以更快的上手。

PS:最近在准备一套 PS 教学,就会比较完整的讲解一遍这些功能和对应操作。

Illustrator

AI 也是 UI 设计必学的一款软件,它的功能异常丰富,主要用来设计矢量图形。对比 PS,它有更好的矢量操作支持,对于路径细节的调整上,是最全面最细腻的软件,并且 AI 中的图形还可以直接复制黏贴到其它应用的画布中。

如果掌握了上方提及的 PS 基础,那么学习 AI 也就轻松了不少,其中,AI 设计图标中有三个特殊的功能是需要重点掌握和学习的:

  • 形状生成器
  • 轮廓化描边
  • 路径查找器

花几个晚上,掌握了 PS 和 AI 的相关知识点以后,就为我们后续的学习提供了技术支持,可以进入下一阶段了!

点赞
收藏
学会
11362033
下一篇: 表意的准确
在上一部分中,我们知道图标的主要作用之一就是作为文字的替代品,具有明确的寓意。比如看见一个放大镜,我们会当成那是搜索,看见钥匙或者锁,我们就会理解成是密码,比如下面这些图标,每一个指代的功能和寓意都是非常直白、清晰的。 表达的寓意清晰,是工具图标最基本的要求,否则它只会传递错误的信息,造成用户的困惑...
笔记 (4)
只看自己
logo
UX小学生 记录于 2024-06-19
学好PS,AI,走遍天下都不怕,哈哈哈。figma确实是实现简单的功能的比较好的工具
原文: 了解了图标的类型,就要开始了解做出这些图标应该使用哪些软件了!通常,UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款,理论上,它们都包含了图标绘制的功能,如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了,这是非常不负责任的,所以为了对新人更友好一点(如果已经全部精通了,就直接略过),我会分析一遍这四款软件对于图标设计的优劣,以及需要掌握的部分
今晚也没早睡 记录于 2024-05-10
AI软件学习要点
原文: AI 设计图标中有三个特殊的功能是需要重点掌握和学习的: 形状生成器 轮廓化描边 路径查找器
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞