您的位置 首页 > 职场江湖

【秀米怎么导入word】流水的事,铁做的秀美

图形排版

H5

手机版秀美

正文字数:3730个字符

阅读时间:12分钟

本章的教程介绍了上一章的“使用版面,管理版面”的下一篇,内容元素的嵌套规则,版面的四种宽度属性之间的差异,特殊版面特别在哪里,可以创建什么样的版面,本章具体介绍了这些内容。

1.1

更多的风格效果

组件调整栏还提供了其他样式调整选项,包括不透明度、旋转、翻转、反射、缩放等。

步骤1:创建两列布局,分别在左列和右列中添加图片。选择第二列,并将列定位调整为向左-30px。单击左侧图片,然后单击“选项”将不透明度调整到90%,退出布局模式并观察更改

步骤:将不透明度重置为100%,调整旋转,退出选择模式,观察更改后重置。

以同样的方式观察“翻转”、“反射”、“定位组件”、“缩放”和“偏移”的效果

仔细发现了吗?这些效果都会使他堂堂正正。但是,他好像有点太热闹地抢走了主人,本来被遮住的部分也露了露水,他的层次好像提高了吗?他们的级联关系本来是什么,又因为什么关系破裂了?下一节将详细说明。

1.2

重叠定律

我们阅读的word、网络上的文章、大篇幅以文字为主的页面都用流式排版表示。按照阅读顺序,从上到下,从左到右,就像手机屏幕告诉你新消息一样,越来越多的信息总是引人注目的。后来上传的信息甚至会一层一层地掩盖旧信息。我们正在读的文章网络也是如此。底部元素总是隐藏顶部元素,右侧元素隐藏左侧元素。

总之,后浪在前浪。这就是他们之间的基本重叠规律。

步骤1:创建2列布局,在第一列中添加适量的字符,在第二列中添加图片,在2列布局块下添加图片。

将下图中的“组前间距”调整为负数,退出选择模式,检查是否存在重叠的罩。将第二列(即列放置)向左调整为负数,并退出选择模式以查看整个重叠罩的外观

以上的步骤清楚地表明,结构距离变化引起的重叠以后将遵循这一规律。

但是有时候需要打破这个规律,比如聊天界面上的新闻。例如,在上述阶段,如果事实上不希望文字被遮住,那么为了把文字放在最上面,就要给他一些特殊的属性。(约翰f肯尼迪)。

2.2中提到的“不透明度、旋转、翻转、反射、缩放、偏移”效果可以提高水平。上面列的定位部分提到,偏移是位置变换效果,而不是位置变换效果,包括旋转、缩放。当然,不透明度、反射等影响本身显示效果的属性也可以提高他们的层次。

如果顶部内容太多,顶部的他们也会遵循稍后上传的原则。

步骤2:单击文字,将“偏移”设置为1,退出选择模式,观察重叠的选取框。单击第二列中的图片,将“不透明度”设置为99%,退出选择模式,查看重叠罩的外观

如果想在位的阶段提高水平,偏移为1,不透明度为99%,较小的值带来了层次变化,但这种效果很难察觉。

综上所述,结构变化造成的重叠基本上在后来设置为上位,增加效果转换可以像金蝉脱壳一样提升到顶层。但是,当他们在同一高层时,如何调整级联顺序?以下部分对此进行了说明。

1.3

布局的不同宽度和特性

通过前面的学习,我们已经调整了布局的宽度,将制作一些一般的多栏结构。还尝试根据整行的宽度调整百分比宽度的布局,而不影响结构和列宽。

但是,创建一些束带样式并不容易,例如边框包围的小标题。如何匹配标题文字的宽度?大卫亚设,Northern Exposure)那么,版面的宽度取决于内容的扩展宽度。

步骤1:创建布局,向内添加少量文字,设置边框样式“样式:实线”、“尺寸:1”。

单击宽度单位后面的小三角形,然后选择“适应宽度”以观察效果

ex=4" width="549" height="368"/>

若继续往该布局内增删文字,宽度依旧会随之增减,形成一种贴身包裹的结构。此时如果想要他款式更加丰富,例如左侧加入小图装饰,可以向左侧拖入一张图片并吸附,再调整图片列的宽度。

步骤②:调整第一列宽度为10%,退出布局模式,点击编辑页面右下角,将页面宽度更改至200%以模拟网页或Ipad等宽屏幕设备,观察效果;

