随便摆摆的排版方式,真香啊!

秀米XIUMI 2021-02-24 12:25

图文排版

H5

手机图文



前段时间(去年)秀米上线了一款自由布局

一款不用考虑布局如何嵌套偏移

元素能随意自由摆放

设计的版式还能适配不同手机的布局


相信很多小伙伴都已经用过了吧

秀米也用自由布局做了不少模板

但一直没详细说它的使用方法


所以今天呢
我就来和大家好好炫耀(介绍)一下

超级酷的自由布局

是如何“自由”排版的吧



01

自由布局是什么?在哪里?


自由布局,是指在图文里面,可以使用类似PPT的编辑方式来设计内容,元素可以自由随性的摆放,当初需要布局嵌套偏移等设置才能做到的精准搭配,自由布局可以一手办到,最终效果也能够适配不同手机屏幕。


自由布局,可以在布局→基础布局分类中看到,也可以从自由布局分类中添加。

布局→基础布局→自由布局


自由布局的编辑按钮



02

自由布局如何编辑?


往编辑区添加一个自由布局,点击工具条上的“编辑”,进入编辑界面,它是一个H5的简化编辑页面。


在这个编辑界面中,可以调整自由布局的宽高,选中蓝色点状线,调整它的宽高度即可。


通过调整自由布局的宽高比,就可以得到海报、名片、图文封面等等的不同尺寸;然后就可以在这个比例中设计想要的内容。


宽高比固定后,最终效果是适配不同手机屏幕的,元素之间的相对位置是稳定的。


编辑自由布局的素材从哪里来

在自由布局编辑界面,左边“页面组件”中大部分素材,都可以用于自由布局的编辑,少部分的异形图片会无法添加,右上角也会有提示。


当然,还可以在图文编辑界面,事先准备好模板,放到剪贴板中,再打开自由布局界面,从剪贴板中拿出素材放到自由布局里。


有了素材,在自由布局中怎么用

选择素材添加到编辑区,选中素材,再摁住素材四周的圆点,拉大缩小调整元素组件的大小;如果添加的是图片,也可以这样添加,调整图片的大小、样式。


如果需要添加文字,可以从编辑区右边的“T”按钮,添加一个文字模板,然后再选中修改成自己的文字。


在编辑自由布局时,如果遇到素材重叠顺序时,可以借助工具条来调整,也可以用编辑区右边的“编辑辅助”操作。


编辑完成后,点击顶部对勾,返回到图文编辑页面,刚刚编辑的内容就都在了。


在图文编辑页面中,可以直接修改自由布局里的文字与图片内容,也可以直接删除,但不能更改它们的位置。



03

自由布局的实际应用


自由布局可以自由调整出固定的宽高比,元素可随意摆放的特性,设计出来的版式有多种用途。


自由布局制作的“版头类”设计

 

小年到

纳福瑞

SPRING FESTIVAL

自由布局丨固定宽高比16:9

这种如果用普通布局来做的话,光图片背景、渐变背景、烟花动态背景就要添加两三层布局,有了自由布局,直接往上面叠素材,再加上文字就够了!


 

START

OF

SPRING

SPRING COMING

 

立春

时节

律回岁晚冰霜少

春到人间草木知

XIUMIUS

自由布局丨固定宽高比9:16

自由布局中的元素,可自由调整上下顺序。所以,在这个节气海报中,上半部分的印章与后面的英文重叠效果,就不用通过段前距/段后距设置负数值来做了。


自由布局用到SVG布局中

 
 
 
 

- 打一字 -

点击查看谜底

自由布局丨固定宽高比2:3

最近SVG布局的展开、收缩新增了一个全宽设置,带全宽的内容只能是图片、自由布局等;所以当全宽中带有文本时,就可以将内容塞进自由布局,然后再去设置SVG布局的全宽操作。


使用自由布局制作出版式后,还可以用秀米的生成长图,导出成图片,作为微信图文封面、海报、banner等等,用到更多平台。



04

小结


自由布局,是指在图文里面,可以使用类似PPT的编辑方式,来设计内容;适合用来制作宽高比固定,位置固定的内容,最终效果可以适配不同手机屏幕。


自由布局的编辑界面,是一个简化后的H5编辑页面,左边大部分素材都可以使用,编辑完成后点击顶部对勾,返回图文编辑页面,制作的内容会在自由布局里显示。


在图文编辑区域,自由布局里的内容可以修改、删除,但无法调整位置。



更多阅读

小白适用

系统介绍秀米的基础操作

长按识别二维码继续阅读

☚☚☚  向左滑动


秀米有那么多骚技能

不来学几招?

长按扫码关注我们

自由布局的自由、随性

这种排版方式,你爱了吗