学编程后，我做了这10个有毒的在线免费设计神器！（上）

在微博关注我@亚赛大人 的朋友，都多多少少了解到我做了不少设计小工具吧～ 最初用 Processing 做循环 Gif 打卡，每一小段时间打卡的主要代码都差不多，改一些参数，就可以做出看上去不一样的效果，那何不做一个可以实时编辑并反馈的工具来玩，就开启了我开发设计工具之路。

下篇已出：《学编程后，我做了这10个有毒的在线免费设计神器！（下）》

诶，没想到现在自己做了10个了！是时候来一个最全的工具大总结了！

注：本文由优设网独家约稿，未经优设网许可请勿转载。授权请添加编辑微信：「gg_and_xb」

工具总结：

3个文字工具+1个玩具球+6个点线面背景生成器

阅前提示：

• 以下工具生成的图像都是免费可商用，请放心食用。
• 如果打不开网站，建议多刷新几次，或更换成 Chrome 浏览器。
• 这些工具如何制作 Gif ？用录屏软件吧～windows 用户：推荐 honeycam、Ocam；macOS 用户：推荐 LICEcap。

先从最近刚发布了的一个线型字工具开始吧～

波涛汹涌的线型文字

1. 试玩地址

https://wangyasai.github.io/waveFont/

2. 灵感来源

如果你对 Joy Division 这个乐队爱到不行，亦或是完全不知道《unknown pleasure》这专辑是什么鬼......但是你对这些看上去突出的山峰/波浪一定不会陌生。

这个经典的图案曾多次出现在影视作作品中，比如《头号玩家》中的一个彩蛋，女主背心上印的就是这个图案。

但事实上这并不是山峰或波浪，这是人类第一颗发现的脉冲星 CP 1919的脉冲信号。当然你也不用纠结这是什么，反正如你所见，这个工具的目的就是让文字突出！

3. 工具简介

上手十分简单，直接输入文字就可以实时生成，还可以调整字体的大小和粗细，这不就意味着你得到了波纹字体了吗？想写啥就写啥，还可以支持特殊符号！！！

这个工具当然支持填充颜色，那如何只看到文字不看到周边线条的颜色？只需要把背景颜色和线条1的颜色统一就好啦～

再试试颜色模式下的渐变，就是另一种风味了。

说完颜色，再说说山的海拔，调整 Control 面板中的 Height ，就可以任意拉高或降低高度了。

刚生成的字默认每一列小山峰都排列的整整齐齐，如何让它们不如此规整呢？那就调整 Offset 吧，这是调整山的偏移量，可以让文字的每个部分错落分布。

参数太多？不想一个一个调？那就不如试试随机效果 Random 吧，任意更改面板中的种种参数，给一个意想不到的结果。

4. 参数解释

参数太多，篇幅有限，大家自行探索吧～

提示：这次工具除了常规的 JPG 和 PNG ，还支持 SVG 下载哦～

5. 案例应用

@Simon阿文 提前内测做了下面一组打卡。

如何做到循环播放？先用开篇提到的录屏软件录制 gif ，然后在 PhotoShop 中删除超出一个完整循环的帧，最后循环播放时，最后一帧和第一帧能自然过渡。

感受到心电图般砰砰砰砰砰地跳动了吗？

猜猜下面两组是怎么做的？

不得不说，@Simon阿文真是个优秀玩家，他用我的工具做的东西，我……居然想求教程？？？

还做了一组变形数字，想知道怎么做的？Call 他写个教程吧！

他用我的工具，做了很多案例在 #PPT365# 的微博话题上，那里还聚集了很多人的设计脑洞，大家可以随时去找灵感噢～（对了，本篇中若无特殊注明的案例均来自 @Simon阿文 ）

一个大写的粒子字

1. 试玩地址

https://wangyasai.github.io/PerlinNoisePainter/

2. 灵感来源：

在学习粒子系统时，想看粒子和文字结合会产生什么火花？

最先想到一个最简单的方法，在粒子的上层加一层镂空文字的蒙版，把不想看到的粒子遮住，只看到镂空的部分。

诶，就get了粒子字的效果～

2. 工具简介

如你所见，这个工具就是粒子充斥在文字里面，拥有它，让文字搭上酷炫的班车。

