网页设计 滑块控制_设计神器!5分钟就能上手的动态文字生成网站 – Space Type Generator - 优优教程网...

news/2024/5/12 20:37:45/文章来源:https://blog.csdn.net/weixin_39989190/article/details/110858805

你是不是在为不会使用AE、C4D制作动效很头疼?或者在为制作灵感而烦恼?又或是因为制作动效麻烦繁琐而熬夜秃头?

今天小编为你带来超炫酷超强大动效文字生成器——Space Type Generator,让你通过简单的参数调整就能创造无限种创意可能!

92852e3f79fbe975373dd9b54747284b.gif

网页概述

Space Type Generator是一个用代码自动生成动效的网站,作者是设计师Danger Mutschelknaus,意在通过这个有趣的工具,可以让动效界的新手只需要打开网页,就能拥有一个随时可用的动效工作站!

我想未来(或一个设计的未来)是在创造的工具,而不是设计的创作。——Kiel D. Mutschelknaus

be3d4568313fd528e825284b53ce5564.png

网页特点

首先一起来看看网页都有哪些有趣好玩让人记忆深刻的特点吧~

参数代码,随心定义

Space Type Generator可以自定义文字内容,但目前仅限于英文字母和符号哦~并且网页针对每一款动效都列出了极为详细的参数调整项目,包括旋转速度、旋转方向、文字倾斜、文字间距、波浪弯度等等,我们可以动过调整任何一个参数的数值来改变整体的效果。只有你想不到,没有Space Type Generator做不到!

bb5ec266e0714edc87bca2eca2aa6bd7.gif

明确分区,操作简便

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

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

f657b739adfdfb6a8c4b1a9487c7b968.png

十一款模式,多样选择

随着网站的不断优化完善,现已经开发更新到十一款效果!每一款都创意十足,炫酷无比~

5237281bb247ac32dbaceb2ec0b50a0c.png

动态展示,实时预览

网页界面除了参数调整区的遮盖外,整个界面都是图形展示区域,随着参数的调整,图形相应变化,更直观方便地帮助我们调整到自己想要的效果~

a4f992ad6e9fdfa09e309c6535f7cf52.png

效果选项

十一种神器好玩的效果都是什么样子呢~一起来看看吧!一定会有你想要的那一款~

CYLINDER-立体环形文字绕转

文字环形动态,通过参数的调整可以改变圆环形状、环绕方式、文字效果等等!看起来复杂高难度的图形,通过简单的参数调整就可以实现啦!

e188580c70e70ddc96586c5712646131.gif

FIELD-方形文字律动

以方形的基本形态给文字加入不同形态的律动,可以改变文字重复方式、文字字重、律动长度、波动幅度等等,何尝不是给文字排版加效果的好方法!

78667c7eb1fd06121636a43ac7aa4dfd.gif

STRIPES-波动横幅

条形横幅与文字的结合动态!可以改变横幅大小、文字大小、波动幅度、波形数量等等, 改变参数做出风格不同、令人惊艳的各种效果!

2bc04595bb5d6aafb4f091a851669b00.gif

COIL-平面环形文字

文字和背景颜色绕转形成的平面圆盘,可以修改环形颜色的有无、环形的形状、弧形的圆滑度等等,满屏文字高级效果分分钟完成!

d9b0adf9ddf9151ec2e3d2644b5ec5dc.gif

FLAG-飘动旗帜

形态不同的旗帜效果!修改旗帜形态、飘动方式、颜色搭配等等,炫酷、新潮、时尚,各种风格简单形成!

33240628aa6bbd5807b0ecd143b5ef25.gif

MORISAMA-文字浪潮

满屏超酷文字效果!调整文字密集程度、图形分区、整体宽度等等,图形的加入可以让效果妙趣横生,快来挑战你的脑洞!

98fc4fde2e01150da19695f012d48cca.gif

CASCADE-文字马赛克

将色块与文字结合形成一个个的小方块,形成类似马赛克的趣味效果,通过调整图形大小、密集程度、生成不同的视觉效果,更多好玩有趣的效果等你来发掘!

293fac31d9f10789df725377aabab966.gif

RIBBON-文字飘带

