小伙伴说咱只放排版示例不放制作步骤是耍流氓,那么小米就来给大家介绍介绍今天这篇由小伙伴壹九肆三的供稿《那个把自己埋在曾经的人》。这篇文章的特色主要有一下三点:
(上下滑动可浏览原稿)
和谐的背景色
突破边框的卷首语标题
底部双重GIF二维码
那事不宜迟
一起来get新技能咧~
全局设置背景色
编者给全文设置背景色,能看出来,是从某张图片上取色,为与正文和谐,又调为浅色:
背景色的相关应用方式可以点击这个教程来了解:
文章卷首语设计
在卷首语中,编者主要利用布局性能设计边框样式,以及调整布局宽度;内容上利用了半透明背景以及文字阴影设计:
1
添加一个空白布局,设置全部边框为实线,尺寸为2px,白色:
设计完成后,因边框为白色的原因,如果不设置留白,边框就会紧贴着两边,所以需要将布局宽度调整为90%,同样,顶端也要插一行空格
2
继续添加一个布局,设置半透明背景色为rgba(195, 252, 244, 0.55);然后添加一个二列布局,插入文字内容,设置文字为竖排:
左边文字颜色设置为rgb(69, 140, 130),刚好与背景色有层次关系;右边文字设置文字阴影:
3
最后的文字内容,则是添加空白布局,设置宽度为95%,布局左右边距为5px,在插入文字内容,文字颜色为rgb(99, 122, 124):
秀米中间距设置方式请点击这个教程了解:
正文内容的设计
正文内容中,编者是通过利用布局调整宽度,来调整图片及文字内容大小:
1
先添加一个空白布局,调整宽度为90%,设置布局边框样式,最后再插入图片:
2
然后再添加一个空白布局,设置宽度为90%,插入文字,文字颜色与卷首语文字颜色一样:
秀米图文排版中加入内容请点击这个教程了解:
底部双重GIF二维码
在文末,编者同样是添加空白布局设计边框样式,再插入内容:
1
先添加一个空白布局,调整宽度为90%,设置布局边框样式:
2
继续添加一个布局,设置GIF背景,然后添加横线,设置文字内容段前距为负数,造成上下三个层次的视觉效果:
3
继续添加一个空白布局,设置GIF图为背景,然后添加一个二列布局,撑开背景图;设置布局对齐方式为向下对齐,将背景内容显示出来,最后添加文字及二维码:
图文排版中设置定位对齐请点击这个教程了解:
联系客服