学编程后,我做了这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

好啦,快去玩吧~

优设大课堂

文章来源:

Author:3年2班程远
link:https://www.uisdc.com/10-design-artifact-2