今天马克笔设计留学的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
南安普敦大学交互设计硕士
擅长交互设计与用户体验相关专业辅导和课程知识体系建立
任何关于院校和作品集的问题
欢迎随时和马克君沟通
知无不言,言无不尽