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

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

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

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

然后设置如下图层样式：‘内阴影’/‘描边’：

下一步，下载凌乱、自然灰褐色图案（或其它图案）拖放到文档中，放在矩形图层上方。接下来我们要遮住一些不需要的纹理，在图层面板选中矩形图层，按住cmd/ctrl键，点击缩略图，创建一个自动选区，然后选中纹理图层，在下拉菜单中点击"添加图层蒙版"，这样遮住了除选区外的所有区域，最后，撤消选区（ctrl+D），把纹理图层的透明度下降到35%。

为了使标题更加炫目，按如下设置添加图层样式：‘阴影’/‘渐变叠加’：

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

在矩形图层上添加以下样式：‘外发光’/‘渐变叠加’：

最后一步是在按钮右边添加花纹，就是这微妙的设计元素增加了此设计的优雅度。下载并安装花纹笔刷（资源区的上方），先设置前景色为#343434，选取画笔工具（B），找到花纹笔刷，在画布上进行一次点击，然后把图层混合模式改为“强光”。

设置此图层的透明度为15%，以显示背景图案，接着添加’阴影’的图层样式：

此刻，我们需要在幻灯片区域添加图片缩略图，你可以找一个网站截图或其它图片，放在白色圆角矩形上方。我们得把图片四角变成圆角，在图层面板，按住cmd/ctrl，点击白色圆角矩形的缩略图，创建一个自动选区，接着选择放图片的图层，去往菜单"选择>修改>收缩"，收缩10px，然后执行"选择>反选"（cmd/ctrl+shift+I）反选选区，最后执行"编辑>清除"。

接下来添加图片描述，在图层面板，按住cmd/ctrl，点击图片图层的缩略图，创建一个自动选区，新建图层，并以黑色填充选区，然后使用圆角矩形选框工具（M），选取新建的黑色矩形的上部分并删除。

降低图层透明度到75%，添加简单的文字说明

设计的主内容区的时间到了！

主内容区的设计其实相当简单，但是要让人看出很简单也要花一定时间完成。我们将从左边开始，放置服务列表。

为了给路径描边，设置前景色为文本颜色（#323232），然后选择一个较硬的画笔工具，大小大约为3px。接着打开"路径"面板（窗口>路径），点击面板下方的"用画笔给路径描边"。

下面为曲线添加一点渐变，设置"渐变叠加"的图层样式：

复制曲线图层，离原图层下方4或5px处，降低透明度到24%。

着为圆角矩形设置图层样式：‘外发光’/‘描边’：

然后，在圆角矩形内添加与描述相配的图片。

使用字体Georgia Italic编辑标题，从Mono图标中选择一个信封的图标，给此图标设置了颜色（#F7E5C4）叠加，创建了一个圆角矩形选框，用来输入用户邮箱，以白色填充。

接下来创建一些链接，选取圆角矩形选框工具（M），生成如下图一样的选框，以深灰色(#323232)进行填充，里面用白色文字填充。

然后把混合模式改成"弱光"，透明度降低到63%，以突出背景颜色。重复此流程，创建其它链接。

最后一件事，选择一些社区媒体图标添加到链接上方，选择站点logo和copyright放在footer右侧。

clean_classy_webdesign_template

最后修改于 2011-11-29