制作网站文章列表


制作网站文章列表

利用文章列表展示更多内容

上节课我们讲了如何在网站里为Banner排版布局,而网站中的Banner部分往往展示的也是最主要的内容。

但是Banner的位置和所能展示的内容毕竟有限,这时候我们就需要增加文章列表板块去展示更多的网站内容。那么这节课我们将带领大家一起来制作网站的文章列表框架。

通过观察一些科技类媒体的网站可以看出来,虽然每条文章列表所展示的图片和文章的内容不太一样,但是它们的尺寸大小基本一致。

但我们做设计的时候需要把文章列表展示里几种不同的形式都设计出来,比如文章列表里的视频图片的样式、角标的样式、基本的文章列表样式,这样后续我们只需要在后台往设计的框架里面填充想要展示的文字和图片素材即可。


制作基本文章列表样式

我们首先制作出一个基本文章列表样式:

创建一条距离banner区域水平方向20px的参考线:选择框选工具,放大画布,沿着banner矩形图层1的下方边缘框选出20px高,然后拉出水平方向的参考线:

创建矩形:长800像素x高180像素,色值任意灰色即可,图层命名为底部背景矩形,与左边的参考线对齐,如下图所示:

我们再继续往灰色区域里添加内容:

新建一个矩形:长220像素x高120像素,色值的设置区别于底部灰色就行,图层命名为列表矩形1

选中新建的两个矩形进行左对齐和垂直居中对齐,如下图所示:

同样地,我们先去网站上找一张好看的新闻图片,然后利用创建剪贴蒙板将该图片添加到新建的小矩形里。

接着我们添加文字,一般新闻媒体类的文章列表中有这样几个信息:文章图片、文章标题、文章简介、作者头像、作者名称、阅读数量、收藏数量、发布时间、文章分类等 ,这些都是在定义产品的时候就会确定的字段。这本书不会涉及太多产品知识,我们还是先根据案例操作把PS学习起来。

接下里我们把刚刚所说的一步步创建出来

创建标题文字图层:大小18px, 色值#000 ,字体微软雅黑

文字的顶端与列表矩形1的顶端对齐,选中文字图层和矩形图层后使用移动工具栏中的顶对齐功能。

文字的左侧与列表矩形1图层之间预留40px的间距,还是利用框选工具,框选出40px宽,然后拉出参考线:

再创建一个圆形:30像素x30像素,作为作者头像,与标题文字的左侧对齐。同样地,我们也是通过创建剪贴蒙板将找好的图片添加到圆形里面。头像的右边添加文字图层,内容写上作者名称、发布的时间、评论的数量、收藏的数量等内容,如下图所示:

文字放好之后我们把评论和收藏的图标也放进来,这个时候我们可以回头看下header放大镜图标制作的那篇文章,里面有说到如何下载图标素材。这里就不多介绍了,大家回头看下。

添加图层样式

这里讲一个新的知识点:添加图层样式

图层样式也叫图层效果,它可以为图层中的图像添加诸如投影、发光、浮雕、颜色和描边等效果。它还可以创建出具有真实质感的水晶、玻璃、金属和纹理效果。图层样式可以随时修改、隐藏或是删除,使用方便,调整灵活。

今天我们就以图层样式里的叠加颜色为例,讲解下如何给图层添加样式。

“颜色叠加”效果可以在图层上叠加指定的颜色,通过设置颜色的混合模式和不透明度,可以控制叠加效果。

当我们在素材库里下载图标的时候,有的图标样式虽然符合我们的需求,但是并不是我们想要的颜色,这个时候我们就可以利用颜色叠加功能来修改图标的颜色。

我们先把图标的位置放好,然后点击选择该图层,在图标面板的底部有一个添加图层样式的功能,点击选择叠加颜色这个选项。

这时又会弹出一个图层样式的窗口,我们点击色块,在颜色编辑器中输入色值为#666,点击确定。这里还可以调整混合模式以及颜色的透明度等,这些属性值的设置我们都可以根据自己的实际需要来进行调整修改。

确定之后,在留言图层的下方就出现了一个效果状态,如果把效果状态前面眼睛关掉的话,就会回到原来的颜色。后期如果还需要修改成其它颜色的话直接双击“叠加颜色”这几个字即可进行调整更改。

留言的图标已经修改好了,接下来我们再修改收藏的图标。我们这次不用像之前一样再操作一遍,只需要复制一遍留言图层,然后将复制出来的效果拖拽给收藏图标图层,再删除多余的复制出来的留言图层即可。这样便可以不必重复操作一遍照样能得到同样的图层颜色样式了。

在图层组上统一添加图层样式

当我们需要给多个图层添加同一个效果时,一个个添加则会繁琐很多。这时候我们就可以将这些图层进行打组,然后在整个图层组上添加图层效果,既省事还能保证这些图层效果的统一性,不易出错。

