Photoshop设计简洁大方干净的网页界面设计教程

作者：情非得已 来源：优设 更新时间：2013-3-18

分享到 9

今天，我将介绍如何创建一个干净的网络布局、一个漂亮的背景。开门见山，咱直接切入正题吧，菇凉帅哥们有兴趣的话，可以打开PS跟着做哟。

开始设置的文件

打开一个新的文档：外形尺寸1200×1640像素，分辨率为72像素/英寸。

我们要创建基本的背景层。简单的在草稿上勾画出大概的布局与结构，可以看出页面最终的雏形，不过

在设计过程中，我们可能会添加新的元素。

草稿上可以看出，我们将创建5个分栏，在这里我们将添加的内容。 添加的第一层，这将是我们的背景，颜色#ededed。

在页面顶部绘制一个矩形命名为top1(使用矩形栅格化的图层(颜色#ededed)，并添加杂色(滤镜>杂色>添加杂色0.5 – 0.8;高斯分布和单色)。再次绘制矩形，颜色#cddcec)，栅格化的形状和添加杂色(滤镜>杂色>添加杂色0.5 – 0.8;高斯分布和单色)。添加一个渐变叠加(柔光，54%，从黑到白的90%，角度和缩放75%)。

接下来添加矩形(U)，在中间新建一个矩形(颜色为#608bb6，高度400像素左右)，设置混合模式为颜色加深，并填充为75%，然后添加一个白色的描边1像素(图层样式)。

最后的底部页脚添加一个矩形形状，使用相同的工具和色彩，但现在设置混合线性光，不透明度为70%。 下面的最终结果。

步骤2 – 背景

给我们的背景添加纹理。

添加一个新层(CTR + SHIFT + N)，使用选框工具在画布顶部添加一个1像素的白线。(仔细看下图顶部有条白线)