Skip to main content

今天马克笔设计留学的MUzi老师要和大家聊聊文字动态,在数字时代,平面、静态的设计已经无法满足人们的视觉,于是动态照片、动态桌面、动态海报成了流行趋势,今天MUzi老师就来给大家推荐一个制作酷炫文字动态的神器,即使不会使用动画软件,也可以快速 get。

那今天要推荐的网站叫Spacetypegenerator

https://spacetypegenerator.com/

先来上一些网站开发者使用它做的作品。


更多作品详见作者的ins :kiel.d.m

是不是看了直呼厉害,但其实这个工具不止厉害,还简单,今天就来详细介绍一下它的用法。

下面就是说说 Spacetypegenerator 如何使用,它的功能分为五个分区,分别为

1.效果类型
2.参数调整
3.视角+动画预设
4.文本输入
5.实时预览+操作区域

其中 1 打开后出现的是网站提供的 11 种文字效果,也可以说是11种文字空间类型,随着网站的发展还在不停的更新和完善。他们分别是:

  • CYLINDER 圆筒
  • FIELD 领域
  • SRRIPES 条
  • COIL 线圈
  • FLAG 旗帜
  • MORISAWA 森泽
  • CASCADE 瀑布
  • RIBBON 丝带
  • LAYERS 层
  • DANGER 危险
  • STRING 串联

这些效果的玩法均相似,下面我挑选了几种比较有特点的进行讲解。

1.CYLINDER 圆筒

打开网页的出现的默认效果,虽然参数设置看上去很复杂,但其实很容易上手。这些参数的含义分别是:

CYLINDER 圆筒参数

CYLINDER:Radius 圆筒半径 ⬇️

CYLINDER:Count 圆筒数量 ⬇️

CYLINDER:Rotate 圆筒旋转 ⬇️

CYLINDER:Offset 圆筒偏移 ⬇️

WAVE 波浪参数

WAVE:Count 波浪数量

WAVE:Speed 波浪速度

WAVE:Latitude 波浪纬度 WAVE:Longitude 波浪经度

WAVE:X-Scale X轴缩放 WAVE:Y-Scale Y轴缩放

TYPE 文字参数

TYPE:X-Scale 文字x轴缩放

TYPE:Y-Scale 文字Y轴缩放

TYPE:Weight 文字字重

方框内部分是用于平滑 Latitude 波浪维度(x,y)和 Ripple 波浪波纹(z)的调整。
TWEAK:X Rotation 位置:X旋转
TWEAK:Y Rotation 位置:Y旋转
TWEAK:Z Rotation 位置:Z旋转

CAMERA 镜头参数

CAMERA:X- ROTATION X视角
CAMERA:Y- ROTATION Y视角
CAMERA:Z- ROTATION X视角
CAMERA:Zoom 缩放

为了引导用户挖掘出不同效果的玩法,网站中每个效果都给出了 预设效果 并且都比较夸张,支持在预设效果的基础上做修改。下面就是几种预设效果。

动画预设:Simple 简单;Jellyfish 水母;Crown 王冠;Complex 复杂;Weave 编织;Zebra 斑马;Hoops 铁环

Jellyfish 水母

Complex 复杂

Weave 编织

以上就是一个效果 CYLINDER圆筒 的详解,如果你熟悉了这些,接下来的 FIELD 领域、SRRIPES 条、COIL 线圈、MORISAWA 森泽、CASCADE 瀑布 都大同小异,由于细节过多就不再详细赘述,下面直接放一些效果图给大家看一下。

2.STRING 串联

整个网站最有特点的的一个效果,当属 STRING 串联 这是目前唯一一个可以在中央画板进行编辑的效果(其他效果都是通过修改参数栏进行编辑的),它的编辑方式相当于简化版的 「钢笔」工具。通过添加描点,拖动描点的手柄来改变曲线形状。

由于可编辑程度高,STRING 串联 能呈现出的效果也是多重多样,下面来详细说一下它的参数栏和编辑方式。

Strip Height 条的宽度

Strip Count 条的数量

Outlines 外描边

Round Cap 圆形端点

编辑方式:通过单击来添加描点,拖动手柄编辑形状。单击回车键,在画板上创建新的串联。

STRING 串联 是少数几个支持字体选择和中文字体的效果,在输入框输入文字,右侧选择字体即可。

此外 STRING 串联 效果提供了8种预设来帮助你发挥想象,无论是简单还是复杂的线条都超酷炫!

关于 Spacetypegenerator 的基本功能就到这里啦,下一篇我们来继续讲如何将这些效果的实际应用,下期见哦。

文章作者:MUzi
南安普敦大学交互设计硕士
擅长交互设计与用户体验相关专业辅导和课程知识体系建立

任何关于院校和作品集的问题
欢迎随时和马克君沟通
知无不言,言无不尽

0 0 vote
Article Rating
订阅
提醒
guest
0 评论
Inline Feedbacks
View all comments