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

用户头像
杭州/UI设计师/2年前/3613浏览
如何用 Figma 快速制作 EasyV 风格的图标素材
在一个数据大屏中图标是一种抽用于表示概念、操作或实体的抽象视觉符号。通常被设计成直观且易于辨认,以提高用户体验和界面的可用性。可以采用各种形状和风格,但它们的共同特征是简单性和易识别性。但在日益审美提高的如今甲方或者设计师本身对于图标的花样展示越来越多元化,在一张大屏里面图标这不可替代的地位,也是提高画面质感的一个大利器,如今互联网上经常可以看到 easyv 风格的的大屏受到消费者或者同行的捧场,今天在此把 easyv 图标由简入难进行讲解。(可视化新手巩固篇)
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA2ODA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
easyv 风格的图标展示
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA2ODQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
图标的重要性:一个可视化大屏中除了主视觉之外 能较为体现设计师水平的的就是图标的设计, 炫酷科技感的图标可以在界面中脱颖而出,吸引用户关注。系列的图标确保界面元素之间有统一的外观和感觉。这有助于创建一种协调和专业的用户界面,提高整体设计的质感。
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA5MjQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
图标分类
可视化图标分类:在可视化的范围内图标分类有那些?
大致基本上可以分为以下几类:
基础素体 普通几何背景 立体背景
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA2ODg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
观察下图
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA2OTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
总结规律:
主体 、基础形背景 、氛围感装饰元素
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA2OTY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
下面我将从 素体 、普通几何背景 、和立体底座类型,每类挑选 2-3个图标展示效果 进行详细教程。
1.so so so so easy💯-素体篇:
素体平面
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MDA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
素体排版:可视化的单体一般用于指定翻牌器的名称相关 iocn 基础排版如下图,可以看到 iocn 的占比较小所以素体的设计一般情况就以单体发光,渐变,部分内容变色,对iocn进行氛围感的变化。
收藏
素体变化:
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MDQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
渐变和和部分渐变较为基础,大家可以自行在 figma 内尝试,发光通常会遇到发光不自然,或者不够亮的情况可以如下图进行处理:
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MDg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
素体3d(如下图)
素体 3d 一般和立体底座结合,今天以玻璃质感图标为教程
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
准备工作:在开始之前需要先在 figma 内安装这两个插件 (目前均免费)
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MTY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
第一步
:先从 iocnfont 上复制一个你需要的 svg 到 figma 粘贴
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MjA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
第二步
:选中iocn点击倾斜插件进行角度变化
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MjQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
第三步
:选中iocn 改变参数导出,让物体出现厚度
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3Mjg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MzI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
第四步
:把物体分为顶面 侧面 底面
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3MzY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NDA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
按照玻璃质感通过颜色渐变按照物体结构点调整颜色分布
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NDQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
完成:最终把侧面和顶面合并在一起就完成啦🎇(大家可以依法炮制)
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NDg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
2.so so easy💯-几何背景篇:
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
圆形背景:
(讲两种常用风格)已经有了单体教程就不给大家讲基础操作啦 看图可以自行操作还原一下哦~
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NjA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
光感:
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NjQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
光感的制作在于背景需要使用径向渐变点位在下方
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3Njg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
fui
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NzI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
fui 风格主要在于线面的装饰,需要注意在绘制过程中整体的装饰元素的明度低于主体 iocn的亮度
收藏
方形背景
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3NzY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
方形背景和上面圆形的内容差不多主要在于装饰使用了遮罩纹理来进行细节装饰
收藏
figma 点遮罩
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3OTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA3OTY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4MDA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
多边形背景:科技朦胧感图标绘制
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4MDQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
科技朦胧感 觉主要表现在光感和雾的朦胧 :在 figma 可以通过投影加 图层模糊进行制作
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4MDg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4MTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4MTY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
物体背景
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4MjA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
以物体为背景的使用率较高也很简单,相信大家一看就会。
收藏
3.so easy💯-3d立体底座篇:
开局小练
通过前面的 so so easy 教学测试一下吧~~大家可以自行还原一下这两个图标 ✅
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4Mjg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
不要看这种很 easy 的图标往往大多数情况下在可视化大屏中的表现很不错哦~(如下图)
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4MzY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NDA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
基础的3d 立体的方法就是倾斜在加上我们在几何背景篇讲到的光感绘制的几何形体就可以很轻松的得到一个立体的 3d 图标。
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NDQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
进阶版:上强度咯~~~~
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NDg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
下图这种比较具有科技感 炫酷的3D图标是满足甲方需求的一大利器, 在做好科技底板的基础下我们可以和素体图标或者 3d 图标等进行结合产出。
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NTY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
主要从形态的体现和质感绘制进行讲解
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NjA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
用下图两个案例的制作来教会大家完成此类复杂图标的绘制
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NjQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4Njg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4NzI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4ODA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4ODg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4OTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
圆形:学习之前需要先安装这个插件哦
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA4OTY=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA5MDA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA5MDQ=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA5MDg=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA5MTI=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
总结
对于figma 绘制图标只要基础的主体 背景 装饰础到位熟练掌握 figma 内的渐变、描边、发光、投影、和模糊,结合使用我们就可以得到一个完美的图标啦~~~喜欢的同学可以给个一键三连~~
需要源文件的同学扫图 1️⃣加群-群公告领取哦~~
如何用 Figma 快速制作 EasyV 风格的图标素材(图ZMTQ2MjA5MjA=) - 教程 - 站酷设计师不吃肉的小雪花原创素材 - 站酷ZCOOL
收藏
12 月28号在 easyv 官网公众号上有直播教程详细讲解,想更加深刻了解得同学可扫码预哦~~
118
举报
|
250
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
高级感金属拟物 UI设计组件库
拟物风质感写实UI卡片合集源文件
盲盒APP UI设计
【新年UI图标】优惠券icon
高级表盘系列UI源文件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI 登录界面设计模板包
新拟态风格 UI设计组件库
【新年UI图标】银行卡icon
手表表盘UI系列
我的钱包-UI界面设计-app
抽象液态渐变UI背景模版
智能家居中心 简约 UI设计组件库
科技医疗透明柜UI界面设计
3D渐变流体抽象矢量UI背景图
Security Camera UI kit
UI界面 组件
新能源APP应用UIKit
UI通用设计素材1
【新年UI图标】30个图标
【新年UI图标】珠宝icon
【新年UI图标】影音icon
【新年UI图标】游戏/娱乐icon
你可能喜欢
相关收藏夹
大家都在看
登录注册