顺滑条形文字飘带效果,我们常用的效果在这里轻松完成!图形大小、折叠数量、搭配颜色等等!多个旗帜的饱满感,单个旗帜的极简风都能轻松创作!

58fab44d152d05bdf3f3d6cb2a97cc3b.gif

LAYERS-层叠空间

通过文字大小的变化做出层叠的空间延伸感,可以任意改变层叠数量、远近距离差、文字字体等,炫酷前卫的字效说来就来!

2caa51c652e6da8c625a2853758649f9.gif

DANGER-文字消散

时髦流行的文字消散动态效果!文字字体、字重颜色、消散程度等等完全自定义!没有繁琐的步骤~超吸睛文字效果简单生成!

e7749159e60385bf2eeea43f225e5887.gif

STRING-路径混合轴

超心动!AI里复杂的混合轴效果在这里轻松展现,还能将文字插入缓和的轴中完美展现,路径随心调整,粗细便捷修改!

ceabd0206a7f8330a412403327745a21.gif

操作方法

看到这里,是不是迫不及待想要学习使用呢,跟着小编一起来看看具体的操作吧!

样式选择

点击网页右上角【Select】进行样式选择,选择自己喜欢的模式就可以开始你的创作啦!

15096a01f4d374abcbb022a5888ed3f5.gif

参数调整

在页面的参数调整区域滑动滑块即可调整,参数的名称都是英文,英语不够优秀的你也不用担心~根据页面的效果调整简单又直观!而且细心观察就可以发现,参数区域根据调整内容记性了简单的分区,更方便我们使用和记忆啦!

下面,我们以项目【STRIPES】为例,一起来看看每个参数的作用吧!

TYPE区域:

X-Scale:控制整个横幅与填充文字的横向长度

Y-Scale:控制整个横幅与填充文字的纵向宽度

weight:控制填充文字的字重

Tracking:控制横幅的横向长度,文字间距也会相应变化

41f56d109f7673915e98a87f9b544e17.gif

RIBBON区域:

count:控制横幅的条数

X space:控制横幅的横向距离

Y space:控制横幅的纵向距离

Size:控制横幅的纵向宽度,但不修改填充文字的大小

Offset:控制每个条幅的最大弧度位置

9fbc7e922a089719161a32054bb391fb.gif

WAVE区域:

Size:控制横幅波动幅度的大小

Speed:控制横幅波动的速度

wavelength:控制最大弧度之间的距离,也就是每条横幅上弧形的数量

Slope:控制弧形最高处的平滑度。

75c58ca77e008ee5729621a61bace9b5.gif

PRIDE!

点击即可为图形添加彩虹色彩效果!

c0b0abbd550015d7f364a4d7abc3c6fc.gif

横幅颜色选择

取消色块前的对勾选择,图形中相应颜色的横幅就会消失喔~

3158df72e4008ce865516e6a6b8d1f5c.gif

背景颜色更改

点击色块出现调色板,就可以任意设置你想要的颜色啦,背景颜色也可以实时预览哦~

8644aedbd27e1d571e11e04906e17a5a.gif

效果预设

下方的方块处是网页提供的效果预设,点击就可以跳转保存使用啦!如果效果不满意的话,也可以在参数区继续调整哦~切换预设效果之前记得保存你的创作效果哦~

4cdc810ec76cbe6c4fe29c1ed436b9d6.gif

图片保存

方式一:在参数区域会有按钮【Save Loop】或【Save PNG】,点击就可以保存效果动图或者PNG图片啦!

9153b0eb63e68655a7f1ff5e4836789b.gif

方式二:没有保存按钮的效果里,可以通过点击右键-图片另存为,保存效果静态图片。

01233785ef21f4ffadcc7a0f3729b90a.gif

方式三:录屏软件进行录屏,保存视频开始你想要的编辑!

注意事项

在网页的使用中会遇到一些小问题,小编列出几项,希望能让你的使用过程更加顺利便捷!

提示一:在不同的样式中,右上角的【Select】展示出的样式数目不一样哦~回到CYLINDER才能找到找到最全的11种效果!

47fa5bf2052c2e6f4b092e0158a05764.png

