如何用 Figma 快速制作 EasyV 风格的图标素材

Recommand
杭州/UI设计师/1年前/3334浏览
如何用 Figma 快速制作 EasyV 风格的图标素材Recommand
在一个数据大屏中图标是一种抽用于表示概念、操作或实体的抽象视觉符号。通常被设计成直观且易于辨认,以提高用户体验和界面的可用性。可以采用各种形状和风格,但它们的共同特征是简单性和易识别性。但在日益审美提高的如今甲方或者设计师本身对于图标的花样展示越来越多元化,在一张大屏里面图标这不可替代的地位,也是提高画面质感的一个大利器,如今互联网上经常可以看到 easyv 风格的的大屏受到消费者或者同行的捧场,今天在此把 easyv 图标由简入难进行讲解。(可视化新手巩固篇)
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
easyv 风格的图标展示
图标的重要性:一个可视化大屏中除了主视觉之外 能较为体现设计师水平的的就是图标的设计, 炫酷科技感的图标可以在界面中脱颖而出,吸引用户关注。系列的图标确保界面元素之间有统一的外观和感觉。这有助于创建一种协调和专业的用户界面,提高整体设计的质感。
图标的重要性:一个可视化大屏中除了主视觉之外 能较为体现设计师水平的的就是图标的设计, 炫酷科技感的图标可以在界面中脱颖而出,吸引用户关注。系列的图标确保界面元素之间有统一的外观和感觉。这有助于创建一种协调和专业的用户界面,提高整体设计的质感。
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
图标分类
可视化图标分类:在可视化的范围内图标分类有那些?
大致基本上可以分为以下几类:
基础素体 普通几何背景 立体背景
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
观察下图
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
总结规律:
主体 、基础形背景 、氛围感装饰元素
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
下面我将从 素体 、普通几何背景 、和立体底座类型,每类挑选 2-3个图标展示效果 进行详细教程。
1.so so so so easy💯-素体篇:
素体平面
素体排版:可视化的单体一般用于指定翻牌器的名称相关 iocn 基础排版如下图,可以看到 iocn 的占比较小所以素体的设计一般情况就以单体发光,渐变,部分内容变色,对iocn进行氛围感的变化。
素体排版:可视化的单体一般用于指定翻牌器的名称相关 iocn 基础排版如下图,可以看到 iocn 的占比较小所以素体的设计一般情况就以单体发光,渐变,部分内容变色,对iocn进行氛围感的变化。
Collect
素体变化:
渐变和和部分渐变较为基础,大家可以自行在 figma 内尝试,发光通常会遇到发光不自然,或者不够亮的情况可以如下图进行处理:
渐变和和部分渐变较为基础,大家可以自行在 figma 内尝试,发光通常会遇到发光不自然,或者不够亮的情况可以如下图进行处理:
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
素体3d(如下图)
素体 3d 一般和立体底座结合,今天以玻璃质感图标为教程
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
准备工作:在开始之前需要先在 figma 内安装这两个插件 (目前均免费)
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
第一步
:先从 iocnfont 上复制一个你需要的 svg 到 figma 粘贴
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
第二步
:选中iocn点击倾斜插件进行角度变化
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
第三步
:选中iocn 改变参数导出,让物体出现厚度
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
第四步
:把物体分为顶面 侧面 底面
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
按照玻璃质感通过颜色渐变按照物体结构点调整颜色分布
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
完成:最终把侧面和顶面合并在一起就完成啦🎇(大家可以依法炮制)
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
2.so so easy💯-几何背景篇:
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
圆形背景:
(讲两种常用风格)已经有了单体教程就不给大家讲基础操作啦 看图可以自行操作还原一下哦~
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
光感:
光感的制作在于背景需要使用径向渐变点位在下方
光感的制作在于背景需要使用径向渐变点位在下方
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
fui
fui 风格主要在于线面的装饰,需要注意在绘制过程中整体的装饰元素的明度低于主体 iocn的亮度
fui 风格主要在于线面的装饰,需要注意在绘制过程中整体的装饰元素的明度低于主体 iocn的亮度
Collect
方形背景
方形背景和上面圆形的内容差不多主要在于装饰使用了遮罩纹理来进行细节装饰
方形背景和上面圆形的内容差不多主要在于装饰使用了遮罩纹理来进行细节装饰
Collect
figma 点遮罩
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
多边形背景:科技朦胧感图标绘制
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
科技朦胧感 觉主要表现在光感和雾的朦胧 :在 figma 可以通过投影加 图层模糊进行制作
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
物体背景
以物体为背景的使用率较高也很简单,相信大家一看就会。
以物体为背景的使用率较高也很简单,相信大家一看就会。
Collect
3.so easy💯-3d立体底座篇:
开局小练
通过前面的 so so easy 教学测试一下吧~~大家可以自行还原一下这两个图标 ✅
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
不要看这种很 easy 的图标往往大多数情况下在可视化大屏中的表现很不错哦~(如下图)
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
基础的3d 立体的方法就是倾斜在加上我们在几何背景篇讲到的光感绘制的几何形体就可以很轻松的得到一个立体的 3d 图标。
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
进阶版:上强度咯~~~~
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
下图这种比较具有科技感 炫酷的3D图标是满足甲方需求的一大利器, 在做好科技底板的基础下我们可以和素体图标或者 3d 图标等进行结合产出。
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
主要从形态的体现和质感绘制进行讲解
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
用下图两个案例的制作来教会大家完成此类复杂图标的绘制
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
圆形:学习之前需要先安装这个插件哦
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
总结
对于figma 绘制图标只要基础的主体 背景 装饰础到位熟练掌握 figma 内的渐变、描边、发光、投影、和模糊,结合使用我们就可以得到一个完美的图标啦~~~喜欢的同学可以给个一键三连~~
需要源文件的同学扫图 1️⃣加群-群公告领取哦~~
如何用 Figma 快速制作 EasyV 风格的图标素材
Collect
12 月28号在 easyv 官网公众号上有直播教程详细讲解,想更加深刻了解得同学可扫码预哦~~
114
Report
|
235
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
IP形象——十二牛马
Homepage recommendation
字体设计
Homepage recommendation
相关收藏夹
数据可视化
数据可视化
数据可视化
数据可视化
作品收藏夹
ui
ui
ui
ui
作品收藏夹
ui
12
I like it
I like it
I like it
I like it
作品收藏夹
教程
教程
教程
教程
作品收藏夹
一些参考
一些参考
一些参考
一些参考
作品收藏夹
大家都在看
Log in