线条轨迹接展开,这种排版不用代码就能来!
点击图片,出现一条细线向下延伸,同时图文展开显现更多内容。
昨天的5月会员日图文《这条线好长长长长长长长长长长......》这种排版效果,是怎么做的?
这种效果可以很好地吸引读者注意力,引导读者视线随线条轨迹阅读图文。
之前单独定制这样一篇图文需要昂贵的价格,而现在大家用 iPaiban Pro 黑科技编辑器就能实现啦。
制作同款效果需要用到的是「点击-线条轨迹+展开」组合(编号:11893)。在编辑器中搜索关键词「轨迹」可以看到其他类似的效果组件。
和其他效果相比,这种线条轨迹类的排版,我们在制作时多了重要的一步:用Ai软件绘制线条轨迹并提取线条代码。
有Ai软件基础的同学看下教程自己就能操作,不懂Ai的同学,这一步可以直接交给设计师同事。
以图文《这条线好长长长长长长长长长长......》为例,我们一起如何制作的吧。
一、使用 Ai 绘制线条轨迹并导出代码
工具:Adobe Illustrator(简称Ai)
第1步:导入图片并锁定
打开 Ai,点击左上角菜单栏「文件」-「打开」,导入一张完整的图片。(这张图片是指线条轨迹覆盖的整个画面,导入后以它为背景绘制线条。)
接着点击菜单栏「窗口」-「图层」,打开图层窗口。因为稍后我们要给图片绘制线条,为了防止描绘过程中图片偏移,如下所示,我们先将该图片在图层中锁定。
第2步:用钢笔给绘制线条
在左侧工具栏选择「钢笔」工具,设置描边颜色、粗细,不填充。在图片上选择一个起始点,开始给画面绘制线条。
注意,在 Ai 里给线条设置的颜色、粗细、起点和终点,决定着最终排版中轨迹的颜色、粗细、起点和终点。
另外因为排版时图片拼接原因,最终图文中轨迹终点停留的位置可能略低于在Ai中绘制的位置。如果最后预览图文时觉得影响效果,可以在Ai中把轨迹终点向上绘制一些再导出轨迹长度和代码。
第3步:查看线条轨迹长度
线条轨迹绘制完毕后,点击选中线条。
接着点击菜单栏「窗口」-「文档信息」,在「文档信息」面板点击右上角的三条杠,选择「对象」。这时就会看到路径的长度,也就是线条轨迹的长度。
把这个长度记录下来备用,或者直接填写在编辑器「轨迹长度」的输入框中。
第4步:导出线条轨迹的SVG代码
点击菜单栏「文件」-「存储为」,在弹出的窗口中选择格式为「SVG(svg)」,接着点击「存储」。
在出现的窗口中点击「更多选项」,然后把图像位置设置为「链接」,CSS属性设置为「演示文稿属性」后,点击「SVG代码」。
此时会看到代码中有一个几乎全是数字的
完整复制这段
二、使用 iPaiban Pro 编辑器排版
工具:iPaiban Pro黑科技编辑器
组合:点击-线条轨迹+展开
编号:11893(组合)
第1步:选择组合
登录 iPaiban Pro 黑科技编辑器后,点击编辑器左侧「组合」按钮,在「花样展开」分类中找到「点击-线条轨迹+展开」组合,或者直接搜索组合编号11893,点击选择。
第2步:进入组合编辑模式
如下所示,点击「编辑组合」,进入组合编辑模式。
在组合编辑模式中,我们需要分别设置展开前和展开后的内容。
第3步:设置「展开前」内容
①上传图片:点击「展开前」区域,接着点击右侧「换图」按钮,上传轨迹开始前显示的图片。
②设置参数:输入在Ai中获取的轨迹代码、轨迹长度,调整轨迹延伸动画的时间。
③调整触发区:双击上传的图片,在弹出的窗口中设置点击触发的区域。
第4步:设置「展开后」内容
「展开后」的内容支持嵌套各种组件,需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中,然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片,每需要一个样式就按照这3步操作:
第5步:设置展开参数
点击右侧红色小三角符号,可设置展开动画的时长。展开时长最好小于轨迹动画时长。
展开高度一般无需调整,但当在手机上预览时,如果发现展开后有多余的空白或者没有展现出全部内容,这时候可以通过「加减展开高度」使其恰好展开。
第6步:导入公众号后台
内容编辑完毕后,点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
继续点击最右侧「预览草稿」扫码预览效果,效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。
版权声明:
作者:dingding
链接:https://www.techfm.club/p/144653.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论