在这个初学者级别的网页设计教程中，我将向您展示如何使用Photoshop构建一个具有固定木制背景的作品集网页布局。我们还将使用一些笔刷来强调设计。
预览
您可以在下面看到最终结果。点击图片查看全面．
资源
设置Photoshop画布
1我们要做的第一件事是创建一个维度为的新文档1024px x 912px．
添加背景
2对于我们的背景，我们想添加一个木制纹理。为了本教程的目的，我使用了来自纹理爱好者的木纹纹理。使用自由变换(Ctrl/Cmd + T)调整纹理的大小，以适应我们的画布上的纹理。
创建头部
3.从新建图层的头部开始，我们要使用矩形选框工具(M)创建一个矩形选区，填充黑色(# 000000)。
4使用多边形套索工具(L)，在标题背景底部制作一个锯齿状的有机选区，以创建脊状边缘。一旦你做出选择，去编辑>清除。
5继续并降低该图层的不透明度为８５％让木质背景显露一点。
创建网站名称/Logo
6对于我们的网站名称/标志，我们可以只使用一个简单的文本标志。我用了字体无数的职业用颜色# FFFFFF对于网站名称和标语的前半部分，网站名称的后半部分用一种水洗出的绿色(# 93 b19d)。用移动工具(V)将站点名称定位在画布的左上角。
在Header中添加链接
7然后，我们将使用水平文字工具(T)在标题的右侧添加一些链接。Home链接的颜色为# D9D5BB，其余导航链接的颜色略有不同(# DDCFAB)。以类似于下面的方式列出它们:
创建主导航链路
8我们的“家”链接将作为我们的模型活动链接，表明网站用户正在的当前页面。我们想为它添加一个活动效果，在本教程中，我们将在它后面添加一个小笔触。为此，我们需要从deviantART下载FlightOfGrey Stroke Brush Set画笔集并安装它。当然，你可以随意使用自己的画笔或制作自己的画笔。
如果你使用FlightOfGrey描边笔刷组，找到看起来类似于下面的笔刷尖端(只有几个可以选择)，并调整它的大小到你的喜欢。我在导航链接文本层下面创建了一个图层，然后使用画笔工具(B)，颜色为# 355 d63创建活动链接(如下所示)。
制作介绍框部分
9下一步是介绍框。我们想使用画笔工具(B)，在FlightOfGrey笔刷设置中的第二个笔刷，并将主直径选项设置为我们的介绍标题的背景(大约300 px)。确保前景色设置为黑色(# 000000)。你可以用套索工具(L)修剪掉你不想要的多余飞溅，然后编辑>清除。它应该看起来像这样:
10现在添加一个颜色叠加作为一个图层样式的介绍框图层:
11使用如下字体海维提卡使用水平文字工具(T)添加你的“介绍”文本，使用米白色# F1E6D8．
你应该这样说:
12再次使用画笔工具(B)。使用FlightOfGrey笔刷设置中的第三个笔刷，确保你的前景色设置为# 000000画笔的主直径选项设置为大约400 px．在它自己的图层上，以如下方式为介绍复制文本创建一个笔触:
13它比我们想要的要浅一些，所以复制你的图层几次(Ctrl/Cmd + J)使它变暗。放入一些模拟文本(我使用了一些)Lorem Ipsum为了本教程的目的)。
创建特色设计部分
14在我们的介绍框的右边将是一个漂亮的小点的特色设计。我创建了一个缩略图的大小420px x 165px然后添加了Outer发光而且中风图层样式为缩略图;你可以使用下面的设置图层样式:
添加社交媒体图标
15接下来，是时候添加社交媒体图标了。使用我们在介绍标题后面使用的相同笔刷。我们想添加一个类似于下面的黑色笔刷，使用比以前更大的笔刷。
16下一步是添加旧瓶冠图标集由Jan Cavan设计的图标免费的部分这里是Six Revisions。
你最终会得到如下内容:
创建最新项目部分
17接下来，在介绍框下面为你的最新项目创建一个区域。使用矩形选框工具(M)，画一个如下所示的矩形，并填充它# 000000．降低其图层不透明度值为８５％．
18添加一个外发光图层样式:
19继续，按照类似下图的方式安排盒子的内容。使用一个220 px通过160 px最新项目的缩略图。标题的颜色是# C3E2E0，说明文字为白色(# FFFFFF)。
20.缩略图有点乏味，所以让我们添加一个内发光图层样式和中风图层样式(使用如下所示的设置)到我们最新的项目缩略图的图层，给它一个漂亮的边界和一点内阴影。
21继续，通过复制第一个最新项目框的图层来创建另外两个盒子，然后使用移动工具(M)将复制的图层移动到它的右边。下面是我的结果:
完成一个简单的页脚
22最后一步是添加版权声明，作为简单的基于文本的页脚。为了让你的文字在木制背景上更明显一点，你可以使用减淡工具(O)来点亮该区域。下面是带有简单页脚的最终布局:
相关内容
- 如何从头开始编写垃圾网页设计
- 在Photoshop中创建一个冬季主题网页设计
- 编码一个乐队网站创建在Photoshop