提示二:电脑尺寸不同,展示出的页面效果会有所区别,尺寸较小的显示屏,左下角的参数调整区域会交叉在一起,可以试着调整网页缩放,或者找个更大的显示屏来获取更好的使用体验,但是并不影响具体操作使用和最终效果展示喔~

0d51213796f61040cc1c3a17595b61de.png

网页功能如此高级,小小的问题可以忽略不计啦~网页也一直在更新改进完善,让我们怀着感恩的心一起期待更多功能的上线和更好的操作体验吧!

如果你在使用过程中有任何问题,或有其他宝贵的意见和建议,欢迎在下方评论区留言,和更多优秀设计师一起交流学习!

本文编辑:小脸明欣

神器链接:Space Type Generator

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_798097.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器排名_怎样提升seo快速优化排名?提升seo快速优化排名的4种方式

怎样提升seo快速优化排名?有确切的消息显示谷歌正在更新移动搜索排名的算法更新,简单来说就是移动优先索引,她的意思是谷歌会根据移动端的排名情况影响pc端的关键词排名情况。目前,该算法正在内测中,估计很快就能跟大家…

java 重写url_网站URL重写(Java UrlRewrite 的使用)

现在大部分的网站和商城都会使用到URL重写,接触到这个,也是因为正在做的电子商务商城。URL重写,是将原有的URL采用另一种规则来显示,使得用户方便访问同时也屏蔽一些信息。在此说下它的好处,在开发过程中,经…

python主页网站_django搭建简单网站-自己的主页

放假实在是无聊,于是想学一下网站搭建的原理。之前听别人说python里的django是比较好的库,所以就一边学一边摸索。基本资料都是从菜鸟教程和djando中文上学来的,主要分析一下我的感悟。第一步 安装django我是从腾讯云租了一个服务器&#xff…

php电商网站源码_php源码网站搭建方法和过程

web网站是我们上网的窗口,而网站是如何搭建的呢?今天我们来做一个介绍,以php代码为例来进行介绍(后续会介绍一下java代码搭建,如果想要我这里涉及的工具或源码请私信我)。1、首先你需要去网上下载你想搭建的源码。2、安装phpstudy…

安可与普通测评的区别_订房网站比较,Agoda、Booking、Hotels、Expedia和携程的区别,哪个更好更便宜...

经常在网上看到不少网友在订房过程中会提出这样的问题:Agoda和Booking有什么区别?Agoda和携程哪个好?Hotels订房靠谱吗?订酒店哪个网站最便宜,Agoda、Booking还是Expedia?等等。。。今天我们就来介绍一下&a…

iis网站访问默认到html文件,mvc vs iis默认页面

