本文共 1387 字，大约阅读时间需要 4 分钟。

今天，我将创建一个酒店的网页布局。这一布局不仅适用于酒店业的网站，也非常适合早餐店、汽车旅馆、餐馆、披萨店、酒吧、酿酒厂等多种场景。

我会使用一张漂亮的背景图片，你会发现仅凭一个简单的背景图片就能创建出一种优雅的乡村风格布局。

请按以下尺寸新建一个文档：宽1000像素，高1100像素。

请点击下面的图片查看完整大小的图片，将其保存到您的电脑上，然后在Photoshop中打开这个无缝图案。我们将使用这个图像作为布局的背景。

在Photoshop中打开上述图片后，点击编辑 > 定义图案。通过这种方式，你可以从图像中创建任何类型的图案。

你可以关闭背景图像的文档，然后添加该图案到你的布局文档中。为了添加图案，请选择油漆桶工具。

确保选择刚刚创建的图案。

在你的文档上点击一次，你会发现布局的背景看起来和下面的图片一样。

由于布局的底部看起来不够协调，我会用画笔工具（并确保使用平滑刷）在布局的底部画一条线。选择的颜色非常重要，我会建议你使用滴管工具来获取精确的颜色或与我类似的颜色。

我会使用圆角矩形工具在布局的中部创建一个圆角矩形（42，117，920，320），颜色为#f3c090。

为了这个图层，我会添加以下图层样式：填充颜色为#f3c090，描边颜色为#434343。

这是我创建的结果。接下来，我会在这里添加一些内容。我只使用了一个餐厅的图片，但你可以创建一个漂亮的图片滑动栏，或者一个预订表单。

请注意，在图片的图层上右键选择添加剪贴蒙版。此时，必须移除前面圆角矩形图层中图案叠加的样式。前面的颜色叠加颜色选择为偏黄色，这是因为它与图片的主色调一致。如果图片的主色调是其他颜色，那么颜色叠加的颜色也需要相应调整。

在顶部，我会创建另一个圆角矩形（42，117，920，45），这个矩形将变成一个普通的菜单栏。

我会为这个图层添加以下图层样式：渐变叠加颜色为#9c9ea5，描边颜色为#424242。

这是我创建的结果。

我会再次使用圆角矩形工具创建3个圆角矩形：分别是（48，546，908，437），颜色为#f4c79f；（48，546，908，286），颜色为#fbe1c7；（48，993，908，87），颜色为#fbe1c7。

对于所有这些图形，我会为它们添加以下图层样式：描边颜色为#424242。

这就是我创建的结果。

现在，我会使用钢笔工具创建一个与下面的图片相似的形状。你可以打开网格（视图 > 显示 > 网格）以简化创建过程。

建议：可以使用矩形工具创建一个矩形（350，-52，307，190），然后在矩形底边的中部添加一个锚点，并使用直接选择工具将锚点拖动到合适的位置。

我会为这个简单的围巾添加以下图层样式：渐变叠加颜色为#9c9ea5，描边颜色为#424242。

你可以看到我为顶部菜单栏使用了相同的图层样式。

我会在围巾的左上角使用椭圆工具创建一个小圆，形成围巾的阴影，并为其添加与围巾相同的图层样式，并调整图层的顺序。

最后，我会在布局的顶部写上“欢迎来到Grafpedia”。这是我的最终结果。

后记：优雅的木纹效果充分利用了图层样式。

原文转自万仓一黍博客园博客，原文链接：http://www.cnblogs.com/grenet/archive/2012/10/27/2732416.html，如需转载请自行联系原作者。