在了解什么是布局之后,希望你心里已经闪烁起了一盏“探照灯”,现在就可以打开编辑界面跟随步骤尝试了,本章内容胜在实战。
如何制作各种并列结构,如何制作个性的小零件小标题,各式各样好看的排版样式是怎样依靠布局完成的,这个章节都会具体讲解。
步骤①: 点击“布局”标签下的“基础布局”

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

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

步骤④:

现在,可以看左边模板区,哪些版式是这种类似的左右结构呢?不得不说,绝大多数模板都是此类结构,包括两侧有图片点缀的小标题,一侧图片一侧文字的正文版块,还有并列两图三图四图的效果,都是这些布局让他们左右分割得如此鲜明。不要浅尝辄止,这是构建宏伟设计蓝图的开端哦。
1.1
调整布局结构与基本样式
在布局模式下,灰色粗线框代表了布局内容,反映了版式的结构。
步骤①: 点击“布局”标签下的“基础布局”,点击第一个“单列布局”,点击灰色线框

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

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

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

如果布局内有图片,回顾我们在一开始调整布局内图片宽度的步骤,调整布局宽度与内容宽度都可以进行板块内容的收放;但是需要将内容宽度与布局宽度区分开来,此时直接调整内容,没有影响内容外层布局的结构与宽度。
1.1.3
调整外观
布局看起来都是方方正正,貌似只能当成结构,塞点文字图片才能把场面撑得起来?
No!他可圆可方,可柔可刚,进可作结构,退可爆颜值,就看你如何为他装点背景、边线、弧度或者阴影。
步骤①: 创建一个三列布局,选择第一列,点击色盘可调整填充色彩;展开右侧三角可选择填充背景图,按照提示可选择各种填充方式

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

因此,横向的分割线是否可以不再依赖于组件标签下的默认分割线了呢?除此之外,当左右两块文字并列时,是否也可以通过设置单侧边线来实现呢?
步骤③: 选择第二列,加入图片与文字等内容后,点击“边框”选项,设置弧度为10px,观察效果;设置为100px,观察效果;更改单位为“%”后设置30%,观察效果;设置为50%,观察效果


当单位不同时,“弧度”的效果也不尽相同。固定半径为10px时产生了俊俏的微弱圆角,更大时产生了胶囊形状的可爱画风;当半径为百分比单位时,10%时产生了一种圆角被拉伸的效果,大于等于50%时形成椭圆。
除此之外,布局内的内容似乎被圆角遮挡而不能显示完整,这部分被遮挡内容称作“溢出”,当某个角的弧度被置0时,溢出部分就会完整显示。
步骤④: 点击第一列,点击“阴影”选项,调整为“水平10像素、垂直10像素、模糊4像素、外部阴影、灰色”

当选择暗色时,可以是阴影,当选择亮色时,他就是发光效果;只需要调整好方向就可以营造出不同氛围。
内部阴影甚至可以搭配纯色背景产生渐变效果、白色内部阴影搭配图片背景产生边缘虚化效果等。单一样式可能很普通,但是各种样式的组合会产生各种意想不到的效果。
步骤⑤: 点击第一列,点击“格式刷”图标,选择向右应用格式,观察效果;选择向右全部应用,观察效果

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

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

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

对比一下上述两者产生的分布效果,“间距”选项挤压了内容,使之远离了边线,但并未改变各列的结构;“列定位”选项直接改变结构,使列与列产生了距离。因此,在实际使用这两个分布效果的时候,要酌情选择。
1.1.5
定位变换
理解了“列定位”后,我们掌握了各列之间可通过更改距离来控制位置;但如果并没有出现多列结构,如何调整位置呢?
比如,单列的时候,再或者,只是单纯想调整文字或者图片的位置时,并不会出现“列定位”选项该怎么办。
在基础部分,讲解到通用调整栏时,我们就知道,图片、段落、布局等都是以“块状”的结构出现的,通用调整栏对应了黑色实线框的内容,这部分统称为“组件”;因此,在“组件”调整栏中,“组件定位”选项给出了解决方案。
步骤①: 添加图片与文字,缩小图片宽度,点击“组件定位”,调整其“组前距”(正负值均可)、“组后距”(正负值均可),观察变化;调整左中右对齐,观察变化;调整“偏移”,观察变化

不难理解,“组前距”、“组后距”分别指上下组件之间的距离;此时联想“列定位”,他们实则是相通的,都是通过改变相互之间的距离产生的位置变换。列之间距离变化导致左右位置变化,那么行之间距离变化,自然就会导致上下位置变化。
单个组件并没有谁和他产生并列关系,左右位置就只能靠“偏移”这个参数进行调整,属于自身位置变换效果。这就是相互距离导致结构位置调整与“偏移”的区别。
步骤②: 创建一个三列布局,缩小各列宽度,调整左中右对齐

1.2
本章小结
本期高级教程,主要从如何识别布局开始,到添加布局,增删布局结构、调整宽度、调整外观、对齐与分布、定位变换等5个小分类讲解。
看完本期教程,应会对布局的结构、布局工具条上的属性设置有了简单了解,当然最好的就是跟着做一遍,把工具条上的按钮都戳戳,时间长了就懂了。