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

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

最终效果图：

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

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

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

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

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

绿叶
像素化的蓝色矩形

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

本实例ps教程 转载于www.sigtutorials.com 。ps真功夫原创翻译 转载请注明出处并标明链接多谢。ps教程简介：我们将学习制作一个光滑的ps网页导航条。
photoshop教程最终效果图