在这个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!”）
类别（本案例中，类别为“Photoshop design”）：
添加内容简介
27.添加简介文本，请参考下图：
28.在工具面板选择移动工具并在图层面板选择3个文字图层（按住Ctrl并单击图层来选中所有图层）。
29.对其应用按顶分布。
创建滑块控件
30.现在创建滑块控件。首先复制我们为导航创建的分隔线并移动到如图所示的位置，然后调整其大小（你可以使用自由变换）。我们将分隔线中的灰线加深，设其颜色值为#777575。
| 已投稿到： |
|
|---|
