代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!

简介: 代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!

平时在MCU LCD上搞一些界面,太复杂太麻烦的,可能会上emwin,但是大部分需求都是拿到一副BMP的图,然后通过Image2Lcd生成一个C语言数组,接下来将数组复制到代码中,调用LCD显示图片的函数进行显示。

640.png

640.png

除了嵌入式系统的UI需求,平时我们也会在PC机上去开发一些上位机或者简单的APP,比如下面这两个以前我做来测试的工具:

640.png

640.png

这些界面给用户最直观的感觉,太丑了吧!至少得增加一些LOGO或者别的东西,让它看起来更符合人的审美设计,但是对于工程师而言,嗯!能做出来还是非常有成就感的!

640.png

经常逛Github的同伴肯定会发现,为什么别人做的开源软件那么炫,那些图标是怎么弄来的呢?

1、推荐一个我经常用的Iconfont

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

640.png

比如,我想找一个音量的图标,我只需要搜索音量,就能找到这么多图标啦!

640.png

640.png

640.png

选择图标配色、尺寸大小、图标格式,接下来就可以愉快的下载下来啦,完全免费

2、不会PS切图,拼图?来,我教你

很多嵌入式软件工程师都抱怨,哎,不懂PS呀,不会P图,其实对于我们嵌入式软件工程师而言,我们最关心的是显示图标的格式、尺寸大小,这就够了,至于显示在软件上的哪个位置,需要根据现实情况随时进行调节。

2.1 以PS做一个64*64音量图标为例

假设我的音量图标规格要求是64*64的,那么就这样来做:

640.png

(这是刚刚下载的)

首先新建一个PSD文件

640.png

然后输入宽度、高度分别为64、64像素,然后点确定

640.png

然后看到是这样的效果:

640.png

然后将音量用鼠标左键按住不动拖进来,根据框框调节在图标里显示的区域。

640.png

按住Shift键,然后鼠标拖动让图片能够等比缩放。

640.png

图标做好了,接下来打开文件,然后选择存储为

640.png

这时就可以保存为具体的图片格式啦。

640.png

只要是符合规范的图片,都可以通过存储为转换一下图像格式,常见的有JPG转BMP,PNG转BMP,JPG转PNG等等。

640.png

640.png

这里我转成了BMP格式。

如果要切图,那怎么办呢?

640.png

然后Ctrl+"+"将图标放大

640.png

选择裁剪区域

640.png

确定裁剪。

640.png

裁剪成功。

640.png

裁剪成功,当然也可以通过以下选项来修改图像大小和画图大小。

640.png

往期精彩

WIFI DTU产品设计与实现(基于STM32F103+QT配置上位机案例设计分享)


圆曾经的小车梦,造一台智能小车(三)之小车前进后退左右转基本框架


推荐三个我工作中经常使用的驱动大全wiki(建议收藏并转发让更多人知道!)

目录
相关文章
|
1月前
|
Ubuntu Java 测试技术
【Linux】一站式教会:Ubuntu(无UI界面)使用apache-jmeter进行压测
【Linux】一站式教会:Ubuntu(无UI界面)使用apache-jmeter进行压测
|
1月前
|
存储 测试技术 UED
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
67 1
|
5月前
|
监控 数据可视化 安全
Linux——怎样使用SSH服务实现远程UI界面本地显示
需求场景 最近几天需要实现软件的远程监控,但是实际场景又不能使用向日葵、VNC、AnyDesk、以及其他的监视软件,并且软件的整体设计也没有这块的数据上行设计。
201 0
|
15天前
|
数据安全/隐私保护 图形学
基于 LVGL 使用 SquareLine Studio 快速设计 UI 界面
基于 LVGL 使用 SquareLine Studio 快速设计 UI 界面
|
1月前
|
存储 SQL PHP
彩虹外链网盘界面UI美化版超级简洁好看
彩虹外链网盘界面UI美化版超级简洁好看
24 0
|
3月前
|
存储 传感器 监控
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
32 0
|
4月前
|
搜索推荐 C#
一个适用于定制个性化界面的WPF UI组件库
一个适用于定制个性化界面的WPF UI组件库
|
6月前
|
JavaScript 前端开发 数据管理
关于 SAP UI5 框架代码中的 Metadata.createClass
关于 SAP UI5 框架代码中的 Metadata.createClass
20 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
29 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0

热门文章

最新文章