get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天小编跟大家分享的是Photoshop设计复古风格网页模板系列二，一起来学习了解下吧！
最终效果
Photoshop是做网页设计的非常好的工具，特别是如果你要在设计中使用大量的图片和笔刷效果的话。在这个教程中，我会教给你如何完成一个破旧风格的主页设计。我们将要设计页头、侧边栏、主体、页脚以及所有一切非常有质感和破旧效果的设计。
第一步
这次我们要使用Photoshop创建一个破旧风格的网页设计，需要用到很多的图片。由于这是一个中间难度的教程，我将会略过对于基本步骤的解释。首先创建一个宽950像素高800像素，分辨率为72dpi的新文档。将标尺打开，拖拽出文档的边界，这将会是设计的最佳区域。我计划设计一个固定宽度的布局。
选择图片画布大小，增加宽度和高度到1200像素和1000像素，这样做是为了宽显示器的分别率设计。然后给你计划添加内容的区域（页首、导航栏、侧边栏、页脚）增加参考线。
让我们假设这个设计最终目的是一个wordpress主题，因此我们需要一个页首，一个在页首中的导航栏以及一个右边的侧边栏。如下图所示。之后将背景色填充为#7A8173。
第二步
现在我们要给页首的背景创建图案。很简单，创建一个50像素宽，300像素高的文档，画出如下图所示的图形。我使用了参考线让图形尽可能的对称。然后选择编辑定义图案，保存为”Pattern 1″。
第三步
在主设计文件的新图层上，使用矩形工具画出一个300像素高的矩形。打开图层样式，添加图案叠加，选择前面创建的图案。为了达到理想效果，你必须点击贴紧原点按钮。将图层的填充不透明度更改为0%，在这个图层上再创建一个新的图层，将两个图层合并，这种方法可以让你直接给页首增添效果。将这个图层命名为Pattern1。
第四步
选择”Pattern 1″图层，给它添加一些图层样式：投影、渐变叠加以及图案叠加。尝试着得到如下图所示的结果，使用如下值。
第五步
现在我们要添加导航栏背景。画出一个矩形盖住”pattern 1″图层一点点。给矩形应用图案叠加、黑色到黑红色的渐变叠加以及柔和的投影。使用下面图片所示的值作为参考。接下来，添加图层蒙板隐藏全部，在图层蒙板上画出黑色到白色到黑色的渐变，你将会得到如下图所示的结果。
第六步
现在在”Pattern 1″图层上方画一个椭圆（#691E1B），命名为”Light”，给其应用50个像素半径的高斯模糊。我又创建了一条额外的参考线，方便将椭圆放置于页首的中间。将超出导航栏下方的所有部分都删除掉，更改图层的混合模式为颜色渐淡。
第七步
为了完成布局的第一部分，接下来我们要画出侧边栏的背景。创建一些参考线来给侧边栏划定界限并且调整已经创建好的参考线，使他们适应目前的布局。然后画一个红色的矩形（#3D100B），应用如下图层样式：阴影、颜色叠加以及图案叠加。
这个时候你必须考虑之后如何将图片剪切以适应在HTML和CSS中使用。这也就是为什么我在应用投影时经常将距离设置为0像素的原因，而且只使用水平或者垂直渐变。这个案例中的材质有很多的水平线。在很多区域需要很容易的转换成可重复的背景图片。而且，这个时候也是稍微休息一下，将图层好好组织一下的时候。
第八步
现在开始设计细节，我想将网站名添加到显眼的位置，这就是为什么我会使用这张漂亮的破旧标签图片。很显然，你必须将标签放置到我们这个设计的左上角。试着作出如下图所示的效果。接下来，使用魔术棒工具选择棕色的圆圈，然后使用Ctrl+Shift+I反选选区。使用如下值调整色阶和色相/饱和度。
第九步
现在使用橡皮擦工具和不整齐的画笔，删除标签的一部分边缘。要添加剪纸效果，选择减淡工具，使用和上面相同的画笔形状给标签的边缘应用减淡。
第十步
下面要给标签添加阴影。首tulaoshi先，将”Label”图层复制一遍，更改色相/饱和度中的亮度到-100，在添加10个像素半径的高斯模糊。接下来，将”Label copy”图层的混合模式更改为正片叠底，将不透明度设置为75%。
123下一页