而后将页面宽度重置为100%,设置第一列宽度为“宽度固定像素”40px,退出布局模式后重复刚才的加宽页面操作,观察效果

当图片列的宽度为相对单位——“百分比”时,图片列会随着各种设备屏幕的宽度而变化,也许在微信公众号网页版查看时,就会出现小装饰喧宾夺主、版式出其不意的状况。因此,装饰小组件可以放置在固定的列宽内。

我们知道,多列的宽度总和超过100%后,或者在调整了一定距离列定位后,布局会发生断行。

步骤③:创建一个三列布局并放入内容,将第二列的左右“列定位”更改为正值,观察效果

列定位会造成相互间的距离变化,当距离增加,宽度便超过了组件边界,产生断行。此时我们可以设想一下,如果有一列像弹簧一样能够自动伸缩,他们似乎就可以不再断裂了。

步骤④:任选一列设置为固定宽度200px;任选另一列设置为“宽度自伸缩”;加宽或缩窄页面,观察效果

你会发现,“宽度自伸缩”确实解决了这个断行的问题,他就像弹簧,撑起了整个剩余空间;为什么说是剩余空间呢,因为第一列固定宽度硬要霸占200px,第三列百分比宽度硬要霸占33%,而剩下了多少,或许我们并不知晓,但是作为弹簧的他很清楚自己的份额。

步骤⑤:创建一个二列布局,将第一列宽度更改为“宽度自伸缩”,伸缩比数值为1;第二列也更改为自伸缩,伸缩比为1,观察效果;

将第一列伸缩比更改为2,在其下方添加一个每列等宽的三列布局,观察效果

如果说同一行出现了多个自伸缩列,那么这一组“伸缩比”数值就彰显力量了;既然是弹簧,那么力量大者多吃多占,这很正常。读取该行所有的自伸缩列的数值,以形成宽度的比例。

上述步骤中,当第一列与第二列均为1时,他们的宽度比例为1:1,表现为平分秋色;当第一列为2,第二列为1时,他们的宽度比例为2:1,与下方的三列等宽布局对比,不难看出各自占用的空间分别为2/3与1/3。

不得不说,自伸缩很好地解决了剩余空间分配的问题;除此之外,设置为自伸缩宽度后,工具条也增加了两个选项。在“垂直对齐”按钮下,多出“拉伸对齐”;在“列定位”按钮下,多出“重叠顺序”。

拉伸对齐

重叠顺序

步骤⑥:向第一列内添加图片与文字,设置对齐方式为“整行拉伸”,观察效果

“拉伸对齐”使得列的高度伸展至黑色线框边界。在1.2节末,我们提出了一个问题,若组件都被设置了效果导致置顶,如何再次更改层级?

我们知道,结构默认重叠为后来居上,当每列内元素层级均因特殊效果提高时,我们可以摒弃结构默认的后来居上原则,自主设置结构的层次;这就是“列定位”按钮下“重叠顺序”的作用。

步骤⑦:创建一个三列布局,宽度均设置为自伸缩,每列均插入图片或文字,将第二列“列定位”左右均设置为负数,观察效果;分别将第一二三列的“列定位”“重叠顺序”设置为2、3、1,观察效果

“重叠顺序”值越大,该列层级越高,越居于上方。这不失为任意调整重叠顺序的好方式。

1.4

更多布局类型

学习完上文,其实我们已经可以通过布局构建各种结构与样式、塑造流式版式了。不过还有一些布局,他们可能不善于创造结构,但是通过调整样式或特有属性,可以当作零件版块去使用。

1.4.1

固定布局

在此之前,我们一直在探讨各种宽度,的确,流式排版的一个特点就是高度不固定,页面内容因宽度的变化可能高度就会变化,虽然一般说来,流式页面中元素高度都是放任不管的状态,但是我们对高度也是可以有要求的。

在模板区“布局”标签下,有一个固定布局,可以同时定义宽度和高度。

步骤①:点击“布局”标签下的“基础布局”,点击“固定布局”,向其中加入文字,设置宽度100px,高度100px,填充为背景图,选择填充方式为“被包含”

固定布局不像多列布局那样可以直接增加列或创造结构,因为只保留了他的外观选项,可以调整宽高、边框、阴影、填充与间距,除了填充,这些都与基础布局无异。

填充方式里,对背景图增加了“被包含”选项,背景图能够被完整地不变形地填入布局框,正因为如此,他更适合用来制作装饰性小零件,比如序号。

