在这个Photoshop网页设计教程中，我们将学习如何创建一个简约光滑且极具前瞻性的网站DEMO。我们将使用作为模板，可以很容易地对齐设计元素的布局。

预览：

创建一个新的Photoshop文档
1.我们将使用960网格系统（在下载）作为起始模板。下载后，重命名为960_grid_12_col.psd，然后隐藏其中名为12_col_grid的组。

创建背景：
2.首先，双击图层面板的背景层解除锁定，我们将其重命名为bg。

3.现在选择渐变工具，请将前景色设为＃efefef，将背景色设为＃cacaca。选择径向渐变。在画布上拖拽出如图所示的渐变：

页头部分的设计
4.我们在文档距离画布顶部50像素的地方添加一个水平方向的参考线。标记出页头部分的位置。

5.现在开始做网站名称和口号。选择文字工具，输入网站名称和口号。以下是我在DEMO中的字体设置：

“YourName”

　　*字体：Nilland（从下载）
　　*大小：33pt
　　*粗细：粗体
　　*反锯齿：平滑
　　*颜色：#525252

“some awesome slogan”

　　*字体：Arial
　　*大小：14pt
　　*粗细：普通
　　*反锯齿：平滑
　　*颜色：#207687

6.用参考线对齐左上角上的字体。

创建导航
7.选择文字工具，使用以下字体输入导航文字（首页、公司简介、服务、招商引资、联系方式）：

　　*字体：Arial
　　*大小：17pt
　　*粗细：普通
　　*反锯齿：平滑
　　*颜色：#525252

8.使用参考项，将导航链接设置成如下图所示的样子：

创建搜索栏
9.现在创建搜索栏的输入框。选择圆角矩形工具，设置半径为5px，在画布上拖拽出一个长155px，宽20px的圆角矩形，并移动到正确的位置。

10.双击圆角矩形，在图层样式面板中勾选内投影。其他设置如下图所示：

11.创建搜索按钮。创建一个长30px,高度（20px）及圆角半径（5px）与输入框相同的圆角矩形。

12.在其图层样式面板中勾选渐变叠加，将渐变样式设置为垂直，左边的颜色浮标设为#2fa9c1，右边的颜色浮标设置为#207687。

13.然后用文字工具在输入框中添加白色的“search”文本。

14.使用自定义形状工具，创建一个白色的箭头，并调整的搜索按钮中心位置。

现在搜索栏看起来应该是这样：

15.我们进入下一个步骤，确保文件结构的正确。一下是我的图层面板截图，我采用的是可修改结构：

创建分割线
16.使用直线工具，创建两条挨在一起1px的直线，颜色值如图所示：

添加子菜单
17.用文字工具按以下设置输入子菜单：

　　*字体：Arial
　　*大小：17pt
　　*粗细：普通
　　*反锯齿：平滑
　　*颜色：#787878

18.请确保在分割线两端的文字对齐。看起来应该是下图这个样子：

创建特色版块
19.现在我们创建特色版块的背景，用圆角矩形工具，创建一个宽335px，高128px，圆角半径为5px的圆角矩形。

20.在图层样式中选择线性渐变，修改渐变颜色。左侧浮标设为#31aeca，右侧浮标设为#2b9ab2。

21.重命名这个新图层为photo_holder。

22.让我们通过文件/打开,添加一张图片给特色版块。

23.确保该图片位于photo_holder图层的上方。右键单击该图层，选择创建剪贴蒙版。

24.使用自由变换工具将图片修改为适合的大小。确保图片同特色版块背景对齐。

添加一些网站内容
25.让我们给这个设计添加一些内容，但在此之前，我们必须为内容设置区域。要做到这一点，请如下图那样添加两个水平参考线。

添加标题和类别


26.标题和类别使用以下设置。

标题（本案例中，标题为“Handstand!”）

    * 字体：Arial
    * 大小：20pt
    * 粗细：普通
    * 反锯齿：平滑
    * 颜色：＃2197b1

类别（本案例中，类别为“Photoshop design”）：

    * 字体：宋体
    * 大小：17pt
    * 粗细：一般
    * 反锯齿：平滑
    * 颜色：＃313131

添加内容简介
27.添加简介文本，请参考下图：

28.在工具面板选择移动工具并在图层面板选择3个文字图层（按住Ctrl并单击图层来选中所有图层）。

29.对其应用按顶分布。

创建滑块控件
30.现在创建滑块控件。首先复制我们为导航创建的分隔线并移动到如图所示的位置，然后调整其大小（你可以使用自由变换）。我们将分隔线中的灰线加深，设其颜色值为#777575。