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

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

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

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

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

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

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

比如，我想找一個音量的圖標，我只需要搜索音量，就能找到這么多圖標啦！

選擇圖標配色、尺寸大小、圖標格式，接下來就可以愉快的下載下來啦，完全免費

2、不會PS切圖，拼圖？來，我教你

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

2.1 以PS做一個64*64音量圖標為例

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

(這是剛剛下載的)

首先新建一個PSD文件，然后輸入寬度、高度分別為64、64像素，然后點確定

然后看到是這樣的效果：

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

按住Shift鍵，然后鼠標拖動讓圖片能夠等比縮放。圖標做好了，接下來打開文件，然后選擇存儲為：

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

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

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

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

然后Ctrl+"+"將圖標放大

選擇裁剪區(qū)域

確定裁剪。

裁剪成功。

裁剪成功，當然也可以通過以下選項來修改圖像大小和畫圖大小。

往期精彩

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

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

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

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