马年春节做图文,「马」这个元素可以怎么玩?
之前早就跟大家整理了和马有关的创意SVG图文,没有灵感赶紧看起来:《马年春节SVG交互图文案例合集》
今天再跟大家介绍一个好玩的,用光栅小马排版,点击试试:
这里是用光栅动画的设计,配合点击滑动后展开的排版实现的一种效果。
想要实现光栅动画,其实就需要两张图片,一张位于上方的光栅图,一张位于下方的静态图案。
如何制作出这两张图片?大家在B站或小红书搜一下有很多教程,但大多都是Ps制作教程,可能需要具有一定的设计基础才能实现。
这里跟大家推荐一个光栅动画图片制作的免费网站,网址:scanimation.org
通过网站制作非常简单,上传几张连贯动作的图片,即可一键生成需要的光栅图和静态图案。
前面案例的两张光栅素材就是在网站中上传了下面几张小马奔跑的图片生成的。
知道了素材怎么做,下面一起看下排版教程吧。
详细教程:
工具:i排版SVG编辑器,网址:SVG.iPaiban.com
组合:点击右移切换图片+展开
编号:11027(组合)
第1步:选择组合
登录i排版SVG编辑器后,点击编辑器右侧「组合」按钮,在「花样展开」分类中找到「点击右移切换图片+展开」组合,或者直接在搜索框中搜索组合编号11027,点击选择。
「切换时长」指点击后图片移动切换的时间。
「展开时长」即图文全部展开花费的时长。
使用同步功能可以不用频繁在编辑器和微信后台切换,同步成功后可以立即扫码预览二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
更多新年春节排版教程:























