利用Photoshop设计一个温馨的便笺式网页

BODY 部分

第十一步卷曲胶带纸标题

我们转到body的内容部分。在这个设计中，我们要创建2栏和一些图标。我们使用的是已经有的图标因为我们喜欢这种手写效果包括Handy Icons and Sketchy icons.。在body开始的区域我们要一个标题栏用来罗列我们网站的内容。我们把这个header部分做成卷曲效果。至于说到透明胶带我们使用的来自 bigstockphoto 的图片。为了增加胶带的深度，我使用矩形选框工具来选择胶带的一些区域。在选中选区后我们复制这个图层按下ALT+SHIFT向左边移动，然后在向右移动一下使它看起来显得长一些。为了避免缝隙的产生我们使用图章工具里拼合这些缝隙。可以查看下面的效果。

第十二步预览下的小图标

BoxedArt网站的内容区域包含很多网页模板的预览。创建这种效果我们需要选中矩形选框工具创建一个小的矩形，然后使用颜色#123057填充。 这些按钮我们只要复制第一个图层，移动它到第一个图层下面，设置这个图层的透明度这里我们设置的为40%。重复同样的步骤处理余下的按钮。

第十三步使用针脚线来分开这些区域

为了分开这些主要的分类，为了创建这些虚线我们可以文字工具角度为90，把这些图层的样式设置为叠加，为了使这些显眼点我们只需复制这个图层2-3次至于颜色多深取决于你自己。

第十四步填充额外的内容

添加剩下的内容就非常简单了，我们只需使用直线工具来分开每个部分，在添加些图标和文字，这里我们用到的是一种干净的字体Helvetica Condensed,。下图就是body部分的整体效果了。

第十五步—底部广告部分

我们已经到了底部放置广告部分了，这里的带状条将会再一次应用起来，使用先前有的图片作为起点，下一步，我们要使用圆角矩形工具，前景色设置为白色半径为5px。接着我们需要在设置一些小的圆角矩形，颜色设置为#f8f7f3边框用深灰。你可以在下图的图层样式中设置边框（就是一种描边效果）。

这就是我们完成后创建的效果

现在让我们来添加标题和广告到每个盒子中，效果如下图：

第十六步 公告部分

公告部分我们采取的是和header部分相似蒙板的方法，当然还有订阅新闻通讯等区域也是这样的方法，就像纸张粘上去的一样。首先我们给 header部分添加一种厚纸张效果，这个和body部分的方法基本一样。至于内容部分，选中矩形选框工具在右下角绘制小盒子颜色填充为#f9e5a6。完成按下CTRL-D取消选区，在选择加深工具，笔刷大小设置为35pixels加深棕色盒子的边角区域就像下图所示

最后我们把图层的不透明度设置为60%再双击图层在图层样式中添加一些阴影效果，参数设置如下图，然后在添加一些内容。

完成后的效果很不错哦

FOOTER部分

第十七步网页底部

到了我们创建底部的部分了，首先我们使用矩形选框工具，在页面上选择下图这样一个区域，使用颜色#462d0f填充，选择直线工具绘制一条直线颜色设置为#a05d18。

到了底部的分类部分了，我们要又一次绘制一个大的选框，颜色填充为#472a0b ，图层的不透明度度设置为78%，接着创建另一个图层颜色填充为#fffcd1。下一步添加胶片颗粒效果最后把图层的不透明度设置为30%图层样式为正片叠底。

完成后你应该看到的样子

最后我们只需重复我们在footer部分的操作或者复制图层把它移到底部，这样你就可以添加内容了。看下下面的预览图，是否有些启示列，希望你喜欢。

恭喜！你已经圆满完成这个教程我们在这个BoxedArt 网站设计中也学到一些有用的photoshop技巧知识。

原英文教程网址：http://blog.boxedart.com/network-updates/boxedart/how-it-was-made-boxedart-website-design-tutorial/

(责任编辑：PS家园网)