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

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

2019/05/19 48496评论 53

在微博关注我@亚赛大人 的朋友,都多多少少了解到我做了不少设计小工具吧~ 最初用 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. 案例应用:

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

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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