Photoshop绘制破旧风格的网站首页布局(2)

第五步

现在我们要添加导航栏背景。画出一个矩形盖住”pattern 1″图层一点点。给矩形应用图案叠加、黑色到黑红色的渐变叠加以及柔和的投影。使用下面图片所示的值作为参考。接下来，添加图层蒙板>隐藏全部，在图层蒙板上画出黑色到白色到黑色的渐变，你将会得到如下图所示的结果。

第六步

现在在”Pattern 1″图层上方画一个椭圆(#691E1B)，命名为”Light”，给其应用50个像素半径的高斯模糊。我又创建了一条额外的参考线，方便将椭圆放置于页首的中间。将超出导航栏下方的所有部分都删除掉，更改图层的混合模式为颜色渐淡。

第七步

为了完成布局的第一部分，接下来我们要画出侧边栏的背景。创建一些参考线来给侧边栏划定界限并且调整已经创建好的参考线，使他们适应目前的布局。然后画一个红色的矩形(#3D100B)，应用如下图层样式：阴影、颜色叠加以及图案叠加。

这个时候你必须考虑之后如何将图片剪切以适应在HTML和CSS中使用。这也就是为什么我在应用投影时经常将距离设置为0像素的原因，而且只使用水平或者垂直渐变。这个案例中的材质有很多的水平线。在很多区域需要很容易的转换成可重复的背景图片。而且，这个时候也是稍微休息一下，将图层好好组织一下的时候。