秀米怎么添加人物介绍(你真的会用秀米吗)

图文排版

H5

手机版秀米

正文字数:2935字

阅读时间:9分钟

在了解什么是布局之后,希望你心里已经闪烁起了一盏“探照灯”,现在就可以打开编辑界面跟随步骤尝试了,本章内容胜在实战。

如何制作各种并列结构,如何制作个性的小零件小标题,各式各样好看的排版样式是怎样依靠布局完成的,这个章节都会具体讲解。

步骤①:点击“布局”标签下的“基础布局”

秀米怎么添加人物介绍(你真的会用秀米吗)(1)

按默认排序,这里已经躺好了很多蓝色线框,此时鼠标悬停上去,可以看到提示“单列布局”、“二列布局”、“三列布局”……“多列布局”。显然,布局将单行分割为多列,每列放入不同内容,左右并列的图文效果就迎刃而解了。

步骤②:点击第三个“二列布局”

秀米怎么添加人物介绍(你真的会用秀米吗)(2)

在点击此布局后,文章增加了两个并列的灰色粗框,页面也跟随改变宽度,这是因为“布局模式”被打开了,正是文章右侧的第一个格子状开关。在这个模式下,文章的结构能够直接显示,更方便我们编排版式。

步骤③:在第二列内,根据提示双击输入标题文字;从图库拖入一张贴纸放入左侧;点击右侧按钮关闭布局模式

秀米怎么添加人物介绍(你真的会用秀米吗)(3)

在“布局模式”下,可以往结构内添加内容;关闭布局模式可查看最终效果或者微调。

步骤④:

秀米怎么添加人物介绍(你真的会用秀米吗)(4)

此时一个有图片装饰效果的标题就完成了。

现在,可以看左边模板区,哪些版式是这种类似的左右结构呢?不得不说,绝大多数模板都是此类结构,包括两侧有图片点缀的小标题,一侧图片一侧文字的正文版块,还有并列两图三图四图的效果,都是这些布局让他们左右分割得如此鲜明。不要浅尝辄止,这是构建宏伟设计蓝图的开端哦。

1.1

调整布局结构与基本样式

在布局模式下,灰色粗线框代表了布局内容,反映了版式的结构。

步骤①:点击“布局”标签下的“基础布局”,点击第一个“单列布局”,点击灰色线框

秀米怎么添加人物介绍(你真的会用秀米吗)(5)

此时灰色线框外围出现红色虚线框,他们对应弹出的“布局”调整栏;整个行块外围出现了黑色实线框,对应弹出的“组件”调整栏。

此前对文字和图片调整过程中,我们接触了他们相应的调整栏和参数,布局同样也有自己的调整项目。包含了增删结构、调整宽度、外观、对齐与分布等。当然,整行布局等同于有结构的组件,在制作模板时也常用“组件定位”。下面就针对着几个功能作详细的讲解。

1.1.1

增删结构

步骤①: 在布局工具条,点击第一个按钮,选择向右插入

秀米怎么添加人物介绍(你真的会用秀米吗)(6)

这个按钮可以对当前选中的列进行删除与左右增加,若勾选“插入时复制”,设定列数,则会将相同内容填入新增的列中。

步骤②:将图片拖动到布局的侧边,以增加结构

秀米怎么添加人物介绍(你真的会用秀米吗)(7)

想要将内容直接添加到该列的侧边,也可以直接拖动,吸附位置会以蓝色提示,这是个更加高效直观的添加方式。

1.1.2

调整宽度

在增删结构的时候,细心的你会注意到调板中“宽”这个数值的变化吗?在改变结构的时候,布局会自动调整每列的宽度。我们也可以主动更改或修正。

步骤①:输入更小的宽度与更大的宽度数值

秀米怎么添加人物介绍(你真的会用秀米吗)(8)

在输入宽度的时候,也可以使用键盘上下键快速调整,你会明显看到更宽与更窄的区别,布局内的内容如文字、图片都会受到列宽的影响,并且每列相加的数值超过100%会发生断裂,这点需要我们在后续对“相对单位”这个概念进行更深的探讨。

如果布局内有图片,回顾我们在一开始调整布局内图片宽度的步骤,调整布局宽度与内容宽度都可以进行板块内容的收放;但是需要将内容宽度与布局宽度区分开来,此时直接调整内容,没有影响内容外层布局的结构与宽度。

1.1.3

调整外观

布局看起来都是方方正正,貌似只能当成结构,塞点文字图片才能把场面撑得起来?

No!他可圆可方,可柔可刚,进可作结构,退可爆颜值,就看你如何为他装点背景、边线、弧度或者阴影。

步骤①:创建一个三列布局,选择第一列,点击色盘可调整填充色彩;展开右侧三角可选择填充背景图,按照提示可选择各种填充方式

秀米怎么添加人物介绍(你真的会用秀米吗)(9)

布局可填充背景为纯色、渐变、图片;其中图片可选择填充方式,方式为不重复且拉伸时,背景会跟随内容面积产生变形;渐变填充时默认使用此填充方式。填充的不透明度完全取决于颜色或图片本身的不透明度。

步骤②:选择第二列,点击“边框”选项,样式更改为“实线”,尺寸设置为2,更改一个半透明颜色

秀米怎么添加人物介绍(你真的会用秀米吗)(10)

每个布局都可以分别设置上下左右边线的样式、尺寸、颜色,线框的不透明度取决于颜色本身。

因此,横向的分割线是否可以不再依赖于组件标签下的默认分割线了呢?除此之外,当左右两块文字并列时,是否也可以通过设置单侧边线来实现呢?

