制作热文列表

制作热文列表表头

接下来我们将制作一个热文列表

在右侧信息列表3 图层组的下面框选出20像素高的位置，拉出一根参考线，然后将右侧信息列表表头图层组复制一个出来，命名为热文列表表头，移动到参考线的下面。

接着，我们删除不需要的查看更多的按钮，将“精选”改为“热文”。如下图所示：

制作热文列表样式

热文列表表头制作好之后，我们接下来制作热文列表的样式。

创建矩形： 长420像素x高280像素，颜色 #fafafa ，放置于与表头背景矩形的交接处，并将图层命名为热文列表背景矩形。

调整好位置之后，我们在这个背景矩形上再创建一个矩形，作为创建剪贴蒙板的区域 ：长 380像素x高200像素，填充色为任意灰色即可。位置摆放在距离背景矩形左右和上方20像素的地方，如下图：

这个时候我们将从搜索引擎找到的图片利用创建剪贴蒙版的方式添加进去。注意，一定要先选中要添加图片的矩形，这样才能一步到位，直接将图片放置到对应的矩形里，这样的操作将会为带来很多便利。

接着我们利用自由变换功能同等比例缩放合适大小，如下图：

接着我们在图片下方20px的位置再添加标题文字，字体大小 24 px，颜色#000 ，将文字移动到与上方图片左侧边缘对齐的位置。

接着我们复制一条右侧信息列表里的分割线，并将其位置移动到热文列表文字下方20px的位置。这个时候我们第一个热文列表就制作完成了，我们将这部分的图层整理并打组，命名为热文列表1，如下图所示：

批量制作更多的热文列表

同样地，我们利用之前所学习的复制图层组的方法批量添加热文列表。

复制两个热文列表1图层组，并将其名字分别改为热文列表2和热文列表3，按住Shift键，垂直向下移动，依次排列好。接着，我们为了更好的真实效果将其中的图片和对应的文字进行相应的修改，效果如图所示：

这个时候我们需要将整个body区域补充完整下，我们需要再添加几个基本文章列表图层组。

同样地，我们再复制五个基本文章列表组，并将其垂直移动到相应的位置。为了真实效果，我们同样要将其文字和图片的内容进行相应的修改，如下图所示：

在这里需要说明两个问题：

第一，我们需要放置多少组的文章列表是由我们网站展示的需求所决定的，这些都是可以灵活调整的。

第二，当我们往下设计的时候，如果画布的高度不够的话可以利用裁剪工具，或是修改画布大小来增加画布的高度，只需要为网页底部保留150px的高度即可。

画布指的是整个文档工作的区域，当我们执行“图像→画布大小”操作时，即可在调出的画布大小的对话框中修改画布的大小。我们将当前的画布的高度根据我们的实际需要调整至2160像素，宽度不变，点击确定即可。

又或者我们可以直接使用裁剪工具，快捷键【C】，直接拖动画布下边缘后，调整好后点击上方的即可扩充画布的高度。只不过在使用这种方法时，我们需要仔细些才能拖拽裁剪出想要的画布大小。比起上一个方法，这个方法在裁剪时更灵活随意些。

裁剪扩充好画布后，我们继续进行操作：我们需要添加一个“点击加载更多”的选框和按钮。

创建矩形：长800像素x高200像素，填充色无，边框颜色#eeeeee，我们将该矩形框放置到距离基本文章列表8分割线20px的地方。接着，我们在矩形框上添加文字图层：“点击加载更多”，字体微软雅黑，大小24px，颜色#666666，然后将该文字图层与矩形垂直居中对齐，如下图所示：

知识点总结

到这里我们的整个body部分就基本完成了，我们简单回忆下目前所做的这些。从开始的添加LOGO到制作文章列表等，这些知识点在很多地方都是重复使用。万变不离其宗，不要被PS繁多的工具所吓到，用来用去就是常用的那个几个工具。而这些工具间其实也是相辅相成的，有的需要不同工具间的相互配合，以达到更简便的操作目标。