欢迎大家来到IT世界,在知识的湖畔探索吧!
图文排版
H5
手机版秀米
十月
二零二一年
每周精选
第四十三周
|
|
TUE |
WEN |
THU |
FRI |
SAT |
SUN |
|
18 |
19 |
20 |
21 |
22 |
23 |
24 |
|
|
|
|
|
|
霜降 |
|
今天精选的3篇风格排版都是采访/访谈主题的,作者利用自由布局设计了亮点突出的版头,有的也加入了一点SVG布局设计的互动效果,以及灵活运用了布局的边框设置。
秀米访谈第四期/采访/问答/讨论通用
排版设计:六六
🔼🔽上下滑动浏览作品
rgb(244, 243, 239)
文字色
rgb(0, 0, 0)
强调色
rgb(139, 187, 173)
rgb(238, 200, 155)
这篇排版版头的单个弹窗卡片版式,可以在自由布局里直接用相应的素材组合而成,也可以用普通布局及固定布局组合。
比如,白色卡片背景可以用一个普通单列布局设置背景色,如果卡片想要带一点弧度,可以设置布局的边框弧度:
三个小圆圈可以分别用固定布局,设置相同宽和高,边框弧度设置为100%,并设置边框样式和固定布局的背景色,再放到一个三列布局里面:
并列的内容可以用多列布局,几个内容并列就用几列布局,比如,小圆圈和搜索符号并列:
横线可以再添加一个基础单列布局,单独设置上边框线:
这样的话,分别修改布局的背景色,可以实现上下两部分颜色不一致的效果:
【嘉宾访谈二十八弹】
对话 | 人物问与答 | 记者采访 |
排版设计:莹莹之光
🔼🔽上下滑动浏览作品
rgb(255, 255, 255)
文字色
rgb(62, 62, 62)
强调色
rgb(204, 227, 121)
这篇排版整体版式大多使用了布局设置边框的操作,那如何实现卡片框一层虚线一层实线呢?
先用一个基础单列布局,设置边框样式为虚线,且记得设置边框大小哦~然后选中布局,设置一下四周间距:
最后,再添加一个基础单列布局到设置了虚线边框的布局里面,给该布局设置边框样式为实线即可:
另外,两个并列圆图重叠,可以用布局的列定位实现,比如,选中左列布局,设置列定位里面的右边间距为负数:
SVG互动/妇女节/母亲节/
访谈通用模板 | 职场女性的力量
排版设计:花屿屿
🔼🔽上下滑动浏览作品
rgb(255, 255, 255)
文字色
rgb(62, 62, 62)
强调色
rgb(217, 229, 208)
rgb(0, 168, 156)
rgb(255, 108, 68)
rgb(44, 117, 206)
这篇排版的版头部分有一个全宽点击收缩效果,做法超级简单。
先把要收缩的内容单独做好,可以用自由布局做,也可以用普通布局做。如果是普通布局做的,最好先生成长图:
然后把生成的图片添加到SVG布局的普通布局层里面,SVG布局的动画效果设置全宽点击收缩。
作品实际效果欣赏
长按识别二维码
打开作品集
如何找到这些排版作品
首先
复制精选投稿的标题
然后
在秀米“风格排版”的页面进行搜索
PS:如果标题太长或搜索不到,可以适当删减字数,找到对应的作品。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/134198.html