在这个Photoshop网页设计教程中，您将学习如何创建一个完整的网页布局，结合圆滑和纹理的外观和感觉，使用中级Adobe Photoshop技术的组合。
最终结果
以下是你将努力创造的东西。您可以查看大的版本在这里．
下载
您可以下载本教程的源文件(PSD和库存照片)。
- photoshop_sleek_textured.zip(ZIP文件，9.3 MB)
设置Photoshop文档和背景
1我们要做的第一件事是创建一个新文档，其尺寸为1024×1050．
2下一步是更改背景颜色。使用您的油漆桶工具从您的工具托盘，填充您的背景层# F0EEDB．3.接下来，我们要给背景添加一张图片。我在deviantart网站上找到了一张很棒的照片，你可以在这里下载。
你需要调整它的大小以适应你的文档，并复制几次来填充你的文档。要保存该步骤，可以继续操作，在源文件中获得更大的图像版本。4一旦你在你的文档中有了图像，继续并降低它的不透明度约82％它看起来是这样的:
创建布局的头部
5现在让我们继续，开始我们的头部。使用矩形选框工具创建一个类似如下的选区，距离你的文档顶部大约一个像素，并填充它# 0000006接下来，我们要继续，通过右键单击我们的图层，从下拉菜单中选择混合选项，将以下混合选项插入到该图层上:
7将图层的不透明度降低到大约95％所以一些背景淡出，你的文档看起来应该是这样的:
8下一步是在头部添加一个logo。我选择了字体日内瓦CY．继续，把你的文本以类似于下面的方式，并做一个漂亮的小1 px旁边是宽线。
9现在继续，将这些混合选项添加到你的文本图层，并添加到1 px您创建的宽线。10然后继续使用简单的字体，比如Helvetica，用字体颜色添加一个标签# 25 b2f8．你的最终结果应该是这样的:
创建导航:背景
11接下来是时候为我们的网站做一个导航了。使用圆角矩形工具，在头部右侧画一个圆角矩形，如下图所示。
12现在我们想要插入下面的混合选项到它的层。
13完成后，它应该看起来像这样
创建导航:添加文本
14让我们继续添加一些文本，好吗?对于我们的活动链接，我们想使用这种颜色# ABAE80，其他链接使用这种颜色# 393939．如下所示:
15接下来，我们要继续，将我们的链接分割开来。使用矩形选框工具，创建一个1 px在所有链接之间进行广泛的选择，然后点击编辑>清除圆角矩形图层。
头完成!
16一旦你在你的所有链接之间这样做，你的标题是完整的，它将看起来像下面这样:
处理照片横幅:设置纹理
17接下来我们要继续制作我们的横幅。本质上，我们正在制作一种可以显示的不同帖子的“幻灯片”。我在SXC找到了一张很棒的库存照片，可以在这里找到。继续调整它在你的文档上的大小，选择图像的一部分，你发现最吸引人的大小如下:
18现在我们想添加一个轻微的边界底部我们的股票照片，所以插入以下混合选项到您的股票照片层:
处理照片横幅:放入图像标题
19我们希望我们的标题显示在图片上显示它在幻灯片上代表的内容。在我们添加文本之前，我们想要添加一个漂亮的小背景。使用矩形选框工具，在图像的底部创建一个类似下面的选区，并填充它# 000000．
20.现在继续，将不透明度降低到大约59％你应该会得到类似如下的结果:
21现在我们可以添加标题了。对于Category标题，我使用# FFFFFF为我的字体颜色，但降低其层的不透明度为60％．对于标题，我使用了相同的方法，但只是降低到８５％．你的图像看起来像这样:
图片横幅的工作:设计后期预览数字
22在左侧，我继续添加了一个位置，让您选择正在查看的帖子。我所做的就是用椭圆选框工具画圆圈，用黑色填充它们，并在里面放置白色文本。
23对于我的活动3号圈，我在它的图层上使用以下混合选项:
网站照片横幅完成!
24这时你的标题就完成了，应该是这样的:
设计后期预告片
25现在是时候转向如何显示我们的帖子了。使用矩形选框工具创建一个类似下面的选区，并填充它# FFFFFF．
26接下来，我们想要插入以下混合选项到它的图层上:
Post teaser设计完成!
27我们现在要做的就是列出我们想要的帖子。对于我的标题，我使用了这种颜色# 211213和标准# 000000的描述。继续使用文本工具，将其布局如下
创建布局的侧边栏:标题框
28你可以继续在其余的文章中使用这种布局。接下来，我们想要移动到侧栏。我们要做的第一件事是创建一个标题框。所以使用矩形选框工具，创建一个类似下面的选区，并填充它# 000000．
29现在插入下面的混合选项到它的层:
30.你的结果应该如下所示:
31现在让我们添加一些文本。用字体颜色添加标题# 323232在它的图层上使用下面的混合选项:
32你会得到这样的结果:
创建布局的侧边栏:侧边栏内容框
33接下来，我们需要制作一个框来放置我们的内容。再次使用矩形选框工具，创建一个类似下面的框，并填充它# 000000．
34下一步，插入以下混合选项到你的图层:
35继续添加一些内容，重复这些步骤，你会得到类似如下的结果:
布局的页脚
36我们快完成了!最后一步是添加页脚。使用矩形选框工具，在我们的文档底部创建一个类似下面的选区，并填充它# 000000．
37现在继续，插入以下混合选项到它的图层:
祝贺您——您完成了!
38只要添加一些文本，就是这样!您的模板完成了。当所有这些都完成后，你的最终结果应该如下所示:
总结
我希望你喜欢这个教程，并发现它对未来有用网页设计！这些教程应该给您提供至关重要的信息人们在网页设计师身上寻找的技能！你的客户，是否一个大学对于艺术家来说，如果你能给他们提供一个独特的、视觉上有吸引力的、易于使用的网站，他们会对你印象深刻。
