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

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

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

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

最终效果图：

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

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

接上篇　“photoshop教程–创建清新、色彩生动的网页布局（上）”
这篇的最终效果图：

第十一步：编辑导航菜单
选取字体工具（T），并在导航栏上编辑菜单，这里我应用的字体是Adobe仿宋体，然后双击字体图层，按下图一样设置图层样式。

此教程将教您如何用photoshop创建清新、色彩生动的网页布局。在此我也非常感谢来自ThemeForest原布局设计者Kuntiz，在他的允许下才能完成这篇教程。
以下是创建过程中所需的图片：

绿叶
像素化的蓝色矩形

这个Photoshop 网页设计的教程中，我们将学习设计一个整洁的具有现代气息的网站。这是设计和HTML/CSS模板转换系列教程的第一部分。