制作右侧信息列表


制作右侧信息列表

了解右侧信息列表功能

上节课我们学习了如何制作网站基本的文章列表,那么这节课我们将接着上节课的内容,学习如何制作右侧信息列表板块。我们先来参考下其他网站,看看右侧信息展示模块都放些什么内容。

通过观察这些科技类媒体网站我们发现,右侧的信息板块一般会展示快讯、热门文章等内容,且这边的板块划分清晰,内容简洁。


划分参考距离

了解信息板块的基本功能后,下面我们就开始动手制作。

在制作具体右侧信息列表前,我们需要创建精准参考线来划分出距离,打好框架。

我们进行垂直方向右侧板块的区域划分:

创建垂直方向距离banner区60px的参考线:选择框选工具,放大画布,沿着banner区域小矩形的右侧边缘框选出60px宽,然后拉出参考线,如下所示:

这样,我们右侧信息列表的整体区域就大致划分出来了。


制作信息列表表头

区域划分后,我们便开始着手往这块区域里面添加东西,我们先来制作右侧信息列表的表头。

创建背景矩形图层1,长420像素 x 高70 像素,颜色为#fafafa,右侧与右侧空白区参考线对齐,顶部与banner区域的顶部对齐。

创建一个蓝色矩形小图标:长4像素x高20像素,颜色 #487ff5。

选中刚刚创建的两个矩形图层,进行左对齐和垂直对齐,如下图:

我们接着添加文字:“精选”,大小24px,字体微软雅黑,颜色#000

接着我们再制作一个圆角边框的按钮,在矩形工具中选中圆角矩形,宽度90像素x高度45像素,设置圆角弧度为10px 。

这里大家注意下,为了保证我们网站同类按钮的样式统一,在网页其它地方制作的圆角边框按钮也需要保持10px的圆角弧度。

为了让按钮中间透明只显示边缘,我们需要在矩形属性面板中将填充颜色选无,将描边颜色设置为#487ff5 ,粗细选择2px,如下图所示:

接着给按钮添加文字“查看更多”: 大小18px ,字体微软雅黑 ,色值为#487ff5,使文字于按钮框居中展示。

以上所讲的创建矩形和文字等,大家直接照着步骤添加就好,都是一些我们之前学过的知识点和技能,大家就当复习一遍。

到这里我们要学习一个新的干货知识:图层锁链功能。

当我们想要同时处理多个图层中的图像时,除了给这些图层打组,在整个组上面操作这个方法之外,我们还可以利用图层的锁链功能。

图层的锁链功能就是将多个图层关联到一起,以便对链接的图层进行整体的移动、复制、剪切等操作,以提高操作的准确性和效率。

我们现在选中圆角矩形按钮图层和文字图层,点击图层面板底部的锁链图标,这时候点击其中一个图层之后,与其链接的图层也会出现一个锁链标志。

当我们选中其他图层时锁链就会自动消失,这是因为其他图层并没有关联该锁链属性。这时候如果选中圆角矩形图层并移动下,你就会发现文字图层也会跟着移动。

如果想要取消锁链功能,我们只需要先选中想要取消的图层,然后再次点击锁链图标,即可取消。

接着我们把这两个矩形图层打组命名为右侧头部,当然图层组的命名没有绝对标准,只要自己能清楚或者有其他同事修改你的文件时,能清楚知晓每个图层组的意思即可。

这个时候右侧信息列表的表头部分就做好了,我们将其整理一下,并且打组命名为:右侧信息列表表头。


如何进行距离控制

大家可能也发现了,我们在划分区域的时候经常要考虑到距离控制的问题,在这里我们就具体说下文字与图片之间以及文字与文字上下之间如何进行距离控制。

我们新建一个背景矩形图层2:420像素x180像素,颜色为#fafafa,位置移动到右侧头部图层组下面并与右侧参考线对齐。创建圆形:50像素x50像素,设置为任意颜色即可,这时我们就需要将该圆形图层移动到合适的位置。

我们要将圆形图层放置到距离背景矩形图层上方边缘20px和左边边缘20px的位置。

我们还是利用框选工具,放大画布,然后分别沿着矩形背景图层2的上方和左边分别框选20px高和20px宽,然后拉出两条参考线,如下图所示:

接着我们沿着拉出的两条参考线,将圆形图层的位置放置好,如下图所示:

圆形图层位置确定好之后 ,我们继续添加文字 ,这时我们又需要确定文字位置。

我们还是可以利用同样的方法,在椭圆右侧再添加一根红色矩形参考线。

我们使用矩形框选工具,沿着圆形图层的右侧拉出20px宽的选框,然后拉出参考线。

接着新建文字图层,“周华国”,文字大小24px ,字体微软雅黑,如下图:

继续创建文字图层“4分钟前”,大小18px,色值 #666。微调下两个文字图层的位置,分别和圆形图层的顶端和底端对齐 ,如何对齐请参考文章2.4中的图层对齐操作。

接着给圆形图层利用创建剪贴蒙板添加一张图片,如下图所示:

然后再沿着圆形图层的下方框选出高20px,拽出一个参考线,到这一步我们就已经把 图片和文字的位置都确定了。

