ExcelHome技术论坛

 找回密码
 免费注册

QQ登录

只需一步,快速开始

快捷登录

搜索
EH技术汇-专业的职场技能充电站 妙哉!函数段子手趣味讲函数 Excel服务器-会Excel,做管理系统 Excel Home精品图文教程库
HR薪酬管理数字化实战 Excel 2021函数公式学习大典 Excel数据透视表实战秘技 打造核心竞争力的职场宝典
让更多数据处理,一键完成 数据工作者的案头书 免费直播课集锦 ExcelHome出品 - VBA代码宝免费下载
用ChatGPT与VBA一键搞定Excel WPS表格从入门到精通 Excel VBA经典代码实践指南
查看: 324|回复: 6

[分享] 分享一下UI界面图标的制作经历

[复制链接]

TA的精华主题

TA的得分主题

发表于 2024-6-5 10:30 | 显示全部楼层 |阅读模式
[广告] Excel易用宝 - 提升Excel的操作效率 · Excel / WPS表格插件       ★免费下载 ★       ★ 使用帮助
自己编写了一个插件,大家都想着能有自己的图标,虽然网上的图标资源也不少,但是插件相对而言功能是比较特殊的,网上的图标很难找到合适表达插件功能的。所以就自己画,跟大家分享一下我画图标的经历。

最开始使用的是PS,因为图标很特别,一般都是比较小的图片,比如16x16,24x24,32x32,像VSTO中,一般就是16x16,32x32两种吧。用PS画,主要的困难就是PS是用来画位图的,大量的操作都是针对位图的,画的时候就很费眼睛,而且对各类图形的支持并不好;画出来的时候就是模模糊糊的样子,最后的成品也是模模糊糊的,下面左边2个图标是用PS画的,右边一个是Office内置图标。
屏幕截图 2024-06-05 095113.png

后面想着改矢量图工具,我用了AI,CDR,这两个工具是老牌的矢量绘图软件,按说应该可以满足要求了,至少一点,画图的时候,在软件界面看起来效果是挺好的。输出的时候,如果选择平滑,图片好看一点,但是看起来有一种朦胧感,如果不平滑,则会显示锯齿感明显,不能用。
下面这个图是在软件中的表现,挺好的,输出后,因为要平滑,所以朦胧感比较重。
屏幕截图 2024-06-05 100057.png
输出的图标图片如下,感觉比PS的图片好很多,但是总是有种不清晰的感觉,尤其是需要用到虚线的时候,比如上面第三个图标。
屏幕截图 2024-06-05 100945.png

后面我又找了一下网上关于UI制作的信息,找到了一款软件,名字叫Figma,是个国外软件,它是可以在线编辑的,就是不用下载客户端,直接通过IE登录,就可以进行设计了。当然也有个客户端,但是感觉就是集成了部分功能的专用浏览器,它的主要功能都是云端的。所以不用安装,要注册账户,要有网络才可以编辑。文件也存在云端。
在矢量绘图方面,这个软件并不是最方便的,但是它是针图标这种像素画图做过优化的,基本就是像素级绘图,比如在这个软件中,绘图都是锚定一个像素单元的节点位置,最多半个像素,所以你在绘图的时候就要考虑对齐问题(不像CDR,你可以将8个像素的图和7个像素的图居中对齐,在软件中看着整齐,输出来就是糊的),所以最终的效果要比上面PS,AI,CDR的效果都好。用在插件上的最终效果如下:
屏幕截图 2024-06-05 101658.png

大家如果想为自己的插件做点图标什么的,建议尝试用用Figma。网址:https://www.figma.com





TA的精华主题

TA的得分主题

发表于 2024-6-5 16:58 | 显示全部楼层
[广告] Excel易用宝 - 提升Excel的操作效率 · Excel / WPS表格插件       ★免费下载 ★       ★ 使用帮助
那个打开太慢, 用阿里的

TA的精华主题

TA的得分主题

 楼主| 发表于 2024-6-5 23:16 | 显示全部楼层
q490525427 发表于 2024-6-5 16:58
那个打开太慢, 用阿里的

我不知道你的网络情况,在我的网络环境下那个并不慢,我现在用下载下来的客户端,感觉跟安装在本地的软件一样!
阿里的什么!?iconfont吗?

TA的精华主题

TA的得分主题

发表于 2024-6-6 10:54 | 显示全部楼层
[广告] VBA代码宝 - VBA编程加强工具 · VBA代码随查随用  · 内置多项VBA编程加强工具       ★ 免费下载 ★      ★使用手册
谢谢分享
所有重点就是要像素级绘图吗?
那样完全就是另外一门手艺了

TA的精华主题

TA的得分主题

 楼主| 发表于 2024-6-7 15:59 | 显示全部楼层
[广告] Excel易用宝 - 提升Excel的操作效率 · Excel / WPS表格插件       ★免费下载 ★       ★ 使用帮助
本帖最后由 Enocheasty 于 2024-6-7 16:42 编辑

花费了2天时间,用Figma重绘了所有的图标,感觉Figma这方面还是不错的,不是打广告,我也是才用上!是用了从PS,AI,CDR之后的感觉来看,还是这个靠谱,输出特别省心。
看看我的全家福!

屏幕截图 2024-06-07 164123.png

TA的精华主题

TA的得分主题

发表于 2024-6-17 09:06 | 显示全部楼层
[广告] Excel易用宝 - 提升Excel的操作效率 · Excel / WPS表格插件       ★免费下载 ★       ★ 使用帮助
Enocheasty 发表于 2024-6-7 15:59
花费了2天时间,用Figma重绘了所有的图标,感觉Figma这方面还是不错的,不是打广告,我也是才用上!是用了 ...

楼主有没有更加详细的教程可以分享一下,画好了之后怎么在UI Editor里面启用呢, 现在我知道的只有使用XML内置的UI,通过ImageMso=来设定,但自己画的UI怎么调用呢?

TA的精华主题

TA的得分主题

 楼主| 发表于 2024-6-17 11:42 | 显示全部楼层
Delmin9207 发表于 2024-6-17 09:06
楼主有没有更加详细的教程可以分享一下,画好了之后怎么在UI Editor里面启用呢, 现在我知道的只有使用XML ...

问到我了。
我是直接画好以后,直接通过项目的资源导入,然后在项目就直接用了。包括Ribbon,我也是直接用VS的设计器界面,没有自己编辑XML。问题是自己编辑XML,我也只知道Image=绝对路径可以,相对路径就不知道怎么设计了,我对XML的Ribbon需求不是太大,就没太多研究XML的Ribbon。
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

手机版|关于我们|联系我们|ExcelHome

GMT+8, 2024-7-18 07:00 , Processed in 0.045527 second(s), 12 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

© 1999-2023 Wooffice Inc.

沪公网安备 31011702000001号 沪ICP备11019229号-2

本论坛言论纯属发表者个人意见,任何违反国家相关法律的言论,本站将协助国家相关部门追究发言者责任!     本站特聘法律顾问:李志群律师

快速回复 返回顶部 返回列表