除此之外,他还有一个特殊点,在于对溢出内容的显示,如果插入过多的文字或者过长的图片,不会显示超出部分。

固定布局的威力其实不容小觑,搭配边框效果,可以制作出各式各样的小部件,三角、圆、线条甚至图形都不在话下。

打开右侧小眼睛“辅助编辑”按钮,可以查看或选中结构组合,会以蓝色线框标注位置。虽然固定布局内不适宜放入过多内容,但是作为装饰等用途时相当实用。

1.4.2

自由布局

在秀米里有没有更方便的,脱离复杂的流式排版的布局方式,像ppt或者ps一样去实现排版设计呢?

在模板区“布局”标签下的“自由布局”,就支持以拖拽的方式进行画面的排布。

步骤①:点击“布局”标签下的“基础布局”,点击“自由布局”,点击布局调整栏中的“编辑”;点击或框选以选中,拖拽移动位置,拖拉定界框手柄可缩放。

往自由布局中添加内容

调整元素的层级关系、预览

回到图文编辑界面

若已有现成ps文件,可以点击下方“导入psd”按钮导入所有图层。

点击蓝色虚线外白色区域或者右方齿轮状按钮可以设置画幅比例。

如果使用过秀米H5,这个界面就再熟悉不过了,进入到这个界面后,虽然页面有变化,但是剪贴板的内容是不变的。

另外,自由布局还可设置动画效果,最终呈现为画幅形式。

1.4.3

表格布局

本节主要讲解表格的快速创建与样式调整,表格的样式设置与之前的基础布局操作相似。

创建时可选择“导入word/excel”按钮快速导入现有表格,也可通过以下步骤在秀米快速创建。

步骤①:选择“基础布局”下的“表格”,放入编辑区,任选一个单元格,点击“快速创建表格”,输入行数列数,键入内容

表格的宽度可调整为百分比,可以点击 按钮合并或分解单元格,间距、对齐与基础布局设置类似。

同样地,表格也可更改其背景填充、边框样式,相比于基础布局少了阴影选项。

步骤②:设置首个单元格样式,点击“向右应用格式”,观察效果;点击“向下隔行应用”,观察效果;点击“向下逐行应用”,观察效果

表格的各行各列因为样式比较统一,所以只需要设置关键起始位置的单元格样式,再向右侧或者下方整行应用样式即可快速完成。

步骤③:点击表格任意单元格,点击“变换表格”,在左侧模板区、剪贴板或者收藏栏选择一个表格样式

若模板本身含有表头样式,会被直接应用,若不需要可以应用后更改,或者自己制作样式模板放入收藏栏或剪贴板进行后续套用格式。

1.4.4

其他特殊布局

在“标题”标签下的“基础标题”内,有首字“下沉”布局,可实现文字环绕包围效果。可打开布局模式自行探索。

除此之外,svg布局、滑动布局会在下一节有关交互的内容中讲解。

1.5

冻结

顾名思义,“冻结”后的布局可塑性更差,需要“解冻”才能调整具体结构或样式;相应的调整选项被隐藏,只显示通用的组件调整栏,但不影响文案的修改。

“冻结”的作用很明显,调整栏更精简清爽,编辑模式下不会误改样式结构;冻结的图片会被标记为装饰性组件而非图片,“一键排版”或“变换组件”时不会被应用图片样式。

1.6

本章小结

排版是一个技能,秀米是一个排版工具,技能+工具必不可少。所以,想要进阶式秀米排版,先来继续搞懂秀米布局吧。

重叠规律元素重叠是遵循后来居上这个规律的,而增加偏移、透明度、旋转等效果,可以改变层级关系。另外,多列布局的列定位“重叠顺序”,可以自主设置结构层次。

布局的宽度宽度自适应属性,取决于内容的宽度。固定宽度属性,一种可固定、不会因为设备屏幕的宽度而变化。而宽度自伸缩属性,它就像弹簧,会自动伸缩其比例。

特殊布局类型固定布局,能够自定义宽度与高度。自由布局,可以像PPT一样,选中、拖拽、拖拉定界框缩放的方式去设计版式。还有用来导入、创建表格的表格布局,首字下沉布局等等。

学啥专业不都一样

工作的尽头必有一个秀米

关于作者: luda

无忧经验小编鲁达,内容侵删请Email至wohenlihai#qq.com(#改为@)

热门推荐