在这篇网页设计教程中，你将学习如何设计优雅并专业的网页布局，我们将运用各种photoshop技巧，依靠图形工具和图层样式等基本操作来实现此布局。作为奖励，在教程结束后附有HTML/CSS/JavaScript的网站模板，完全免费下载。

网站模板

点击下图查看网站模板

素材

• 矢量社区媒体图标（下载）
• 凌乱、自然灰褐色图案（下载）
• 高清花纹笔刷（下载）
• Mono图标（下载）

1、新建文档

打开photoshop，新建尺寸为1020*1180px的空白文档。

2、设置导航条背景

选取矩形选框工具（M），创建有整个画布宽的选区，高度不要太高，然后用深灰色（#393939）进行填充（cmd/ctrl+F5），如下所示：

复制（cmd/ctrl+J）刚新建的导航图层，并对其添加杂色滤镜（滤镜>杂色>添加杂色），如下设置：

然后更改图层混合模式为”叠加”，透明度下降到大约23%。

3、创建站点logo/名称

对于logo，我使用了粗斜样式的字体Georgia，用白色（#ffffff）编辑’Six’时，用米黄色（#F7E5C4）编辑’Studios’，对于图标，选用了Mono图标中的boxupload32图标，如下所示：

4、添加菜单

使用颜色（#DBD1BE）编辑激活时的菜单，正常状态的菜单使用颜色（#ABAAAA）。

为了让激活状态下的菜单更加醒目，选取圆角矩形工具（T）创建一个圆角矩形（圆角半径为5px，前景色为#464646）放置在菜单图层下方，如下所示：

，然后设置如下图层样式：

‘内阴影’/'描边’：

5、添加展示区背景

在布局头部，我们还要添加一个作品展示区，以幻灯片形式来播放图片，每张图片配有简单介绍和导航。在开始前，选取矩形选框工具（M）创建矩形，以颜色（#D3CAB8）进行填充。

下一步，下载凌乱、自然灰褐色图案（或其它图案）拖放到文档中，放在矩形图层上方。

接下来我们要遮住一些不需要的纹理，在图层面板选中矩形图层，按住cmd/ctrl键，点击缩略图，创建一个自动选区，然后选中纹理图层，在下拉菜单中点击”添加图层蒙版”，这样遮住了除选区外的所有区域，最后，撤消选区（ctrl+D），把纹理图层的透明度下降到35%。

6、添加网站介绍

使用水平字体工具（T），在展示区左侧添加网站文字说明，采用Helvetica 或Arial字体进行编辑，确保标题（颜色#FFFFFF）和内容（颜色#2A2A2A）文字在不同图层。

为了使标题更加炫目，按如下设置添加图层样式：

‘阴影’/'渐变叠加’：

接下来，创建”About us”的圆角按钮。再一次选取圆角矩形工具（U），设置半径5PX，文本颜色为#404040，同时在右边有一个箭头图标（Mono图标集中的circleright32），重设它的大小以匹配按钮。

(责任编辑：admin)