2分钟教你快速绘制热力图

大家好，我是灰色执照。

最近有群友问我，有没有什么比较好绘制热力图的工具。

经过一番折腾后，我们居然发现：并没有找到比较适合UI设计师使用的称手的工具。

因为我自己也有绘制热力图的需求，所以我直接做了一款绘制热力图的工具

废话不多说，直接上才艺，上干货！

我们先来看看都有些什么功能吧。

 01  上传背景图功能 

通常绘制之前需要上传一个背景图，多数时候是一个地图的底图。

▲ 你在底图上绘制，才知道具体要画在什么地方。深色背景的地图你可以使用高德开放平台去自己定义修改颜色 

 02  画笔功能 

点击鼠标可以绘制热力图的点。也可以按住左键在画面上涂抹。

▲ 除了简单的涂抹绘制，你还可以点击画笔右侧小箭头，调整的大小和绘制的力度 

 03  抓手功能 

画板比较大的时候，你可能看不全，使用抓手可以移动画板。

▲ 类似PS中按住了空格键，拖动画板。其实就是借（chao）鉴(xi)了PS里面的抓手功能。 

 04  橡皮擦 

通过点击鼠标，可以让热力值变小。

▲ 做动画的时候很需要橡皮擦功能，有的地方的值会变大，但是有的地方会变小。 

 05  模糊功能 

调整热力图渐变周边的模糊值。

▲ 通过调整，可以让热力图看起来更虚一点儿

 06  随机功能 

可以调整随机多少个点

▲ 点击随机图标右侧的小箭头，可以让设置随机的数量。画板大则要求数量大一点，热力图的点多一些则更好看 

 07  回退功能 

画错的时候可以返回上一步。

▲ 画错了，或者不小心清空了画板不用担心，咱们有历史记录功能，可以回退。 

 08  清空画板功能 

将画板上你绘制的全部都删掉。

▲ 折腾半天不满意，咱们直接一键清空。重新再来~ 

 09  侧边栏属性 

打开侧边栏，你可以调整画板的宽度和高度。

▲ 画到一半，发现画板设置得太小了，不够用。打开右侧属性面板，可以随时修改宽高 

鼠标移动到画板上，你也可以看到对应的热力值。 

▲ 画面上每个点都对应一个热力值，方便你及时查看

 10  热力图颜色修改功能 

点击后你可以调整热力图的颜色。

▲ 调整颜色，可以制作出各种个性化的热力图 

 11  添加动画关键帧 

点击后，当前页面加入动画关键帧

▲ 制作逐帧动画少不了这个功能 

 12  播放动画 

设置多个关键帧后，你可以设置每帧之间播放速度，设置好后就可以播放动画了。

热力图制作好以后，对着界面 右键 就可以 另存图片 了。

存储的都是透明背景的png图片。

你下载图片后可以自行加工，做成gif动图或者叠加到你要设计的界面上即可。

温馨提醒：经过测试safari浏览器似乎没有右键保存功能，请下载chrome浏览器试试。

以上就是热力图的所有功能了。

灰大热力图生成器 的入口就在「灰大导航」的左上角了。

入口链接：

https://www.pslkzs.com/nav.php

希望你会喜欢我开发的这个小工具，谢谢大家~