动态海报生成器

https://www.uisdc.com/space-type-generator

大家好，我是小凹，是的，你没看错，又是我~们！

这期打算给你们分享一个制作文字效果的网站，并且它还可以设置动态的样式，让你的海报动起来，来，网址先给你们：

spacetypegenerator.com

我们先看看，东宁老师用它设计的海报是什么样子的吧？

想知道我们怎么设计的这几张动态海报吗？那就跟着我继续学习今天的教程吧！

打开之后，是这样一个页面，这里很多选项和按钮，你可以随意的调整，先玩一哈，就大概了解这个网站的功能了。

这个网站，我们可以称之为“空间类型生成器”，开发者是这位大佬。

他叫Kiel Mutschelknaus，这位设计师是在读研究生期间自学的3D和编程，创建了这个网站，经过这几年不断的更新，现在这个网站非常强大，想要彻底弄明白里面的各种效果，就相当于学了一个新的软件，所以，希望大家今天可以跟着我的思路，打开网站，边看边学，这样才能更好的吸收。

接下来，我们来深入了解这个网站的功能，从而为我们设计服务。

网站包含5个功能分区

现在总共有11个空间类型，随着作者的不断开发，类型会有所增加，所以大家平时可以多关注这个网站，说不定什么时候大佬就更新了。

我们先来看看第一个立体空间类型——圆筒，这个也是我们打开网页之后默认的类型，首先我们看看它的参数设置都代表了什么

先看第一部分的四个，是基础调整，分别对应的是：

• 圆形的半径，数值越大，圆环越大；

• 圆形的个数，数值越大，楼层越多；

• 旋转的速度和方向，默认数值是-5，向左调整越大，圆环就向左旋转并且越快速，向右调整越大，圆环就向右旋转并且越快速；

• 最后每一层的圆柱偏移方向。

第二部分是7个调整命令，分别是：

• 波浪的个数，这个是在下面几项调整后再调整它会有明显的效果，默认是2，数值越大，波幅越多；

• 波浪的速度，数值越大，起伏越快；

• 下面是经度纬度，数值越大，经纬度的文字变化越大；

• 波纹，数值越大，起伏越多；

• XY刻度上的文字，长度和高度。

这部分就是对文字本身的调整了，X越大，文字越宽，Y越大，文字越高，重量就是文字的粗细，这部分三个选项和上面的XY轴对字体的变化是不一样的。

这部分是在上面所有都调整好之后，对XYZ轴上文字的方向变化的设置。

这部分就很简单了，主要是对于视角的调整，想要什么视角直接调整参数即可。

左上角两个色块，是可以替换主体颜色和背景色的，最上方有个pride（自豪），应该是作者提供的色彩参考，是一个彩虹色渐变。

看下它们的动画效果

△ simple简单

△ Jellyfish水母

△ Crown王冠

△ Complex复杂

△ Weave编织

△ Hoops铁环

上面红色区域，是文字内容，把你想要的文字信息输入进去即可，当然，这里只能输入英文的，并且字体没得选，（不过，后面有几个空间类型是可以输入日文和韩文还有中文的）

下面蓝色块，点击之后会有窗口弹出，显示的大概意思是，如果你想使用这个网站，可以把做完的作品发给他的邮箱，得到允许方可商用，以及后续他会添加其他字体进来，完善这个网站。

第二个空间类型——领域

第一部分的四个，是基础调整，分别对应的是：

• 网格的栏数，数值越大，文字的长度就越长，

• 字距和行距就比较好理解了，和我们使用的软件逻辑是一致的。

第二部分主要是文本的调整

• X范围是横向进行调整，注意这里是直接拉动文本框，数值越大，文字被拉动的幅度就越大。

• Y范围是竖向进行调整，数值越大，文字被竖向拉动的幅度就越大。

• 字重这里和平时使用的软件是一样的。

第三部是对动画的调整

在三维的空间里面除去X轴和Y轴还有一个深度的Z轴，所以我们在调整的过程中，就可以调整出三维的效果。

△ stack堆叠

△ bricks砖块

△ simple简易

△ complex z复杂Z

△ zebra斑马

△ harlequin花斑

领域里总共有6个动画预设，在此基础上调整文字和一些参数，就可以作为自己画面的主体或者背景了。

文案方面，选择了《微风吹来少年的心事》这本书，并为其设计一款配套动态海报，为了还原出那种被风微微吹动的视觉效果，经过反复的尝试后，终于找到了最适合它的设置参数。另外，版面的构成也是影响画面情绪重要元素。标题通过错落的编排去呈现，是为了模仿风的无形与变化莫测。其余的元素也尽量预留出更多的留白空间，让整体显得更加透气一些。

