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

上篇的5个神器大受欢迎，人气极高。很多人也好奇背后的创造者@亚赛大人 是何方神圣，所以我特意做了个小专访，在收下今天的神器之前，一起来认识下这位造福广大设计师的小姐姐。

给大家介绍一下你自己（职业、过往经历，做过的事）

hi，我是亚赛，目前是一个数据可视化设计师，业余的设计工具开发者。

最初想做一些更酷的可视化效果，就学习了一门适合编程小白入门但创造性超强的编程语言 Processing ，用它做了一些可视化作品和循环动图的打卡，在这些过程中就发现编程的乐趣与可拓展性，后来又入门了 html 和 js ，开发了这一系列在线设计工具。

开发这么一款工具需要花多久时间？开发过程遇到最大的挑战是什么？

根据工具的难易度，最快的几个小时就搞定了，比如漫画速度线；多则断断续续大半个月，在 加一个 新功能 – 出现bug – 解决bug – 再加一个新功能……中来回折腾几十个回合。

在开发过程中，最大挑战应该是一些需求没有写出好的解决方法 T_T

比如做 Perlin Noise Painter 的时候，最理想的状态应该是输入字符自动生成。但那个时候没想到解决方法，所以用了另一个方法，需要用户自己上传图片，利用图片中像素的明度去生成效果。工具发布后，发现部分用户因为图片素材内容的不确定性原因，生成不了效果……隔了一段时间，写的东西多了，了解更多解题思路一样，终于把输入字符可以实时生成效果做出来了，这样也降低了用户的操作成本~

最近有没有在开发的设计神器，提前透露下

最近暂时没有在开发的工具，但 @Simon_阿文 给我提了一些设计的需求，比如用Ai中混合工具效果能否应用到在线工具中，正在排上我的日程表。

大家如果看到不错的效果，觉得有用工具生成的潜力，可以来微博 @亚赛大人 告诉或许就帮你开发了

推荐你觉得特别好用的日常神器（范围不限，实体/虚拟产品都可以）

推荐一款我每天都会用到图片管理工具：Eagle。

我是被优设上的一篇文章《这个国人开发的Eagle，堪称素材收集和管理神器！》强烈种草的！

它有很多炒鸡棒的点，上面的文章介绍的非常详细了。那我来说说喜欢的几点，一是它可以保存图片所在的地址，方便可以追踪图片的来源。我还可以利用这个地址，找到创作者的网站，看到他更多作品；二是可以给图片加标签，大大提高检索效率。

最令我惊艳的一点是，它有一个颜色筛选器，可以根据你选的颜色筛选出接近色相的图片～

相信你用上这个工具，也会爱上它的~强烈安利！

通过哪些渠道可以关注你？

虽然注册了很多社交平台，但来微博 @亚赛大人 找我最方便啦～

还有一些地方不定时会出现一下：

知乎：@亚赛大人

Twitter ：@yasai_wang

Instagram ：@yasaisai

采访看完，继续来收今天的6款神器！

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

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

漫画速度线生成器

1. 试玩地址

https://wangyasai.github.io/Speed-Line/

2. 灵感来源

当漫画遇到超燃场景时，画面上常常会包围着一圈线，俗称速度线。可惜网上的优质速度线素材极少，要么付费要么不是透明背景…所以我们就制作了就有了这样一个简单好用的速度线生成器！

3. 工具简介

如何一秒钟让你的设计成为焦点？如何让画面冲击力突破天际？你可以试试在画面上加上速度线，感受一下啊！

你不仅可以调整焦点位置，你还可以调整线的数量、粗细、长短

同样，点击 Save 就可以保存透明背景的图片了，再也不用在素材网站上苦苦搜寻。

4. 参数解释

5. 案例应用：

中二感溢出屏幕……

你甚至可以切换成弯曲线型，一秒钟制造诡异画风

贝塞尔曲线生成器

1. 试玩地址 

https://wangyasai.github.io/Bezier/

2. 灵感来源

来自一个非常酷的网站https://colorpong.com/，这个网站上有超多酷炫抽象的点线效果，不过需要购买才可以使用哦～

3. 工具简介

这种粒子曲线，非常适合喜欢科技风的甲方了，一键无痛生成各种酷炫的线型图片！

这个工具有七种点线style，各具特色～

可以调整点线的数量

也可以调整点线的杂乱程度，杂乱也有杂乱美呀～

4. 参数解释 

5. 案例应用 

抽象线条再旁边点缀一些关键词，很科技作风。

@林书尼 把工具中几种形状结合起来，再加上一些同样抽象的粒子，一张抽象海报就诞生了！