与添加单个图层效果的方法类似,我们只需要选中需要添加效果的图层组,然后点击图标,调整相关参数即可。

图层样式里的其他诸如描边、浮雕、阴影等功能我们就不一一介绍了,大家可以举一反三,动手试一试,在实践中具体体会下每种图层样式呈现出来的效果。其实PS里的很多功能使用的方法都是相类似的,每个大功能里包含着很多细节功能,而这些细节功能之间相互联系,相辅相成。

当图标样式修改完成后,我们把这几个图标图层选中进行垂直居中对齐。

接着我们按照下面的步骤再逐个添加:

文字:文章简介,大小18px ,色值#999

文字:文章分类,大小18px ,色值#0072a4

文字图层添加好之后我们再添加一根线作为列表的底部分割线:创建矩形:长180像素x高1像素,色值 #eee

放到列表最大的灰色矩形图层背景的底端,并且让该分割线与灰色矩形的底端重合。

这里请注意放置的位置是矩形背景的底端并且与底端重合,不是放置到矩形背景底端的下面。如果放在下面那么这个列表的高度就变成了181px了,很多做了多年设计的设计师在这种地方都容易忽略,这就是设计中的一个小细节,具体比较如下图所示:

到这里一个基本的列表设计就差不多了,我们把刚刚灰色区域里制作的列表图层进行打组:快捷键:【Ctrl】+【G】,命名为基本列表1,然后关闭底部背景矩形图层,我们使用快捷键【Ctrl】+【T】进行自由变换命令将这块区域的边界调出以便看的更加清晰,你会看到如下图的效果:

这样,第一个基本列表就制作完成了。我们再把基本文章列表组里的图层归归类,整理好,可按照自己方便识别的方式整理。养成随手整理图层组的习惯可以提高我们的效率,这样的习惯我们也应该运用到工作中,对我们的工作做到心中有数,游刃有余。

图层的整理效果如下图所示:


复制图层组制作更多的列表

大家可以思考下上面我为什么会这么做?

答案揭晓:

我的目的就是将该文章列表图层组的区域高度作为下一个复制出来的图层组的移动高度的参考,这样我们就可以不需要画很多的高度辅助参考线就能直接画下一个文章列表了。

我们选中图层组列表1【ctrl】+【J】复制一个图层组,将图层组名字改为基本列表2

使用快捷键【ctrl】+【T】进行自由变换命令,按住【shift】进行向下移动,自由变换状态下可以帮助我们清晰地看到选中的图层组目前所在的位置。

以此类推,我们再复制基本列表2图层组将其改成基本列表3,到这一步我们就得到了3个列表组,下图是整体效果。

为了呈现出更好的网页设计效果图,我们还是需要像Banenr图设计一样,为列表添加一些真实的图片和文字数据。

我们还是用之前创建剪贴蒙版的方法,先选中对应需要添加图片的矩形,然后将选好的图片复制粘贴进来。

以基本列表2为例

先选中基本列表2图层组中放置新闻图片的矩形图层,然后将已经复制好的图片粘贴到该矩形图层上方,接着选中该需要放置的图片,右键创建剪切蒙版。

完成了这步操作你会发现,粘贴进来的新闻图片不见了。原因是该新闻图片所放置的位置,不在矩形图层区域内。这时就需要我们利用自由变换功能【Ctrl】+【T】等比例放大缩小,这样就可以清楚地看到该新闻图片了。自由变换的这个功能我们之前也有讲过,它可以帮助我们快速确定图层或是图层组当前所在的位置。

刚刚说的是第一个方法,这里还有个办法可以少操作一步。

因为我们是复制的列表1图层组,所以里面还保留着剪贴蒙版的的功能。这时候我们只需要将要粘贴进来的新闻图直接拖拽到原来列表1里复制出来的新闻图的下面:快捷键【Ctrl】+【[】,再删掉复制的出来的列表1里的新闻图片,这样也可以直接得到创建剪贴的效果。反之,将当前层上移一层的快捷键【Ctrl】+【]】,然后我们再将文字部分的内容修改下即可。

其实这两种方法原理和功能是一样的,只不过第二种方法更加便捷一些。

这里我再强调下要先选中需要修改的图层再来做修改!否则后面图层多了之后,若再修改就会浪费大量时间。

下图就是我们本节列表制作所呈现出的最终效果。


知识点总结

(1) 借鉴其他网站,制作基本文章列表样式

(2) 复习创建剪贴蒙版功能

(3) 利用复制图层组的技巧快速制作出更多的文章列表

学到这里大家会发现,其实我们很多PS的知识点都是贯通的,而我们也在反复地运用那些PS的知识。我们还是要重复一下当初的约定,一定要动手用起来,用多了自然就可以更牢固地掌握这些PS的知识点了。

0

【制作网站文章列表隶属于分类: 大猫概念

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

它被收录于如下合集: pscast

该内容的链接是:

目录