这个例子的参数设置其实比较直观，上方基本的改动，实际上是在调整文字的大小、距离、粗细等属性。而决定它要怎样去运动的，是下方的两个属性，分别是X轴和Z轴上的平滑运动，需要注意的是，运动的幅度会影响我们对“风”力大小的判断，如果是微风的话，抖动的幅度就不要太大。

不仅仅是对于参数的设置，在设计的很多领域里，都证明了“少即是多”都重要性。所谓贪多嚼不烂，我们在接触新事物都时候，内心多少会有一种把所有新鲜要素都用上都冲动，不过，相信我，真正成熟的做法，是了解每个命令的优缺点，然后针对不同的应用环境，去斟酌和精简，克制的运用它们。最终会得到更好的效果。

第三个空间类型——条纹

第一部分依旧是文本的调整

• X范围是横向进行调整，注意这里是直接拉动文本框，数值越大，文字被拉动的幅度就越大。

• Y范围是竖向进行调整，数值越大，文字被竖向拉动的幅度就越大。

• 跟踪部分可以调整文字的字距。

数量是可以规定画面中的丝带的数量，

X空间和Y空间是让整个图形在三维空间进行旋转，

丝带的大小也可以通过命令进行调整。

动画的速度和波动的激烈程度可以在这个部分进行调整。

△ marquee遮檐

△ subway地铁

△ wow哇哦

△ stacks堆叠

△ OLD SEA 黑白海洋

△ color sea 彩色海洋

△ simple wave简单波纹

△ simple wave简单波纹2

△ not so werid不是太怪

△ racer赛车旗帜

丝带这部分的动画预设都比较动感，建议大家在使用的时候不要用预设好的颜色，因为颜色过多，很容易让你的设计画面不受控制。我个人比较喜欢“地铁”的动画预设，设置的好，可以让画面变得很时髦。

第四个空间类型——线圈

X范围和Y范围分别是调整字体的高度和宽度，调整后整个矩形环也会随着发生改变。

这个部分可以调整图形的矩形数量，和每一个宽度，还有端点可以进行调整选择是否使用圆角。

调整半径同样可以改变圆环的大小，注意这不会改变文字的大小和形状，起始位置是从内向外更改圆环的大小，旋转次数默认是1，数值越大旋转的速度越高。

如果感觉单纯的圆环转动有些单调，可以尝试使用这个部分的命令，可以给圆环增加一些波动的属性在里面。这里的尺寸、数量和速度都是设定的波动的属性。

△ wide宽广

△ super超级

△ amoeb变形虫

△ spacer隔档

△ kitty 凯特

△ hourglass 沙漏

△ star星星

△ Zztar异形星

△ pretzel糖果混合效果

△ lemniscate柠檬

有点爱线圈这里的动画预设，尤其是沙漏后面的几个，都是可以作为画面主形象而存在的，比如这部分的小标题我就是用的Zztar来调整的。

第5个空间类型——旗帜

X长度和Y长度同样是调整单个文字的长度和宽度，数值越大效果越明显。

行数是调整整个图形的高度的。

最后一个数值是可以进行文字的大小的调节，注意这里的调整是不改变文字的间距，是直接将文字在原文进行大小的调整的。

波动的调整就和前面的效果是一样的，

排数抵消可以在不改变整体高度的情况下，让整个画面由平滑的效果变成较为尖锐的效果。

△ a banner横幅

△ a twist扭转

△ folds褶皱

△ flat sea平坦的海面

△ barber理发师

△ silos筒仓

△ mystery神秘

△ origami折纸

△ cola wave 可乐波

△ origami折纸2

△ B&W黑白

△ newsprint新闻纸

△ edge case边缘盒

它的预设很像，「条纹」和「领域」空间类型的预设结合，这里它默认的预设图像都比较夸张，大家用的时候要适当的调整，虽然这里不能调整字体，但是如果作为一个动画来说，你可以试试不用文字，选择标点符号，或者一系特殊符号，有可能会得到一个不错的的动画效果。

第6个空间类型——森泽

这个效果很适合文字很多的内容进行编排，这里的命令相对来说比较简单，都是在调整文字的关系。可以参考图片上的翻译。

卷屏速度是设定动画的速度，数值越大，速度越快。

蒙版这里是设置动画的宽度，数值越大，动画的宽度越小。

△ 后置空间 post space

△ bridge 桥梁

△ beach 海滩

△ moon 月亮

△ whitney 惠特尼

△ recede 逐渐变小

