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

()

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

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

前期准备

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

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

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

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

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

Visio作图

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

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

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

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

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

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

Visio排版

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

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

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

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

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

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

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

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

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

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

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

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

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

共计人评分,平均

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,如若转载,请注明出处:https://iymark.com/computer/visio-export-png.html

发表评论

登录后才能评论
分享本页
返回顶部