步骤③:选择第二列,加入图片与文字等内容后,点击“边框”选项,设置弧度为10px,观察效果;设置为100px,观察效果;更改单位为“%”后设置30%,观察效果;设置为50%,观察效果

秀米怎么添加人物介绍(你真的会用秀米吗)(11)

弧度以像素为单位时的效果

秀米怎么添加人物介绍(你真的会用秀米吗)(12)

弧度以百分比为单位时的效果

当单位不同时,“弧度”的效果也不尽相同。固定半径为10px时产生了俊俏的微弱圆角,更大时产生了胶囊形状的可爱画风;当半径为百分比单位时,10%时产生了一种圆角被拉伸的效果,大于等于50%时形成椭圆。

除此之外,布局内的内容似乎被圆角遮挡而不能显示完整,这部分被遮挡内容称作“溢出”,当某个角的弧度被置0时,溢出部分就会完整显示。

步骤④:点击第一列,点击“阴影”选项,调整为“水平10像素、垂直10像素、模糊4像素、外部阴影、灰色”

秀米怎么添加人物介绍(你真的会用秀米吗)(13)

在调整的时候注意观察效果,不同的参数可以形成不同的效果。

当选择暗色时,可以是阴影,当选择亮色时,他就是发光效果;只需要调整好方向就可以营造出不同氛围。

内部阴影甚至可以搭配纯色背景产生渐变效果、白色内部阴影搭配图片背景产生边缘虚化效果等。单一样式可能很普通,但是各种样式的组合会产生各种意想不到的效果。

步骤⑤:点击第一列,点击“格式刷”图标,选择向右应用格式,观察效果;选择向右全部应用,观察效果

秀米怎么添加人物介绍(你真的会用秀米吗)(14)

向右应用格式时,会将所有的效果直接应用,也包括宽度等,只要是该工具条可调整的数值,都会全部相同。

1.1.4

对齐与分布

步骤①:

三列的布局中放入不同高度的内容,每列布局均设置边线;点击其中一列,点击垂直对齐按钮调整垂直对齐方式

秀米怎么添加人物介绍(你真的会用秀米吗)(15)

同一行的布局垂直对齐时以整体的上边界、中位线、下边界进行对齐,这里的“整体”是指被选中的整个布局组件,也就是黑色线框部分。

步骤②:选中第一列,点击“间距”,调整其上下左右距离,分别观察各个数值带来的直观的变化

秀米怎么添加人物介绍(你真的会用秀米吗)(16)

这里的“间距”具体指布局里的内容到布局上下左右红色虚线边框的距离,在每个数值输入左方显示的项目为“边距”。

步骤③:选中第二列,将其宽度调小,点击“列定位”按钮,调整其上下左右距离(正负值均可),分别观察各个数值带来的直观的结构变化

秀米怎么添加人物介绍(你真的会用秀米吗)(17)

在布局为多列时;会出现“列定位”选项。此时可以看到,“列定位”的数值变化使得布局结构发生了变化,布局间产生了距离感,数值为正时远离,为负时拉近直至重叠;因其呈现了位置变换的效果,故名“列定位”;也可理解为“列间距”,即相邻列之间的距离。

对比一下上述两者产生的分布效果,“间距”选项挤压了内容,使之远离了边线,但并未改变各列的结构;“列定位”选项直接改变结构,使列与列产生了距离。因此,在实际使用这两个分布效果的时候,要酌情选择。

1.1.5

定位变换

理解了“列定位”后,我们掌握了各列之间可通过更改距离来控制位置;但如果并没有出现多列结构,如何调整位置呢?

比如,单列的时候,再或者,只是单纯想调整文字或者图片的位置时,并不会出现“列定位”选项该怎么办。

在基础部分,讲解到通用调整栏时,我们就知道,图片、段落、布局等都是以“块状”的结构出现的,通用调整栏对应了黑色实线框的内容,这部分统称为“组件”;因此,在“组件”调整栏中,“组件定位”选项给出了解决方案。

步骤①:添加图片与文字,缩小图片宽度,点击“组件定位”,调整其“组前距”(正负值均可)、“组后距”(正负值均可),观察变化;调整左中右对齐,观察变化;调整“偏移”,观察变化

秀米怎么添加人物介绍(你真的会用秀米吗)(18)

调整数值时可使用键盘上下键快速调整,被选中的整块内容都会随之发生位移。

不难理解,“组前距”、“组后距”分别指上下组件之间的距离;此时联想“列定位”,他们实则是相通的,都是通过改变相互之间的距离产生的位置变换。列之间距离变化导致左右位置变化,那么行之间距离变化,自然就会导致上下位置变化。

单个组件并没有谁和他产生并列关系,左右位置就只能靠“偏移”这个参数进行调整,属于自身位置变换效果。这就是相互距离导致结构位置调整与“偏移”的区别。

步骤②:创建一个三列布局,缩小各列宽度,调整左中右对齐

秀米怎么添加人物介绍(你真的会用秀米吗)(19)

回顾前文中“垂直对齐”,是以黑色线框为参考,以整块组件占领的空间边界为限上下横跳,对应到这里的水平对齐,则是以该空间的左边界、中轴线、右边界为参考进行对齐。

1.2

本章小结

本期高级教程,主要从如何识别布局开始,到添加布局,增删布局结构、调整宽度、调整外观、对齐与分布、定位变换等5个小分类讲解。

看完本期教程,应会对布局的结构、布局工具条上的属性设置有了简单了解,当然最好的就是跟着做一遍,把工具条上的按钮都戳戳,时间长了就懂了。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页