代碼寫得很牛逼但UI界面卻搞得很丑？來，楊工帶你！

平時(shí)在MCU LCD上搞一些界面，太復(fù)雜太麻煩的，可能會(huì)上emwin，但是大部分需求都是拿到一副BMP的圖，然后通過Image2Lcd生成一個(gè)C語言數(shù)組，接下來將數(shù)組復(fù)制到代碼中，調(diào)用LCD顯示圖片的函數(shù)進(jìn)行顯示。

除了嵌入式系統(tǒng)的UI需求，平時(shí)我們也會(huì)在PC機(jī)上去開發(fā)一些上位機(jī)或者簡單的APP，比如下面這兩個(gè)以前我做來測(cè)試的工具：

這些界面給用戶最直觀的感覺，太丑了吧！至少得增加一些LOGO或者別的東西，讓它看起來更符合人的審美設(shè)計(jì)，但是對(duì)于工程師而言，嗯！能做出來還是非常有成就感的！

經(jīng)常逛Github的同伴肯定會(huì)發(fā)現(xiàn)，為什么別人做的開源軟件那么炫，那些圖標(biāo)是怎么弄來的呢？

1、推薦一個(gè)我經(jīng)常用的Iconfont

Iconfont-國內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫,提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能。阿里巴巴體驗(yàn)團(tuán)隊(duì)傾力打造,設(shè)計(jì)和前端開發(fā)的便捷工具

比如，我想找一個(gè)音量的圖標(biāo)，我只需要搜索音量，就能找到這么多圖標(biāo)啦！

選擇圖標(biāo)配色、尺寸大小、圖標(biāo)格式，接下來就可以愉快的下載下來啦，完全免費(fèi)

2、不會(huì)PS切圖，拼圖？來，我教你

很多嵌入式軟件工程師都抱怨，哎，不懂PS呀，不會(huì)P圖，其實(shí)對(duì)于我們嵌入式軟件工程師而言，我們最關(guān)心的是顯示圖標(biāo)的格式、尺寸大小，這就夠了，至于顯示在軟件上的哪個(gè)位置，需要根據(jù)現(xiàn)實(shí)情況隨時(shí)進(jìn)行調(diào)節(jié)。

2.1 以PS做一個(gè)64*64音量圖標(biāo)為例

假設(shè)我的音量圖標(biāo)規(guī)格要求是64*64的，那么就這樣來做：

(這是剛剛下載的)

首先新建一個(gè)PSD文件，然后輸入寬度、高度分別為64、64像素，然后點(diǎn)確定

然后看到是這樣的效果：

然后將音量用鼠標(biāo)左鍵按住不動(dòng)拖進(jìn)來，根據(jù)框框調(diào)節(jié)在圖標(biāo)里顯示的區(qū)域。

按住Shift鍵，然后鼠標(biāo)拖動(dòng)讓圖片能夠等比縮放。圖標(biāo)做好了，接下來打開文件，然后選擇存儲(chǔ)為：

這時(shí)就可以保存為具體的圖片格式啦。

只要是符合規(guī)范的圖片，都可以通過存儲(chǔ)為轉(zhuǎn)換一下圖像格式，常見的有JPG轉(zhuǎn)BMP，PNG轉(zhuǎn)BMP，JPG轉(zhuǎn)PNG等等。

這里我轉(zhuǎn)成了BMP格式。

如果要切圖，那怎么辦呢？

然后Ctrl+"+"將圖標(biāo)放大

選擇裁剪區(qū)域

確定裁剪。

裁剪成功。

裁剪成功，當(dāng)然也可以通過以下選項(xiàng)來修改圖像大小和畫圖大小。

往期精彩

WIFI DTU產(chǎn)品設(shè)計(jì)與實(shí)現(xiàn)(基于STM32F103+QT配置上位機(jī)案例設(shè)計(jì)分享)

圓曾經(jīng)的小車夢(mèng)，造一臺(tái)智能小車(三)之小車前進(jìn)后退左右轉(zhuǎn)基本框架

推薦三個(gè)我工作中經(jīng)常使用的驅(qū)動(dòng)大全wiki(建議收藏并轉(zhuǎn)發(fā)讓更多人知道！)

覺得本次分享的文章對(duì)您有幫助，隨手點(diǎn)[在看]并轉(zhuǎn)發(fā)分享，也是對(duì)我的支持。