相信大家看了「森泽」的预设，会满脑袋问号，这好像一堆代码啊，其实这也是它区别于其他空间类型的地方，它这里可以以符号（字母）代替，做出不同的动画图形，适合大面积文本信息和抽象类的设计。

这个部分主要是对文本进行一个调整，和前面的命令都是相似的，X范围是对文字的长度进行调整。字符的宽度是调整文字的字间距。

到了这个部分是对动画的整体进行调整，主要是调整动画的激烈程度。

△ checker校对人

△ cascade瀑布

△ classic经典

△ mosaic马赛克

△ ticket票据

△ run跑步

△ salmon发廊

△ gird网格

△ web art 网络艺术

△ sparkle闪耀

△ pixel gradient像素过渡

和「森泽」有点像，都是不走寻常路的预设，只不过它这里会以马赛克的形式为主，还有一些射线的波动，适合做背景的大面积图像，从“发廊”之后，可以尝试以空格或者符号来代替字符，你会得到很多惊喜。

第8个空间类型——丝带

第一部分也是基础的调整：

• 段间距：数值越大，行距越宽松，彩带间距也随之变大。

• 段计数：数字越小段落越多，数字越大段落越少，转折也就越少。

• 字体高度：数值越大，字体越高。

• 跟踪：这个其实是字体的宽窄，数值越小，字体越窄，最后会变成一条线。

• 笔画的类型：相当于笔画的粗细，调整文字的字重。

速度就是彩带漂浮变化的速度，越大，速度越快。

这部分主要针对色带的调整：

• 色带高度：数值越大，色带越高

• 色彩拉伸：数值越大，拉伸越长

• 色带计数：数值越大，色彩的层数越多

• 色带间距：层数拉开的距离，越大距离越大

• 色带偏移：错开的距离，越大错位越大，在0和2的时候色带是对齐的，中间数值会让色彩产生错落感。

它下面有个候补，点选之后会给你一个随机的错落感。

比例：就是图像缩放的大小，越大图像在画面也就越大

左上角，一个是储存按钮，它可以存储GIF格式的图片，一个是色彩的设置，可以选择给彩带设置渐变色或者纯色，每一面的颜色是可以单独设置的。

△ Basic基本

△ Streamers彩带

△ Terrace梯田

△ Link链接

△ Sea海洋

△ River河流

△ Web Art网络艺术

△ Primary初级

△ Snake蛇

△ Hot / Cold冷暖渐变

△ Track轨道

△ Track II轨道2

丝带这个命令，顾名思义，能够带来类似丝带的效果。但是我偏偏不想让它像这样直接呈现，因为视觉传达的核心始终是内容，而非酷炫的形式，在寻找内容的同时，我也在考虑怎样将这个效果简化处理，并且能够让我的文案信息与之匹配。

反标签，本身是一个带有比喻性质的标题。不过在视觉表现上，这种比喻也是可以通过动画来实现具象表达的。动态的方形色块，被我赋予了“标签”的含义，而上面的文字“label”也会随着标签的流动而随之反转。这很直观，也很有抵制偏见的属性在里面。在版式编排上，我也试图打破那种标题在上，内容在下的刻板印象，将大部分的内容整合到一块视觉面积上。在年轻又富有活力的色彩烘托下，给人一种耳目一新的视觉感受。

参数的调整思路主要是，加大线段的对比，让绕转的字数减少，并且间距加大。同时将色块的比例控制在接近1：1的方形尺寸下，让文字变粗，并且在色块内设置一个版心的大小。

在呈现的视角中，把Y和Z轴的数值拉满，并且微调了X轴的角度，让画面呈现出最简化的正视角度。调整的过程需要不断反复尝试，才能得到自己想要的效果。随着字数的增加和减少，呈现出来的效果其实也并不一样，所以这里的数值是仅供参考的，大家可千万别死记硬背，重要的是理解规律。

第9个空间类型——层次

这个是带有一些字体选择的，上部分的设置：

层数越多，纵深的楼层也就越多；字号，就是字体大小，内部高度，就是上下两边的高度，内部宽度，左右两边的宽度；旋转默认是8，越向两边，旋转的角度越少。

△ Speed Racer 极速赛车手

△ To Space前往太空

△ 나선형의 것螺旋形

△ Lost Time 失去的时间

△ Dot Spiral 点螺旋线

△ Be ggressive 积极进取

△ Meat Space 肉空间

相信很多同学在网上都看到过类似的动态海报，以为只能用AE实现。其实，这个空间预设，毫不夸张的说，每一屏截下来都可以作为一张海报了，只不过字体方面没有太多选择。

第10个空间类型——危险

“危险”这个空间类型，可调整的按钮比较少，上部分五个，分别是：

• 速度：和前面一样，数值越大，动作越快；

