AlphaVerse

Space Type Generator

8 min read

Introduction

Info

Space Type Generator 是由设计师 Kiel Mutschelknaus 开发的一个非常酷的动态网页字体生成器。

网址： https://spacetypegenerator.com/

Kiel Danger Mutschelknaus 是一位来自马里兰州的动态和生成式设计师。他的工作室专注于开发生成式工具，用于创作定制化的字体、图像和动态作品。他的编程项目 Space Type Generator (STG) 是一款开源工具，允许用户创建自己的动态字体实验。STG 目前有 16 种变体，并且还在不断增加。它已被世界各地广泛用于各种项目，从音乐视频到杂志封面，再到大型壁画。Space Type Generator 曾被 It’s Nice That 、The Verge 、étapes、Facebook Curated、Novum Magazine、Eye Magazine、Type01和PAGE等媒体报道。

https://www.kielm.com/about

How to use it？

1. 明确分区，操作简便

网页将界面的大致划分为参数区、预设效果区、项目选择区、文本输入区五个部分，并且根据每个效果不同的功能进行了相应的调整。

输入文字内容-拖动滑条-调整到到想要的效果-保存，简单四步就能让你拥有一份专属动态效果！

https://zhuanlan.zhihu.com/p/331892360

(from https://zhuanlan.zhihu.com/p/331892360)

2.精细调节面板 (Parameters)

通过拉动滑块，你可以微调每一个细节。

文字与布局 (TEXT & GRID)

  • TEXT: Type X / Y: 文字在水平或垂直方向的拉伸/分布。
  • TEXT: Weight: 文字的粗细。
  • GRID: Rows: 网格的行数（增加行数会让画面更密集）。
  • TEXT: Padding: 文字之间的间距。

波动控制 (WAVE)

  • WAVE: X / Y / Z Size: 波浪在不同空间维度的大小，调大会让扭曲感更强。
  • WAVE: Speed: 动画播放的快慢。
  • WAVE: Row Offset: 行与行之间的偏移，让动画产生错落有致的节奏感。
  • Slope: 整体画面的倾斜度。

色彩与保存

  • SEGMENT COLORS: 点击色块可以修改文字的不同分层颜色。
  • BKGD COLORS: 修改背景颜色。
  • Save Loop: 点击后会生成并下载这一段循环动画。

3.视角控制 (Camera Controls)

用于调整你观察这个文字装置的角度

Note

  • Type & Stripe adjust 2: 文字与条纹的二次细微调整。
  • CAMERA: X-Rotation: X 轴旋转（控制镜头俯视或仰视的角度）。
  • CAMERA: Y-Rotation: Y 轴旋转（控制镜头从左侧或右侧观察的角度）。
  • CAMERA: Z-Rotation: Z 轴旋转（让整个画面像方向盘一样翻转）。
  • Camera Zoom: 相机缩放（拉近或拉远镜头，控制景别大小）。

4. 动态生成模式

STG 共有22种 动态生成模式，下面逐一解释：

  1. CYLINDER (圆柱): 最经典模式，文字像贴在旋转的圆柱体（如易拉罐）上滚动。
  2. FIELD (场): 文字分布在网格中，像海浪或波纹一样起伏震荡。
  3. STRIPES (条纹): 文字呈长条状排列，通常用于制作滚动的背景条带。
  4. COIL (卷线): 文字像弹簧或螺旋线一样缠绕旋转。
  5. FLAG (旗帜): 文字像风中的旗帜一样飘扬，有自然的波浪形形变。
  6. MORISAWA (森泽): 致敬著名的森泽字体设计，通常具有更规整、排版感更强的视觉效果。
  7. CASCADE (级联): 文字像瀑布一样向下流淌或层层叠加。
  8. RIBBON (丝带): 文字像丝带一样在空间中穿梭弯曲。
  9. LAYERS (图层): 强调文字的前后叠加和纵深感，适合制作 3D 堆叠效果。
  10. DANGER (危险): 风格通常比较硬核、破碎或具有强烈的闪烁感。
  11. STRING (弦): 文字像挂在绳索上一样摆动。
  12. BADGE (徽章): 适合制作圆形的 Logo 或徽章样式的旋转文字。
  13. CLUTTER (杂乱): 随机感更强，文字散乱分布，适合凌乱美学的海报。
  14. CONSTRUCT (构造): 具有机械感或建筑感，文字仿佛在被不断组装。
  15. SNAP (快照/折断): 动画往往具有较强的停顿感或类似折断的力度感。
  16. FLASH (闪烁): 强调明度变化或极快的切换效果。
  17. POW (爆炸): 具有漫画感的爆发式动态，视觉冲击力极强。
  18. CRASH (碰撞): 文字之间或与边缘发生模拟碰撞的效果。
  19. CRASH CLOCK (碰撞时钟): 结合了时间流动感的碰撞动画。
  20. VESSEL (容器): 文字仿佛装在某个形状（容器）内部移动。
  21. SHINE (闪耀): 增加光影扫过或文字发光的效果。
  22. BOOST (增强/加速): 产生一种不断加速或能量积蓄的动态视觉。

5. 预设效果 (PRESETS)

这些是设计师为你配置好的“一键滤镜”。如果你不想手动调节复杂的参数，可以直接点击这些按钮来应用成熟的风格：

  1. A Banner (横幅): 标准的海报或横幅布局。
  2. A Twist (扭曲): 带有旋转或扭动的动态。
  3. Folds (折叠): 模拟纸张折叠的硬核阴影效果。
  4. Flat Sea (平坦海面): 较平缓的波浪式起伏。
  5. Barber (理发店): 模仿理发店门前旋转灯筒的斜向纹路。
  6. Silos (筒仓): 类似于工业管道的堆叠感。
  7. Mystery (神秘): 较暗、带有隐约动态的视觉。
  8. Cola Waves (可乐波浪): 具有液体流动感的动态。
  9. Origami (折纸): 模拟折纸艺术的几何形变。
  10. B&W (黑白): 经典的纯黑白高对比度预设。
  11. Newsprint (新闻纸): 模拟旧报纸的印刷颗粒感。
  12. Edge Case (边缘情况): 通常是一些极端的、实验性的参数组合。

Flag模式的预设效果区

Graph View