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

Enocheasty · 发表于 2024-6-5 10:30

自己编写了一个插件，大家都想着能有自己的图标，虽然网上的图标资源也不少，但是插件相对而言功能是比较特殊的，网上的图标很难找到合适表达插件功能的。所以就自己画，跟大家分享一下我画图标的经历。

最开始使用的是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

q490525427 · 发表于 2024-6-5 16:58

那个打开太慢，用阿里的

Enocheasty · 发表于 2024-6-5 23:16

q490525427 发表于 2024-6-5 16:58
那个打开太慢，用阿里的

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

morpheus126 · 发表于 2024-6-6 10:54

谢谢分享
所有重点就是要像素级绘图吗？
那样完全就是另外一门手艺了

Enocheasty · 发表于 2024-6-7 15:59

本帖最后由 Enocheasty 于 2024-6-7 16:42 编辑

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

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

Delmin9207 · 发表于 2024-6-17 09:06

Enocheasty 发表于 2024-6-7 15:59
花费了2天时间，用Figma重绘了所有的图标，感觉Figma这方面还是不错的，不是打广告，我也是才用上！是用了 ...

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

Enocheasty · 发表于 2024-6-17 11:42

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

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

过客fppt · 发表于 2024-7-23 14:29

本帖最后由过客fppt 于 2024-7-23 14:31 编辑

Enocheasty 发表于 2024-6-17 11:42
问到我了。
我是直接画好以后，直接通过项目的资源导入，然后在项目就直接用了。包括Ribbon，我也是直接 ...

楼主好，我也有用VS开发Word外接程序，但是在Ribbon中，用工具箱设置好的按钮，会自动生成一些代码，而且这些自动生成的代码会导致错误，请问有这方面的教程吗

Enocheasty · 发表于 2024-7-23 15:15

过客fppt 发表于 2024-7-23 14:29
楼主好，我也有用VS开发Word外接程序，但是在Ribbon中，用工具箱设置好的按钮，会自动生成一些代码，而且 ...

你是说设计器自动生成的界面的代码吗？那些代码如果出错就直接去代码页面去看，VS很智能，会提示是什么原因的。

过客fppt · 发表于 2024-7-24 15:28

Enocheasty 发表于 2024-7-23 15:15
你是说设计器自动生成的界面的代码吗？那些代码如果出错就直接去代码页面去看，VS很智能，会提示是什么原 ...

比如这个，明明是它自动生成的，我也不知道如何改，注析掉才正常

		自动登录	找回密码
密码			免费注册

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

评分