在本教程中，您将学习如何使用一些基本的Photoshop技术创建一个有纹理的“磨损纸”网页设计主题。该设计结合了一些免费的库存图片，让你创建一个美丽的布局在一瞬间。
最终结果
点击图片查看全尺寸最终结果．
下载
您可以在下面下载本教程的相关源文件。
- worn_paper_web_layout.zip(zip, 6.38 mb)
设置Photoshop文档
1我们要做的第一件事是创建一个维度为的新文档1024 pxx1050 px．
设置背景
2接下来，选择你的油漆桶工具(G)从你的工具面板和填充背景层# F9E9BB．3.现在我们想要添加一张库存照片到我们的背景。我在deviantArt网站上找到了一张很棒的皱纸图片，叫做paper texture by akinna-stock。在本教程中，我将它调整为适当的大小，您可以在命名它的源文件中获得它worn_paper.jpg．一旦你在Photoshop中打开它，将它移动到你的文档中，并降低图层的不透明度为50％．它看起来会像下面这样:
创建主导航
4接下来，我们将讨论导航。使用矩形选框工具(M)做出如下所示的选区，并填充它# 000000．
5现在,这部分有点棘手．使用你的多边形套索工具(L)，在你的整个导航的底部做一个类似于下面的脊状选区。然后选择Edit > Clear删除所选内容，你会看到如下所示的内容:
6降低该图层的不透明度为８５％背景会褪色一点。
7使用水平文本工具(T)，在导航栏的左侧添加一些主链接。使用字体颜色# FFFFFF使用类似Helvetica的简单字体。
8让我们研究如何显示活动/鼠标悬停链接。使用矩形选框工具(M)，做出如下所示的选区，并填充它# FFFFFF在它自己的图层上。
9在你新创建的图层上，插入一对混合选项。要做到这一点，右键单击该图层并选择混合选项…从弹出菜单中，使用以下混合选项:
10你会得到这样的东西:
设计RSS提要链接
11在导航的右侧，我们会有一些RSS提要的链接。
12这是链接的颜色:“订阅”是# FAE4B3；“帖子”，“评论”，“电子邮件”是# F48F32．13从提要图标下载RSS图标。
14这是你的导航完成后的样子:
这个标志
15对于我们的logo，我使用了一种很棒的“Sketch”风格的字体。我使用的字体命名草图块颜色设置为# 323232这就是我想到的:
创建搜索框
16现在是时候进入搜索框了。我们将保持它的简单，所以它不会需要很多步骤来完成。使用矩形选框工具(M)，做出如下所示的选区，并填充它# 000000．
17降低该图层的不透明度为80％，然后作出如下所示的选择(1 px宽)，将搜索字段与提交按钮分开。选中后，选择Edit > Clear删除所选区域。
18对于搜索图标，我们将使用Photoshop自定义形状工具中的默认放大镜。确保前景设置为# FFFFFF然后像下图一样放置。我还降低了图层的不透明度为40%．
19在搜索框内添加一些文本，让人们知道搜索字段的位置。我用了这个颜色# FAF3CF对于这个。
制作“Intro”框
20.让我们创建“Intro”框。你可以在这里对你的网站进行一些描述。所以，再次，让我们拿出矩形选框工具(M)，并做出一个类似下图的选区。用# 000000．
21降低你的图层的不透明度80％．然后使用白色字体(# FFFFFF)，用描述性的句子描述你的网站。
22对于第二组文本，使用颜色# C5AF6F．我只是用一些填充文本来填充它，让你知道它是什么样子的。此方框中使用的字体为无数的职业如果你想知道的话。
内容区
23我们要做的下一件事是在内容区工作。对于我们内容区的背景，我们将使用来自deviantART的内衬纸纹理，它被称为Textures: paper by Dioma。您可以在命名为lined-paper.jpg-在Photoshop中打开它，将它放在你的介绍框下面，如下图所示:
24接下来，我们将为类别链接添加一个位置。使用类似的字体系列海维提卡并将颜色设置为黑色(# 000000)．如下图所示添加一些链接:
25使用你的水平文本工具(T)，创建一个新图层并填充文本_ _ _ _ _ _．
这是一个快速在类别链接下添加分隔符的漂亮技巧。降低图层的不透明度为30%你会得到这样的东西:
设计后期预告片
26现在是时候处理如何显示我们的帖子了。对于我的缩略图，我使用了一个图像224px x 79px并添加以下混合选项到它的图层。
27你的文档看起来会像下图所示(我只是使用了一个随机的缩略图，你可以在左边看到):
28接下来，用我们的矩形选框工具(M)做一个选区，如下图所示，并填充它# 000000．
29填充图层后，将不透明度降低到80％．按照下图所示的方式安排你的头衔、日期和其他信息。对于链接，我使用颜色# CCDDFB，而所有其他文本都是# FFFFFF．日期背后的背景是# B6636D．你的最终预告片是这样的:
30.重复步骤24至27的其他后期预告片。
创建侧栏
31现在是时候转移到侧栏了。我们将使用与内衬纸纹理相同的纸张纹理。我已经做了一个修改的版本，你可以在源文件中找到green_paper.jpg．在Photoshop中打开并拖动到你的文档中。将其放置在与下图相似的位置:
32将以下混合选项插入到green_paper.jpg图层:
33接下来，添加一些文本来表示标题，以及“最受欢迎的帖子”部分的链接。对于标题，我使用了这个颜色# 232323，以及我使用的链接# 064 e6f．我想到了这样的东西:
34对Recent Comments框做同样的操作，你的侧边栏应该看起来像这样:
创建页脚
35我们要做的最后一件事是创建页脚。回到网站顶部的导航栏，找到你在上面做切边的图层。一旦你找到它并激活它，转到图层>复制图层，复制该图层。36然后选择编辑>变换>垂直翻转，并将其放置在文档的底部，如下所示:
37最后，在底部添加一些带有颜色的版权文本# F7E1B0．
恭喜你，你完成了!
如果你按照本教程进行操作，你会得到如下所示的效果:
评论和想法?
你觉得这个教程怎么样?你发现什么地方让人困惑了吗?
你发现错误了吗?请不要犹豫提出问题，我们将帮助您解决问题。
相关内容
- 如何在Photoshop中创建一个光滑和有纹理的网页布局
- 如何在Photoshop中创建一个光滑和干净的按钮
- 相关类别:Photoshop教程和教程