我们再回顾下前面的内容,其实没有讲很深的道理。本节的目的就是想让大家知道该如何把文字和图片放到合适的位置,而不是肉眼看一下,差不多就好。失之毫厘差之千里,如果你认为学习都是差不多就行,那我们也很难真正将一门技术学好!

点文本和段落文本的区别

接着上面内容,我们要添加一段文字图层。说到文字图层我们要做一个新知识点:创建段落文本。有关段落文本的知识点我们在之前的课程中也有学到过,但还只是介绍一些概念性的知识点,下面我们就结合具体的实践来详细讲一下这个常用的功能。

在PS中我们常用的是点文本和段落文本,点文字不会自动换行,通常用于处理较短的文字,如标题等。段落文本通常用于处理大段的文字,可以自己换行。我们还可以通过拖拽段落文本框来改变文字的排版。下面我们就来实际操作下:

我们在背景矩形图层2上新建一个图层,接着选择文字工具,快捷键【T】,直接在新建的图层上拖出段落文本框。

如果你出现了下图中鼠标出现的这个形状,肯定是因为你没有在新建好的图层,而是在矩形背景图层上创建的文本。虽然这样做也能创建段落文本,但是大小我们还要再修改一次。

我们拖拽段落文本框的时候也要注意大小,文本框的顶端要与圆形图层下方添加的参考线对齐。左侧与参考线对齐,右侧与“查看更多”的圆矩形的右侧边缘对齐,如下图所示:

文字大小 16px 色值#000

如果输入的文字过多,没有完全显示,那么则需要在段落文本框的编辑状态下拉高度即可,宽度也是一样。

有的时候我们的段落文字,会出现标点符号换行或两端文字不对齐,我们就需要用到文字段落面板。

菜单栏:“窗口→段落” 打开或者使用快捷键【Ctrl】+【M】调出,如下图

我们在使用PS的过程中如果发现不知道这按钮或者图标工具是干什么的,可以将鼠标悬停在上方,停留几秒就会出现对应的功能介绍。如果还是看不懂那么就使用我们大绝招:通过搜索引擎查找答案。

我们要先选中文字段落图层,然后点击段落面板中的全部对齐按钮使其段落文字左右的距离都保持垂直。

段落两端对齐之后,我们还需要微调下段落的行距和字间距。

菜单栏:“窗口→字符”,选中文字段落图层按照下图所示,把该段落文字字间距调整为30 ,行距调整为20。

本章中我们不具体说字符和段落的使用,因为后面我们在文章详情中会再次使用到,慢慢消化。

文字段落确定好了之后,我们还要处理下段落文字与底端的距离。利用矩形框选工具,框选出20px高,然后拉出参考线。接着使用自有变换的功能,快捷键【Ctrl】+【T】将背景矩形2的高度调整至距离文字段落下方20px的距离。

这里我简单解释下,背景矩形的底端高度是根据段落文字的位置来确定的,但无论段落文字多长,文字段落底端与矩形背景框底端永远保持20px的间距,这样才能保持完整的样式。

这些位置都调整好之后我们需要再添加一个箭头,告知用户此区域可以点击展开详情。

我们先依照之前在2.6中所讲的下载图标的方法下载一个箭头的图标。下载好箭头后,将箭头等比缩放为30像素x30像素,图层颜色叠加为#666,将其图层命名为:箭头图标

箭头图标右侧与参考线对齐,高度与圆形 图层水平对齐,如下图所示:

包括文章前面制作的查看更多按钮,也是按照这样的方法制作。我们可能在往下设计的过程中,就会发现之前有些位置距离还需要不断的调整。

从该图中我们可以发现,即使是一个小信息列表里面也有很多需要注意的地方,我们将距离控制在20px,是为了保证网页设计出来之后页面的统一。

我们还差一个列表分割线,创建一个矩形:长420像素x高1像素,色值为#eee,将其图层命名为:分割线,放到背景矩形2图层的下面。

当位置都摆好之后该干什么呢 ?再给你3秒时间思考下。

没错,记得随手保存PS文件!

保存PS文件之后,我们将该区域的图层整理下并打组命名为右侧信息列表1,接下来就和制作banner下方的文章列表一样多,复制几个出来即可。

快速制作出更多的信息列表

整理命名好第一个右侧信息列表后,我们复制该图层组,快捷键【Ctrl】+【J】,然后按住【Shift】键垂直位置移动该图层组,每个信息列表图层组之间的间隔保持在20px。

接着利用之前批量制作文章列表的知识优化下复制出来的信息列表里面的文字和图片,使其尽量真实。最终效果如下图所示:


知识点总结

1、如何进行距离控制

2、利用复制图层组的功能快速做出多个信息列表

到这里我们右侧信息列表的板块就制作完成了,回顾上面的知识点其实可以发现,我们在设计网站的时候要注意距离控制的统一性,这样可以保证整个网页的排版整齐和严谨。另外其实很多知识点都是在重复学习和使用,大家可以举一反三,以便更好地掌握相关的知识点。

0

【制作右侧信息列表隶属于分类: 大猫概念

它起初由本站用户:刘欣Eden于3年前 创建。

它被收录于如下合集: pscast

该内容的链接是:

目录