PS网页教程：使用Photoshop设计网页布局

这篇Photoshop网页设计教程将展示出我们的设计秘密。好了二话不说，让我们开始这一步步指导大家如何在Photoshop中设计网页。这篇 Photoshop Web界面教程分为以下几个部分：背景：header部分、body部分、footer部分。下面是效果图预览：

图01

　　背景

　　第一步：创建一个画布

　　首先，打开photoshop创建一个新的项目。你可以点击文件>新建或按下CTRL+N快捷键来创建。我们选择一个普通的画布大小 1000×900，当然这些设置可以在后期增加。

图01

　　第二步：应用渐变

　　既然我们的画布已经创建了，是时候开始背景的设计了。创建一个新层（快捷键CTRL+SHIFT+N）。接着给这个图层从左往右添加渐变前景色 设置为#edd8af背景色为

图02

　　#ede4c9.这个颜色用来表示盒子的颜色。

　　第三步：添加纹理

　　我们想要BoxedArt背景设计看起来像厚纸板的效果。创建另一个新层，颜色填充为#bcb6a9。下一步应用胶片颗粒艺术效果设置参数如 下。接着为了使它看起来粗糙一点，我们给它应用一点高斯模糊效果。

图03

图04

图05

　　以下就是我们应用这些效果后背景图层看起来的效果。

图06

图07

　　HEADER部分

　　第四步：导航条设计

　　顶部的导航区域部分我们放置了一条条状的带子。我们可以看到这种带状风格在很多网站都有应用，不过我们这里用到的有一点不同。由于 BoxedArt想要将这个设计看起来像用来发送邮件的盒子。为了创建这个导航条我们需要从bigstockphotos.com上下载一个带状的图片， 使用自由变换工具（在编辑菜单下选择自由变换或者快捷键CTRL+T）沿着顶部的区域伸展开来。接下来创建透明效果我们要把图层样式设置为线性加深。下面 就是效果：