这个工具已经默默更新了 2.0 版本，1.0版本需要上传黑底白字的图片，现在直接在文本框输入文字，即刻生成效果。同样，也支持输入符号，输入一个 ★ ，就可以生成五角星粒子字。

用 Nums 控制粒子的数量，数量越多，当然文字看的更清楚啦，粒子越多也会影响运行的速度，建议粒子控制在能够看清文字的数量就够啦～

粒子的默认颜色是三种颜色随机分布，当选择 ColorMode 里面的渐变模式，颜色就会从上到下渐变。

3. 参数解释

4. 案例应用

想必你也掌握了下面的是怎么做的了吧～

黑客帝国同款文字雨生成器

1. 试玩地址 

https://wangyasai.github.io/TheMatrix/

2. 灵感来源

没错！就是来自科幻大片《黑客帝国》！！！

3. 工具简介

顾名思义，就是一款自带黑客帝国特效的文字工具。作为一个爱耍酷的工具，它绝对不会满足一种模式的，它内置多款故障字体，你可以用它来生成各种乱码文字雨背景。

除了默认的几种模式，你还可以定制文字雨中的关键词，只要在 Unicode 中选择 Text 模式，在下方文本框中，随意敲击文字，就可以实时看到输入的文字在屏幕中随机生成，瞬间 get 词云的新玩法！

另外，还提供多种参数设置，比如文字雨射出的方向，比如你可以通过设置透明度来营造出射线的错觉~

当把文字方向改成从左到右横，这不就是一面弹幕墙了吗～

4. 参数解释

5. 案例应用：

看，@林书尼 把图表和这个效果结合，开启科技感图表的新鲜玩法～

说完上面上面3个我制作的文字相关工具，再来说一个运用隐藏技巧可以制作油画字效的工具。

向量画笔重绘器

1. 试玩地址：

https://wangyasai.github.io/Noise-flow-field-painter/

2. 灵感来源

来自 Jason Labbe 大神开发的工具 Noise Flow Field Painter（地址：https://www.openprocessing.org/sketch/472966）我在他的基础上，加了一个控制面板，像其他工具一样可以方便修改参数～

3. 工具简介

这个工具就是用一堆圆柱形状把一张图片重绘，神奇地模仿出油画的质感~~

你可以上传你电脑中的任意图片，想重绘哪张就哪张。

可以非常方便地调整画笔的粗细、长短

调整画笔的粗细

诶，还记得前面说这是一个可以运用隐藏技巧制作油画字体的工具，如何实现呢？

上面我们上传的都是完整的照片，试想上传有油画效果的文字，那不就是油画字吗？

@Simon阿文 就这样用它做出了一套很好看的油画数字，相信你现在也掌握了吧

同理，各种圆形、方形、三角形、不规则图形的油画效果也这样处理。

4. 参数解释

5. 案例应用

让梵高的油画再次加工，这个笔触真的超有感觉～

@Simon阿文 用他旅游时拍的一张照片，把处理后的油画效果图，再和原图进行拼接，内容引起极度舒适，看了好想出去玩呀！！！

说完了上述的这四个字体工具，我们再来玩个球吧！

玩个球

1. 试玩地址

https://wangyasai.github.io/Play-a-ball/

2. 灵感来源：

相信不少同学在刚入门 Ai 的时候，都跟着教程做过这样的抽象球体：环形，波纹，网格……

虽然教程简单易懂，但很多同学还是过目就忘……现在，懒癌的福音来了！

3. 工具简介

这是一个在线抽象球体生成器，可以一键生成那种在 Ai 入门教程中非常常见的球体：环形，波纹，网格……是的，现在你连门都不用入了。

你可以随意更改花纹：

你可以调整球体的平滑度来实现变形：

当然，每种花纹的疏密和大小都可以调节：

懒得调参数？那就直接点击随机生成好了：

甚至可以上传自己的图片，作为图形的纹理！看，一秒钟自制星球：

4. 参数解释：

5. 案例应用：

恭喜你，文章已阅读过半！收藏好这篇，明天优设网会发布第二篇，将迎来一大波点线背景素材生成器，还有亚赛大人的专访哦，敬请期待！