经过HiZhen 站长的允许，ps真功夫全文转载这篇网页设计教程。原始出处：如何制作一个专业的2.0网页布局 文章出处：HiZhen.cn 英文原文：http://psd.tutsplus.com/tutorials/interface-tutorials/create-a- professional-web-2-0-layout/

在这个photoshop网页设计教程中我们将要学习怎么制作一个专业网站的2.0布局，以前我们学习了那么多的photoshop教程，似乎都有些长，那是因为这些教程都是非常详细。我保证只要你跟着去做就会发现很简单，你所要做的只是去试一试。

在这篇网页设计教程中，你将学习如何设计优雅并专业的网页布局，我们将运用各种photoshop技巧，依靠图形工具和图层样式等基本操作来实现此布局。作为奖励，在教程结束后附有HTML/CSS/JavaScript的网站模板，完全免费下载。

继上篇”碳纤维风格的插入式导航菜单“，Richard Carpenter把菜单图片转化为CSS/HTML文档了。我们就一起接着学习吧！在我们开始切割图片之前，先在本地web服务器上布署文件，创建文件夹，在新建的文件夹中新建空白HTML文件”index.html”，空白CSS文件”styles.css”，styles.css放在另一个文件夹”stylesheets”中，最后再新建文件夹”images”存放图片。

这是HV-Designs的设计者Richard Carpenter 应HV-Designs读者的设计作品。且看作者如何将一个flash导航一步步用HTML代码来表现，当然首先需要在photoshop中设计出来，那么就请跟随我们进入今天的photoshop导航条教程—碳纤维风格的插入式导航菜单。

这是HV-Designs的设计者Richard Carpenter 的网页设计作品。今天的布局设计是以黑色为主菜，配菜是红与白，听起来是不是有些纳闷，那么请往下看，作者是如何打造的，作者将红色运用的还是蛮到位的。

接上篇“pphotoshop教程–创建清新、色彩生动的网页布局（中）”

最终效果图：

第二十一步：新建蓝色矩形

在组“导航”下新建组（图层>新建>组），组命名为“案例”，再新建组放置在“案例”中，并命名为“背景”
选取矩形工具（U），颜色设置为#219aad，创建宽度为983px，高度为273px的蓝色矩形，（提示：打开(按F8）信息面板，查看宽度和高度），设置此图层的透明度为55%，命名为“bg4”