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

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

诶,没想到现在自己做了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. 案例应用:

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

优设大课堂

文章来源:

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