Visio作图之素材制作并导出PNG格式

前几天，用visio画了个网站的背景图，就是各种图标，加点连接线。然后，生成300×300px的图片，网站背景设置平铺即可。今天，重新做一次素材图；然后，再导出为PNG格式，顺便做个教程吧。这种方式导出的PNG格式，有效视图仅为有绘画的区域。所以，可以严格把握图片的大小。

前期准备

首先，我们要做的是一堆图标加各种连接线组成的图片。所以，我们需要去找图标。细心的人，已经发现古哥的每篇文章都有个缩略图，而缩略图的右下角都有一个图标。这个图标就是从阿里云矢量图标里下载得来的，今天就把方法分享给各位。

阿里云图标官网：https://www.iconfont.cn/，进入以后需要登录，直接用Github账号登录即可，或者注册账号也ok。

然后，在界面内搜素你想要的图标，比如Google、Youtube、或者与你网站有关的图标。这里，我们下载了Google、Youtube、Windows、Web、Code，你也可以下载你喜欢的任何图标。

点击下载PNG文件，这里我们选择了一个灰色，#e6e6e6，对应230,230,234的RGB。当然，你也可以选择其他颜色。这里，推荐将所有要下载的图标，都设置成一个颜色。

Visio作图

接下来，就需要在Visio里构造一个正方形（因为，后续我们要用这个图片平铺在网站上，作为网站背景图）。同时，我们需要把正方形的线条设置为无，填充设置为245,245,245，为的是，让背景与图标之间形成一个细微的色差。当然，你也可以自己发挥设置。

此外，最重要的是，阴影设置为无，否则你会看到图片下方会有阴影，看起来很废眼的，如下图所示。

接下来，就是插入图片了。点击Visio上方插入按钮，再点击图片。打开文件夹后，直接把你要拖入的图片，全部选中点击确认即可。

如果操作过程中，发现正方形太小了，可以摁住shift，并滚动鼠标中键，就可以改变整个作图区域的大小。但是，制作过程中，一定要实时观察各个图标的大小。需要在正常大小（300×300px）下，观察图标大小是否合适。将各个图标，按照你喜欢的方式排列。当然，如果你觉得图标与背景色差太小，也可以将正方形填充设置为166,166,166。

Visio排版

接下来，我们需要用一些线段或者叫连接线把这些图标连接起来。这里，我直接用了指针工具下方的连接线，连接了所有图标。看着也还行吧。

全部连接完毕后，我们慢慢需要修改所有线条的颜色为跟图标一致的颜色，即230,230,234。并且，宽度需要改为3磅，箭头末端大小改为无，这样看起来会美观很多。

然后，我们选中修改后的一条连接线，点击格式刷，再点击另一条为修改的连接线，就可以快速的设置所有连接线的宽度、箭头类型、颜色参数。

接下来，就需要点击文件，将文件另存为PNG格式的图片，也叫可移植网络图形，如下图所示。

这时，会弹出一个对话框，需要我们设置一些PNG图片的参数，这里主要设置下分辨率，300×300就可以了，由于颜色比较单一，默认的24色就够用了，直接确认即可。保存好的图片不会自动打开，需要你去保存的文件夹里自己寻找。

下面是做好的素材，后续我将设置为网站的背景图（这题带了背景图功能，我直接把图片上传就可以了）。

如果你的网站没这个功能，可以使用下面的代码设置网站的背景图。

body {
    background-image: url(https://);
    background-repeat: repeat;
    background-position: center center;
}

最后，你可以将图片衍生，比如上下左右各衍生一个直线，这样图片平铺后，线段会连接起来，有那么一丢丢高端。