学编程后,我做了这10个有毒的在线免费设计神器!(下) - 优设网 - UISDC

学编程后,我做了这10个有毒的在线免费设计神器!(下)

2019/05/20 40164评论 30

上篇的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

好啦,快去玩吧~

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/10-design-artifact-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 职场 优设大课堂 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里