动态马赛克背景生成器

1. 试玩地址 

https://wangyasai.github.io/Awesome-Mosaic/

2. 灵感来源

据说在发布会中，下面这张马赛克背景重复利用太多次至今没找到替代品……所以，我又开始了

3. 工具简介 

最初的时候，我们就想开发一个马赛克背景，就带点科技效果就好了，嗯，有点闪的科技效果。

在开发过程中，我做偏了……忘记为什么就加了下面的环绕模式，但最后的效果似乎还不错就保留下来了。控制面板上可以改变整体的规则程度，它可以每一圈一样的宽度，也可以每一圈各有长短，很随意但依然有节奏的变换。

可以用 Spacing 控制圈与圈之间的间距

用 Nums 调整每一圈中的数量

4. 参数解释 

5. 案例应用 

如何更骚气？试试粉黄撞色！骚气值至少上升10个度吧！

若是换成黑金配色，诶，画风转向低调奢华有内涵

万箭齐发biubiubiu生成器

1. 试玩地址 

https://wangyasai.github.io/Stars-Emmision/

2. 灵感来源

一年前，我们在群里讨论到一张有冲击力的海报，诶，这不就是中心向外扩散的射线吗？如果有这样一键生成小米海报这种背景效果的工具，无疑会大大节省了我们的设计时间。

3. 神器简介 

你一打开它，就会有一堆射线迫不及待地向你射来：

支持 | 上 | 下 | 左 | 右 | 中心 | 五种刺激的发射方式，看久了比刺激战场还紧张吧。

可以调整粒子的数量

最后保存的静态图，有种下一秒就要冲出屏幕的感觉！

4. 参数解释

5. 案例应用 

当然，你也可以录制成动图 / 视频，效果会酷炫一百倍：

6. 彩蛋1

这个工具的动效是在 Processing 大牛 Daniel Shiffman 的教程 starfired 启发下完成的。教程中最后的动效如下：

Daniel Shiffman，是一位讲课超级有活力且幽默的老师，感受一下他的画风。

如果你也想学习 Proceesing / p5.js 以及其他编程做出一些有趣的效果，可以关注他的 Youtube 频道（The Coding Train），跟着他的课学习，相信你也可以收获很多～

7. 彩蛋2

在我们的杂货铺，大家会丢一些好玩的神器或者一些酷炫的图片。我们就有可能把这些酷炫好玩的效果，制作出为设计师省力的设计工具！所以，大家如果看到好玩的效果可以来微博告诉我们呀～

群里的另一个大神 @pissang，他做了很多以 3D 效果为主的工具，每个工具生成的图片，随便一截都非常撑场面！指路：https://gallery.echartsjs.com/explore.html?u=bd-2215764494&type=work#sort=rank~timeframe=all~author=all

向量场迹生成器

1. 试玩地址 

https://wangyasai.github.io/Perlin-Noise/

2. 灵感来源

在一次粒子系统的学习过程中，我少写了一行代码 background() ，居然……获得了这个奇妙的抽象效果，或许这就是代码的奇妙之处吧，给人意想不到的效果。

3. 神器简介

和上述所有工具一样，各种参数可调整：颜色，线长，噪波比例……

是不是很像高中的等高线？但更也是更有艺术感的等高线吧！

控制面板中有一个参数 noiseScale ，它就是负责让线的弯曲程度，数字越小，比卷发还卷，不信的话你试试，数字越大，就相对越规整，也不会出现等高线那样一圈一圈的。

最后绘制出流畅美感的线条～

4. 参数解释 

5. 案例应用 

嘿嘿，恭喜你已经抵达本文的最后一个工具了！笔芯?～

粒子爆炸生成器

1. 试玩地址 

https://wangyasai.github.io/Particles-Emission/

2. 灵感来源

这个工具就是开篇提到的因为打卡内容的相似性，想开始做个小工具，也因为开启制作这个工具，我才陆陆续续制作了上面的9个工具，还是很有成就感哒～

3. 神器简介 

想必大家都很熟悉我的工具的参数套路了……颜色、速度、形状、粒子大小等等……

调大粒子的阴影效果，竟然有种假3D的错觉。

增加粒子的重复次数，可以让粒子瞬间充斥你的整个屏幕

勾选旋转，就可以保存这样一张绽放出一朵抽象粒子花？

4. 参数解释：

5. 案例应用：

工具集合

最后，所有工具都在这个汇总页上～

直达链接：https://wangyasai.github.io/designtools.html

好啦，快去玩吧～