有时候,再iis里面设置了web的默认页面index.html希望跳转到这个页面index.html默认页面而 mvc则跳转到路由里面的设置页面怎么忽略这个呢.设置路由可能是个好办法,能实现不过 routes.IgnoreRoute("");很简单public static void RegisterRoutes(RouteCollection rout…

如何在自己服务器关闭网站,如何在Apache网站服务器上关闭服务器签名

透露网站服务器带有服务器/PHP版本信息的签名会带来安全隐患,因为你基本上将你系统上的已知漏洞告诉给了攻击者。因此,作为服务器加固的一个部分,强烈推荐你禁用所有网站服务器签名。禁用Apache网站服务器签名禁用Apache网站服务器签名可以通…

python解析json传入变量_Python爬虫爬取会计师协会网站的指定文章(实例57)

由于业务原因,需要经常关注“注册会计师协会”网站“最新公告”栏目里的“委员会专家提示”相关文章。不想每次进网站一个一个地点击,然后复制到word文件。如果能一次批量爬取,并存到word文件就好啦。此处用到两个库,“requests”…

哪些盗版小说网站服务器在国外,海外服务器小说网站应该有什么样的配置会更好?...

服务器在具体使用过程中因为配置不同,所以在打开的速度和访问的效果上也不通,海外服务器小说网站在实际设置过程中并不需要很高的配置,因为只是网页打开之后,大家通过阅读小说来访问,跟我们平时所见的一些网站图片或者…

好友克隆自助下单网站_实例:手把手教你搭建一款自助点餐小程序

我们这一节课的内容主要是教大家搭建一款自助点餐的小程序。移动支付是未来的趋势,而手机点餐用起来非常方便,备受消费者的青睐。那么餐饮行业的老板做一个自助点餐的小程序,客人入座后即可拿手机扫一扫点餐、下单、自助结账,非常…

mysql在建站起什么作用_数据库操作对比:Sql Server与MYSQL相比有哪些建站优势?...

原标题:数据库操作对比:Sql Server与MYSQL相比有哪些建站优势?最近一直在做博客网站,从定位主题到程序和数据库的选择,确实废了不少心思,经过细致的思考,最终将主题定位为读书方面,还…

java抓取工具_抓取工具Web-Harvest - dayang2001911 - JavaEye技术网站

Overview总览This section describes the motive, the notions and concepts used in Web-Harvest.本章描述了在Web-Harvest涉及的动机、观念和概念。Rationale理念World Wide Web, though by far thelargest knowledge base, is rarely regarded as database in traditionalse…

linux网站发布命令,Linux常用命令发布啦!

导读linux命令是对Linux系统进行管理的命令。对于Linux系统来说,无论是中央处理器、内存、磁盘驱动器、键盘、鼠标,还是用户等都是文件,Linux系统管理的命令是它正常运行的核心。1、查看文件与目录命令:ls [参数] 目录名称-a :列出…

电商 lamp java_搭建LAMP环境部署Ecshop电商网站

实战-部署Ecshop电商网站实验环境Centos7ip:192.168.121.17一、关闭防火墙和selinux[rootlocalhost ~]# systemctl stop firewalld[rootlocalhost ~]# sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/config[rootlocalhost ~]# setenforce 0[rootlocalho…

手机导航列表页面瀑布流图片无限加载代码_干货:大厂实战项目功能必会篇——电商网站瀑布流功能...

瀑布流,又称瀑布流式布局是比较流行的一种网站页面布局视觉表现为参差不齐的多个栏目随着页面滚动条向下滚动这种布局还会不断加载数据块并附加至当前尾部类似的应用瀑布流的网站有花瓣网、蘑菇街等图片源于网络,仅作配文展示在瀑布流模式下不同形状、不…

服务器性能监测,监控服务器:服务器性能监控对SEO的意义!

监控服务器的日常指标,理论上是SEO人员,每天的工作内容,但这确是大部分人经常忽略的问题,特别是一些中小企业站点,大家觉得这是在浪费时间,并没有太大的意义。而实际上对服务器性能监控,往往有利…

php教程phpstudy轮播图,phpStudy V8.0建立网站的方法及图文教程

前面 IT三国 跟大家分享了『PhpStudy V8.0新版本介绍及下载安装的图文教程』,今天我们就以建立 ZBlogPHP 站点为例说明一下 PhpStudy V8.0 是如何建立网站的?1、前往ZBlog 官网下载 Z-BlogPHP 1.5.2 Zero 正式版。2、在 WWW 根目录建立一个文件夹如 zblo…

matlab画调和曲线图,WeiTaiyun: 调和曲线图和轮廓图的比较 | 统计之都 (中国统计学门户网站,免费统计学服务平台)...

多元数据的可视化方法很多,譬如散点图、星图、雷达图、脸谱图、协同图等,大致可分为以下几类:1.基于点(如二维、三维散点图);2.基于线(如轮廓图、调和曲线图);3.基于平面图形(如星图、雷达图、蛛网图);4.基…

php网站设计国内外研究状况,毕业论文中的国内外研究现状怎么写啊

毕业论文中的国内外研究现状怎么写啊毕业论文指之 “国内外研究现状”的撰写一、 写国内外研究现状的意义通过写国内外研究现状考察学生对自己课题目前研究范围和深度的理解与把握间接考察学生是否阅读了一定的参考文献。这不仅是毕业论文 撰写不可缺少的组成部分而而且是为了让…

祭祀扫墓网站php源码,斗破苍穹:不可错过的玄幻

日定在也将2月年1截止申请时间,斗破的玄此外,部分整购地区/调策时贴政年内发布房补。贝达目主利用来对相似的项毒要是格尔冠病策略解释我们付新说:苍穹错过,。另一方面,斗破的玄。自2代末0年纪9开始0世,苍穹…