• 大小：指的是破碎斑驳的大小，数值为0时，没有任何变化；

• 列：向左或向右都可以加重破坏力度；

• 复杂：破坏的复杂性；

• 行：向左是水波纹的效果，向右是支离破碎的效果，都是在横向上破坏的力度加大。

下部的几个设置按钮也非常简单

设置文本内容，选择字体（可算有字体选择了），还有针对字体的大小和行距进行调整，颜色可以和背景反向。

△ All yours都是你的

△ Just OK还可以

△ Not so good不太好

△ Cheer欢呼

△ Date 日期

△ Hopes希望

△ Circle圆

这里大家设置文字信息的时候，如果是一句话，尽量设置成有长短变化的文字组，包括这里默认的文字组，都是很注意长短节奏的变化，建议大家可以参考。

老话说，好戏都在后头呢，这个网站完全印证了，这里11个空间类型，最后这个是我个人最喜欢的，因为它自带“钢笔工具”，可以随意造型，甚至是设计文字。

第11个空间类型——串联

因为最后这个功能较多，所以每一部分，我都给大家拆解出来，这样更易懂

第一行的英文，告诉你，你想新起一个锚点，你就在鼠标没落下的地方，按下回车键，这样就是单独的一条线了。

还有字体选择里面，这次包含了各种语言，终于可以打中文字了，而且是免费的思源黑体，以及日文的思源黑体粗字重。

色带的数值越大，宽度越宽，色带条数默认是1，数值越大，条数越多，轮廓描边是根据条数描白边或者黑边，最后一个是点选圆角端点。

这部分就厉害了，可以选择任何一种模式，可以是渐变，文本，条状，还有所有模式的混合，这对于我们设计师来说太强大了。

对于色彩也给了很多选择，五个渐变节点可选，你想要什么渐变都可以满足你，背景色前景色也是可以改变的哦。

△ Vote 投票

△ Tracks 轨道

△ Dream-aqer梦境者

△ Juicy多汁的

△ Yes &是

△ Guts胆量

△ Eels wind 鳗鱼风

△ Reset Points 重置点

「重置点」是针对上面所有预设的基本款，在这里你等于新建一个画面，去添加锚点，绘制图形，作者大大太贴心了。

串联这个命令给我的印象，就是一个大号的贝塞尔曲线工具，虽然没有办法调整角点，但是已经可以轻松勾勒图形了，不过有一个问题需要注意的是，我发现这个工具好像不能删除节点！

我在调整造型的时候，就遇到过好几次这种情况，明明调整好造型了，但是手一滑，就要悲剧的重新来过了。

这是一本科幻书籍的宣传海报，名字是交错的世界，如果想体现这个交错的概念，选择“串联”这个命令感觉就很不错。我特别喜欢它拐点的位置，那种文字变形的视觉。在造型上，我并没有选择特别复杂的样式，因为我会觉得作为科幻题材，要做的其实是“减法”才对。除此之外呢，为了表现这种未来感，我也使用了黑白两色，让版面显得客观，并且理性的印象。为了贯彻这个精简的概念，层级划分上，也是尽量克制的使用对比，希望能够借由这样的画面，让内容更好的传达。

在这个案例中的参数设置的操作其实并不算困难，主要就是选择了描边和黑白的配色，重点部分主要在随后的贝塞尔工具的运用上。

小贴士

如果你使用了mac端自带的录屏工具（Shift+command+5），那么就需要手动修改文件的扩展名了。经过测试，ps软件可以成功拖进去.MP4格式的视频文件。

另外，录屏的时机也很重要，如果是设计类似的文字效果，就需要让起始点和终点的画面能够正常衔接，所以一定要把这些都录制进去，更细节的调整就需要在软件里去剪辑了。

把视频拖动到PS的界面里之前，需要先打开窗口命令下的时间轴。我们可以在这个时间轴的窗口里适当裁剪动画的长度。

接下来，就是把录制好的视频拖动到PS软件里去排版了。扔到界面后，你会发现它是上图这样婶儿滴，这时千万不要慌，在点一下回车键。我们就得到了一个类似图片的“东西”了。因为这个画面的边界部分是没有动画的，所以我给它加了一层蒙版，这样一来，背景色部分就被去掉了，成为了一个退底的视频。

最后，在文件命令下，找到导出-储存为web所用格式（旧版）这个命令。就可以正常得到一张动态的海报图了，是不是很简单呢？

看完11个空间类型，是不是感觉这个网站非常的强大，可以帮助我们解决很多技术上的问题，不过，可能很多同学的思路还没有打开，这里我们看看作者本人，利用网站做的一些设计吧