作者：Fabio

在这个教程中，我会教给你一些简单的方法，使用渐变和图层样式在网页设计中创建微妙的3D效果。

第1步

创建一个1000X750像素大小的新文档。在背景图层上双击，勾选颜色叠加，选择深褐色。

第2步

在文件中打开尺子（视图>尺子），如下图添加一些参考线。在30像素和250像素处分别创建2条水平参考线。在100像素和900像素处创建2条垂直参考线。

第3步

使用矩形工具（U）创建一个矩形。以参考线作为参考。将图层命名为”header”。

第4步

以黑色为前景色，使用椭圆形工具创建一个椭圆形作为阴影。如下图那样让其比白色矩形高一些。将图层命名为”shadow”，放置于”header”图层之下。之后，将它转换为”Smart Fliters”，应用高斯模糊并将不透明度降低为60%。（译者注：画椭圆形需要注意的是上下不要超出矩形太多，这样使得阴影更加真实。另外，经过我的操作，高斯模糊的值使用7.0比较合适。）

第5步

选择”header”图层，双击打开图层样式对话框。选择渐变叠加，将渐变样式设置为径向，颜色我使用了深红色。

第6步

接下来选择线条工具（U），从header的渐变中选择一种较浅的颜色，画出一条线。接着选择黑色，在红色线条上方1个像素的地方画出另外一条线。将这两条线放入一个图层组中，将其命名为”vDivider”。

选择图层>图层蒙板>Reveal All。使用渐变工具，选择一个黑色到白色的径向渐变，给图层组应用一个蒙板。从图层组的中间开始应用渐变。

第7步

使用水平文字工具（T）创建出菜单。给文字使用白色。选择所有的链接，将它们放入一组中。将图层组命名为”White Links”。

将图层组复制一遍，放置于白色链接的下方。将文字颜色更改为黑色，图层组向上和向左分别移动1个像素。这样会创建出非常漂亮的3D效果，就像我们在做线条时那样。

第8步

重复第6步，但是这次给链接创建垂直分割线。使用线条工具画出一条红线，然后向左移动1个像素划出一条黑线。将它们放入一组，复制5次。如下图：

第9步

选择所有线条图层组，放入一个图层组中。将图层组命名为”hDividers”。之后应用图层蒙板，选择图层>图层蒙板>Reveal all，但是这次使用线性。

第10步

打开图案文件，或者使用任何你喜欢的图案。全选然后应用编辑>自定义图案，将其命名为”WebPattern”。

将”header layer”复制一遍，将其命名为”pattern”。打开它的图层样式，取消渐变叠加，使用图案叠加。选择我们刚才创建的”WebPattern”图案，将图层混合模式更改为颜色叠加。

之后给图案图层应用图层蒙板，使用径向渐变。

第11步

现在我们就可以添加logo和勺子图案了。键入PSDTUTS作为文字，给PSD选择一款较粗的字体，给TUTS选择一款较细的字体。打开图层样式，应用投影，渐变叠加以及描边。这样会创建出常见而漂亮的效果。

结论

当我们做网页设计时，我们需要考虑到文件的大小，浏览器的兼容性以及许多其他的问题。有时候一些很小的细节，比如细微的渐变或者两种颜色的边框可以创建出非常漂亮的视觉效果和独特的样式。从而避免了一些hacks和不断的调整。

原文：Creating A Cool 3D Web Design Effect

【题外话：如果你喜欢这篇文章的话，可以直接订阅飞鱼的声纳的RSS源，在打开的页面中点击鲜果订阅、抓虾订阅以及其它任何你正在使用的在线订阅工具，如果你还没有在线阅读器的话，为了提高你的阅读效率，建议你还是注册一个的好！】