网站模板

点击下图查看网站模板

素材

• 矢量社区媒体图标（下载）
• 凌乱、自然灰褐色图案（下载）
• 高清花纹笔刷（下载）
• Mono图标（下载）

1、新建文档

打开photoshop，新建尺寸为1020*1180px的空白文档。

2、设置导航条背景

选取矩形选框工具（M），创建有整个画布宽的选区，高度不要太高，然后用深灰色（#393939）进行填充（cmd/ctrl+F5），如下所示：

复制（cmd/ctrl+J）刚新建的导航图层，并对其添加杂色滤镜（滤镜>杂色>添加杂色），如下设置：

然后更改图层混合模式为”叠加”，透明度下降到大约23%。

3、创建站点logo/名称

对于logo，我使用了粗斜样式的字体Georgia，用白色（#ffffff）编辑’Six’时，用米黄色（#F7E5C4）编辑’Studios’，对于图标，选用了Mono图标中的boxupload32图标，如下所示：

4、添加菜单

使用颜色（#DBD1BE）编辑激活时的菜单，正常状态的菜单使用颜色（#ABAAAA）。

为了让激活状态下的菜单更加醒目，选取圆角矩形工具（T）创建一个圆角矩形（圆角半径为5px，前景色为#464646）放置在菜单图层下方，如下所示：

，然后设置如下图层样式：

‘内阴影’/'描边’：

5、添加展示区背景

在布局头部，我们还要添加一个作品展示区，以幻灯片形式来播放图片，每张图片配有简单介绍和导航。在开始前，选取矩形选框工具（M）创建矩形，以颜色（#D3CAB8）进行填充。

下一步，下载凌乱、自然灰褐色图案（或其它图案）拖放到文档中，放在矩形图层上方。

接下来我们要遮住一些不需要的纹理，在图层面板选中矩形图层，按住cmd/ctrl键，点击缩略图，创建一个自动选区，然后选中纹理图层，在下拉菜单中点击”添加图层蒙版”，这样遮住了除选区外的所有区域，最后，撤消选区（ctrl+D），把纹理图层的透明度下降到35%。

6、添加网站介绍

使用水平字体工具（T），在展示区左侧添加网站文字说明，采用Helvetica 或Arial字体进行编辑，确保标题（颜色#FFFFFF）和内容（颜色#2A2A2A）文字在不同图层。

为了使标题更加炫目，按如下设置添加图层样式：

‘阴影’/'渐变叠加’：

接下来，创建”About us”的圆角按钮。再一次选取圆角矩形工具（U），设置半径5PX，文本颜色为#404040，同时在右边有一个箭头图标（Mono图标集中的circleright32），重设它的大小以匹配按钮。

在矩形图层上添加以下样式：

‘外发光’/'渐变叠加’：

最后一步是在按钮右边添加花纹，就是这微妙的设计元素增加了此设计的优雅度。下载并安装花纹笔刷（资源区的上方），先设置前景色为#343434，选取画笔工具（B），找到花纹笔刷，在画布上进行一次点击，然后把图层混合模式改为“强光”。

7、创建幻灯片区

选取圆角矩形工具（U），前景色为白色，半径为5PX，在展示区右侧生成一个圆角矩形。

设置此图层的透明度为15%，以显示背景图案，接着添加’阴影’的图层样式：

此刻，我们需要在幻灯片区域添加图片缩略图，你可以找一个网站截图或其它图片，放在白色圆角矩形上方。我们得把图片四角变成圆角，在图层面板，按住cmd/ctrl，点击白色圆角矩形的缩略图，创建一个自动选区，接着选择放图片的图层，去往菜单”选择>修改>收缩”，收缩10px，然后执行”选择>反选”（cmd/ctrl+shift+I）反选选区，最后执行”编辑>清除”。

接下来添加图片描述，在图层面板，按住cmd/ctrl，点击图片图层的缩略图，创建一个自动选区，新建图层，并以黑色填充选区，然后使用圆角矩形选框工具（M），选取新建的黑色矩形的上部分并删除。

降低图层透明度到75%，添加简单的文字说明

8、在展示区底部添加分隔线

像步骤2一样在展示区底部添加一条灰色、水平分隔线，不同在于还要添加’内阴影’的样式：

设计的主内容区的时间到了！

9、给主内容区添加背景

就像预览图一样，主内容区分布为三列，选取矩形选框工具（M），生成画布宽的选区，用颜色（#FBF5EA）进行填充。

主内容区的设计其实相当简单，但是要让人看出很简单也要花一定时间完成。我们将从左边开始，放置服务列表。

10、添加列标题

对于我们的列标题，从Mono图标挑选一个象征符号，并放在标题左边，使用字体”Georgia“和颜色（#323232）编辑标题文本。下一步，在文本底部添加弧线边界，这就要用到钢笔工具（P）了，像下图一样创建一条路径。

为了给路径描边，设置前景色为文本颜色（#323232），然后选择一个较硬的画笔工具，大小大约为3px。接着打开”路径”面板（窗口>路径），点击面板下方的”用画笔给路径描边”。

下面为曲线添加一点渐变，设置”渐变叠加”的图层样式：

复制曲线图层，离原图层下方4或5px处，降低透明度到24%。

11、为左栏添加内容

设置标题颜色为深灰（#323232），文本内容颜色为一种可读性的灰色（例如：#2A2A2A）。像创建”About us “一样创建”Read More”按钮，对于中间这行，我改变了颜色，一种纯灰色（#484848）用于激活状态下的颜色。

12、为中栏添加内容

像左栏一样，添加标题和图标（另外合适的图标）。使用圆角矩形工具（U），设置半径3px，前景色为白色，生成一小型的圆角矩形，在矩形下方添加一些文本和描述。

接着为圆角矩形设置图层样式：

‘外发光’/'描边’：

然后，在圆角矩形内添加与描述相配的图片。

13、为右栏添加内容

像左栏和中栏一样，添加标题和图标。对于未激活的链接，采用深灰色（#353535）编辑字体，对于活动状态的链接，采用白色字体，并且创建深灰色（#353535）圆角矩形背景，半径也是3px。

14、设计时事通讯窗口

选取圆角矩形工具（U），生成一个3px的圆角矩形，像第2步一样设置杂色滤镜。

使用字体Georgia Italic编辑标题，从Mono图标中选择一个信封的图标，给此图标设置了颜色（#F7E5C4）叠加，创建了一个圆角矩形选框，用来输入用户邮箱，以白色填充。

15、添加footer

一开始创建footer，就像创建header中的导航一样，只不过要比导航条高些。

接下来创建一些链接，选取圆角矩形选框工具（M），生成如下图一样的选框，以深灰色(#323232)进行填充，里面用白色文字填充。

然后把混合模式改成”弱光”，透明度降低到63%，以突出背景颜色。重复此流程，创建其它链接。

最后一件事，选择一些社区媒体图标添加到链接上方，选择站点logo和copyright放在footer右侧。

下载源文件

• PSD文件：clean_classy_webdesign_psd (ZIP, 3.17 MB)
• 网站模板：clean_classy_webdesign_template (ZIP, 0.41 MB)

Related posts:

1. photoshop教程–创建清新、色彩生动的网页布局（中）
2. photoshop教程–创建清新、色彩生动的网页布局（上）
3. photoshop教程–创建清新、色彩生动的网页布局（下）

最终效果图：

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

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

3.　在photoshop中打开在上篇中一开始要保存的第二张图片“像素化的蓝色矩形”，把图片移动到此文档中，并且覆盖蓝色矩形，同样也设置透明度为55%，命名为“bg3”。

4.　按住ctrl键，点击“bg4”中的矢量蒙版缩略图以选中此蒙版

5.　新建图层，放在“bg3”上方，命名为“bg2”，选取渐变工具（G），画一个颜色#56b8e5到透明的渐变，方向是从选区底部到选区头部，然后按ctrl+d撤消选区　

6、新建图层，放在图层“bg2”上方，命名为“bg1”，选取矩形选框工具（M），像下图一样创建选区，宽度为983px，高度43px     

7、选取渐变工具（G），画一个颜色#0f2b42到颜色#2a607f的渐变，方向是从选区底部到选区头部，然后按ctrl+d撤消选区

第二十二步：“注册”与“了解更多
1.新建组“注册按钮”，放在组“背景”上方，选取圆角矩形工具（U），设置半径2px，像下图一样新建圆角矩形（82*38），并设置如下图一样的图层样式（注意：shap2图层的透明度是100%） 

　2.  重复步驟1创建“了解更多”的按鈕，并且增加一层，添加箭头，选取自定义形状工具（U）中的第二个箭头形状，像下图一样创建箭头

第二十三步
1. 新建组，命名为“左箭头”，放在组“了解更多按钮” 上方，选取椭圆工具（U），新建颜色为#406F94的圆，并设置“内阴影”和“描边”的图层样式

2.　新建图层，选取自定义工具（U）中的箭头形状，创建白色箭头，并设置图层样式“阴影”，透明度为50%
 

　3. 重复步骤2，在右边也创建同样的箭头

第二十四步
1.　在组“案例”中新建组，命名为“图片”，在组里放置一张小图片，双击图层，设置如下图的图层样式“外发光”

2.　新建组，选取字体工具（T），在蓝色矩形左边添加文字说明（这个得自己发挥了），组命名为“文字”。

 第二十五步：创建内容区
1.　新建组，放在组“案例”下面，命名为“内容”，在此组里再新建一组“阴影”，选取矩形工具（U），创建一白色矩形（983*181），图层命名为“白色形状”，透明度为90%。
 

2.　像二十一步中的第4点一样，选中“白色形状”的图层蒙版，然后新建图层，命名为“头部阴影”，选取渐变工具（G），画一个颜色为#8f8f8f到透明的渐变，方向为选区的头部到选区的底部，设置图层透明度为50%，然后选取移动工具（V），按键盘上的向下的方向键两次

  

3.　新建图层，选取矩形选框工具（M）像下图一样新建选区（273*180）。选取渐变工具（G）画一个颜色#8f8f8f到透明的渐变，然后取消选区，以下图为参考。

4.　添加图层蒙版（图层>图层蒙版>显示全部），使用大一点的黑色软笔刷（我用的是27px），涂在阴影中间部分上面，设置图层透明度为30%，命名为“垂直阴影1”，复制（ctrl+j）图层“垂直阴影1”，移动至右边，重命名为“垂直阴影2”。　　

5.　选取线条工具（U），新建重1px，颜色为#aebcc7的水平线，将图层转换为智能对象（右击图层，在下拉菜单中选择“转换为智能对象”）图层命名为“水平线”。

6.　选取字体工具（T），编辑网站内容，您也可以使用图片或别的来替换

第二十六步：创建网站底部内容
1.　新建组“底部”，并新建图层，选取矩形选框工具（M），新建选区（982*88）。

2.　设置前景色为#555555，选择一大的软笔刷（我选的是100px），沿着选区头部边缘进行涂画，撤消选区，设置图层透明度为50%，并命名为“渐变”。

最终的“渐变”将是这个样子：

3.　新建图层，选择单行选框工具，新建一选区，并以白色填充。按ctrl+d撤消选区。转到菜单　图层>图层蒙版>显示所有，选取一大点的黑色软笔刷像下图一样遮住图层，以下图为参考。设置图层透明度为15%，命名为“直线”。

 
4.　添加底部文字说明。

这个大制作终于完功了，里面的字体设置什么的还需要各位看客们多担待！最终效果图：

参考上篇，中篇    下载PSD文件

Related posts:

1. photoshop教程–创建清新、色彩生动的网页布局（中）
2. photoshop教程–创建清新、色彩生动的网页布局（上）
3. photoshop教程–基本的网页布局设计

第十一步：编辑导航菜单

第十二步：创建分隔线

现在我们将在菜单栏中创建分隔线，新建图层，选取单列选框工具，并在菜单的布局上点击一下，选取矩形选框工具（M），并在选项栏上选择“交叉选区。

对新的选区以白色填充，最后按ctrl+d，取消选框。最终结果如下图：

第十三步：双击上步新建的图层，命名为“竖线1”，并进行如下图层样式的设置。

 

第十四步：按ctrl+j复制图层“竖线1”，重命名为“竖线2”。选取移动工具（V），点击键盘上的方向键，向右移动1px，并更改“渐变叠加”的设置。如下所示：

 

 您的图将会是这样：

 按住ctrl，选择“竖线1”和“竖线2”，转换为“智能对象”，新图层命名为“分隔线”。

 

第十五步：创建蓝色高光

1、新建图层，放置在“分隔线”下，选取矩形选框工具（M）创建像下图一样的选区

2、以颜色#35423e填充该选区，按ctrl+d撤消选框，右击，在下拉菜单中选择“转换为智能对象”

3、去往菜单　滤镜>模糊>高斯模糊，并设置半径为4px

4、再次 滤镜>杂色>添加杂色，数量为0.7%，属性为第一个选项，像第十步那样设置

5、设置图层透明度为60%，命名为“高光”

图片最终为：

第十六步：为图层“分隔线”创建图层蒙版

选定图层“分隔线”，转到菜单　图层>图层蒙版>显示所有，选择渐变工具（G），新建一个从黑到透明的渐变，方向是从上到中间。

第十七步：复制图层“分隔线”，“高光”

同时选中“分隔线”，“高光”这两个图层，使用移动工具（V），按住alt+shift，拖动两个图层中的对象至另一个菜单与菜单之间，这就相当于复制“分隔线”，“高光”的操作，重复拖动动作，根据您的菜单多少来复制

第十八步：为图层“分隔线”，“高光”编组

选择所有的图层“分隔线”，“高光”，按ctrl+g，进行编组，组命名为“分隔线”。

第十九步：为当前页面创建激活按钮

现在我们将为当前菜单页面创建一个激活按钮，来区分其它的菜单按钮。选取矩形工具（U）并像下图一样新建矩形，并把这图层放置在“菜单”图层的下方，双击图层，进行“渐变叠加”的设置，图层命名为“激活按钮”，设置透明度为50%。

效果图：

第二十步：创建搜索框

新建组，命名为“搜索”，放置在“导航”组上面。选取圆角矩形工具（U），设置半径3px，前景色为#104f59，创建圆角矩形，命名新的图层为“文本区域”，透明度为80%。

选取矩形工具，在“文本区域”右边创建一矩形，并如下图进行设置图层样式“渐变叠加”，然后右击图层，在下拉菜单中选择“创建快速蒙版”，层命名为“按钮”。

选取字体工具（T），使用白色，在“按钮”上书写“搜索”两字，图层透明度为75%。

选取线条工具（U），使用颜色#123036创建直线，图层命名为“直线”，并放置在“按钮”图层下方，把此直线移动在搜索框和按钮之间。

中篇到此为止，让我们一起期待下篇吧！

Related posts:

1. photoshop教程–基本的网页布局设计
2. photoshop教程–创建清新、色彩生动的网页布局（上）
3. photoshop教程–创建清新、色彩生动的网页布局（下）

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

以下是创建过程中所需的图片：

• 绿叶
• 像素化的蓝色矩形

第一步：新建文档

1200px * 750px，选择渐变工具（G），对背景图层从上（#792700）到下（#000000）新建渐变，如下图所示：

第二步：添加色彩

新建图层，选择笔刷工具（B），选取直径为300px的软笔刷，分别以红（#be4816）、黄（#c0952c）、蓝（#33afc6）三种颜色涂在背景层的上半部，图层命名为“颜色”。如下图所示：

第三步：添加纹理

打开一开始保存好的“绿叶”图片，使用移动工具（V），移动到当前文档内，右击新图层，选择“转换为智能对象”，然后转到菜单：滤镜>艺术化>胶片颗粒，滤镜>像素化>马赛克，参照下图的设置，最后设置此图层的“混合模式”为“差值”，透明度为30%，图层命名为：“纹理”。如下图所示：

第四步：为内容添加黑色背景

新建图层，选择圆角矩形工具（U），设置3px的半径，创建一个黑色圆角矩形框，双击图层，弹出“图层样式”对话框，如下图一样设置“阴影”，最后设置此图层的透明度为70%，图层命名为：“黑色形态”，如下图所示：

第五步：添加组管理图层

按住ctrl键，选择目前为止创建的所有图层，进行图层编组（ctrl+g），组命名为：背景，如下图所示。

第六步：创建更多组

第七步：创建logo和网站副标题

在“logo”的组里新建图层，选取字体工具（T），书写您的网站名字，颜色为#f4f4f4。双击图层，按照下图设置图层样式，“斜面与浮雕”，“外发光”，“渐变叠加”。然后再新建图层编辑网站副标题，颜色为#eeeeee。

第八步：创建”注册“，”登录“按钮

现在将在布局的右上角创建两个按钮。
新建组，命名为“注册｜登录”；选取圆角矩形工具（U），像我一样创建圆角矩形；双击形状图层，弹出图层样式对话框，如下图进行设置。
设置前景颜色为白色，用字体工具（T）在按钮上编写“注册｜登录”，设置字体层的透明度为75%。

第九步：创建1px高的蓝色水平线

新建组，命名为“导航”，新建图层，选取单行选框工具并在文档新建1px高的选区，以颜色#406f94进行填充，使用矩形选框工具（M）删除超出黑色矩形的选区，设置透明度为40%，层命名为“横线”。

第十步：给导航添加渐变

选取矩形选框工具（M）创建选区（提示：你可以使用标尺），然后使用渐变工具（G）从底部到头部画一个从#35423e到透明的渐变。按Ctrl+D撤消选区，右击图层，转换为“智能对象”，然后再转到菜单　滤镜>杂色>添加杂色，并按照下图进行设置。给此图层命名为“渐变”，且在渐变与横线之间留出1px的距离。

Related posts:

1. photoshop教程–创建清新、色彩生动的网页布局（中）
2. photoshop教程–创建清新、色彩生动的网页布局（下）
3. photoshop教程–基本的网页布局设计

photoshop企业网页设计现代产品主题

• 第一部分: photoshop企业网页设计现代产品主题
• 第二部分: 将现代产品主题企业网页由psd转换成XHTML/CSS模板

预览

以下是我们将要一些设计的页面预览，点击图片可以放大。

建立一个新的Photoshop文档

1 首先在Photoshop中新建一个文档（Ctrl+N），大小为1200 x 1200像素，背景设为透明。

设置头部背景

2 使用矩形选定工具在透明的背景上画出一个矩形，矩形大小：1200px ×120px

3 使用油漆桶工具（G）用任意颜色填充头部刚才选定区域。点开图层样式对话框，用以下设置来增加一个渐变叠加效果。

完了，应该出现以下效果：

创建内容部分的背景图层

4 现在我们将要创建图层内容区域的第二部分背景。把前景色设为#00315C，背景色设为#001B32。选择矩形框选定工具（M）选定剩下的透明图层；选定后，选择渐变工具（G）,然后设置渐变类型为径向渐变。

5 设定好渐变工具（G）后，从顶部的中间垂直的拖动到画布的4/1大小左右。

添加参考线

6 现在我们需要一些参考线保留出宽度为850px的中间内容部分。选择视图 > 新建参考线。在新建参考线对话框中输入175px，取向选择垂直。这样一个画布左边的参考线就做好了。

7 重复6的步骤，创建另外一条垂直参考线，不过这次输入1025px (175px + 850px = 1025px)。这样一个850px宽、居中的区域就做好了。

设计头部区域

8 选择横排文字工具（T），然后对其左边参考线边沿添加上页面标题和标语。

9 在标题文本图层下面创建一个新图层，选定矩形选框工具（M），在头部选取出一个区域。宽度必须填满1200px，高度大概在60px左右。

10 用白色（#FFFFFF）填充（G）选定区域，然后在图层面板中设置透明度为25%。效果如下。

创建导航

11 选择横排文字工具（T），字体大小设定为11-12px左右。然后在标题和标示右边加入导航文字；没菜单项之间留出等宽的边距。

12 在每个菜单项之间使用矩形选框工具（M）做一个1px宽的分割线；长度跨越整个头部。用#CECECE颜色填充（G）这1px的线条。效果如下图。

13 现在，我们在每个菜单项中加入鼠标悬停动态效果（hover）。我已经给其中一个菜单项加入颜色表示鼠标悬停时的效果。使用多边形套索工具（L）按住shift，创建一个三角形，以保证每条线都是直的。

14 用#00315C这个颜色填充选定的三角形区域

创建欢迎区域

15 选择横排文字工具（T）,加入一些欢迎标语；同样左边距紧贴左参考线，然后在上面的页面标题和下面的欢迎文本中留出一定的空间。文本下面加入4个蓝色的列表图标。这个图标是 Function Icon Set 里面的（文件名是circle_blue.png）。

16 在欢迎文本的右边将插入一个欢迎图片；我这里使用的是Six Revisions网站界面裁图。裁剪你的图片，去掉不需要的部分。图片准备好之后，通过编辑 > 变换 > 透视 改变图片的视角。

17 选择椭圆选框工具，然后在欢迎图片下方画一个椭圆。

18 用黑色（#000000）填充（G）椭圆选定区域。

19 然后设置区域图层透明度为35%。

20 然后使用滤镜 > 模糊 > 高斯模糊这个椭圆，设定模糊半径为1到2px。

21 把欢迎图片和下面的阴影再复制一份，然后把它们拖动到原图片的下面。

22 位置拖动好之后，使用高斯模糊下面的裁图，半径为1px。

创建水平3D分割线

23 选择矩形选框工具（M）层叠的创建两个1px的线条；宽度为850px，从左参考线到右参考线。你可以将两个线条放在同一个图层。

24 分别使用颜色#000D19和#003461填充这两个线条。

25 选择椭圆选框工具（M）然后在分割线上面画出一个椭圆。

26 使用黑色（#000000）填充（G）选定区域，加上2到3px的高斯模糊。然后使用矩形选框工具删掉分割线上半部分，这样就剩下了半个椭圆。

27 将这两个图层合并（Ctrl+E），然后添加一个图层蒙版（点击图层面板上的“添加图层蒙版”按钮）来合并图层。

28 使用渐变工具（G）,渐变类型为对称渐变，前景色设为白色（#FFFFFF）,背景色设置黑色（#000000）。

29 拖动对称渐变，从分割线中间向两边拖动，从而产生中间向两边淡入效果。

设计内容区域

30 选择横排文字工具（T）在3D分割线下方，右分割线的左边加入任意的文字标题和段落。

31 使用圆角矩形工具（U）在内容文本区域的左边创建一个圆角矩形；半径设为10px（默认情况下背景是10px）。

32 路径画好之后，选择钢笔工具（P），右击矩形内部，选择建立选区。

33 设置前景色为#00315C，背景色为#001B32 ，然后选择渐变工具（G），渐变类型为径向渐变。

34 从顶部把渐变拖动到中间，和我们绘制背景方法相同。效果如下图。

35 现在需要给圆角矩形图层加入投影、内阴影和描边的图层样式（双击图层面板上面的图层，打开图层样式对话框）。设置如下。

36 使用多边形套索工具（L），然后在矩形上面做一个三角形的选区。

37 剪切并复制选区到一个新图层，一般这样做将会丢失掉选取的图层样式，所以在这之前我们必须给右下角图层重复添加一次样式。

38 通过编辑 > 变换 > 旋转给边角图层翻转180度；

39 加入一些任意文字以完成内容框的绘制。

创建页脚区域

40 选择圆角矩形工具（U）在也叫拖动出一个圆角矩形。

41 使用任意颜色来填充这个圆角矩形选区，选区加入如下样式的渐变叠加效果。

42 最后，加上页脚信息就大功告成了。

完成

谢谢阅读本教程。下个教程中，我将教大家把该页面转成模板。
附：psd源文件下载

注：本web界面设计教程经译者tunpishuang同意转载，英文网站设计教程原地址，中文翻译原地址，第二部分中文教程点击进入译者网站浏览: 将小型、现代的产品主页由psd转换成XHTML/CSS模板。

Related posts:

1. photoshop教程–创建清新、色彩生动的网页布局（中）
2. photoshop制作一个专业的2.0网页布局
3. photoshop梦幻效果-天使之光教程之二

第一步当然是您创建一个新的文件。转到文件 >新建或者干脆按Ctrl +N.根据你自己的喜好选择你的大小，点击ok确定。
这里我们使用的大小为 600×147 pixels。

现在考虑您想要使用的背景和挑选出的两种颜色使用在您的背景中。两种蓝色被用在这里。我们的前景颜色设置为＃ 10365a和背景颜色为＃ 2070bf 。
然后选择渐变工具和挑选前景色和背景色、线性渐变。

现在简单的在图层上从上到下拖动渐变。

在你要放置导航链接的地方增加一个新层。
使用一个矩形选框工具 (  ) 并选择白色填充。

将这个图层的混合模式改为柔光，并将填充降低至25 ％ 。

现在在链接中间添加分隔符。创建一个新层，再次使用矩形选框工具，在这一层使用一个像素。请记住我们使用的的背景颜色？我们将使用相同的，只是在相反的顺序。 所以这个时候请将您的前景设置为＃ 2070bf和你的背景颜色为＃ 10365a。然后在渐变中使用前景色到背景色下，再次选择线性渐变，从上到下拖动渐变。这将是您的分隔符。

将这个层的混合模式改为柔光使它混合的更加好。

按下Ctrl+J 复制这个图层。根据你想要的导航链接数量来决定。然后简单的移动到合适的位置。

为了给导航条增加一些细节。创建一个新层使用矩形选框工具在两个分隔符之间创建选区。然后将给选区填充颜色。第一个颜色这里使用的是#60c100.

现在在每一个分隔符空间我们必须重复此步骤。为了确保你有相同的大小，每次简单重复的这一层，并移动到下一个空间。然后按Ctrl +单击在您的图层窗口的调色板小图片的前面层。这将选择长方形的选区。然后，只需使用油漆桶工具（ ） ，来填补其他颜色。这个时候所使用的颜色是＃ f80000 。

重复这一步，这里使用的颜色是 #feb70a。

这里再做一遍。最后一次我在这里用的颜色是 #d200ff. 当然如果你有更多的链接，分隔符越多你就简单的添加一些更多的颜色。

下一步是添加一个边框，这里要比我们的头部或导航条更多一些。因此,添加一个新的层,做到以下几点。
使用矩形选区工具在头部的底部作出选区。
用一个匹配你的背景与配色填补。
所以一个深蓝色的被用在这里(# 03346c)。

添加一个新层,拿出铅笔工具()。设置与你一些很配其他颜色的前景色。
我们被设置为浅蓝色(# 7dbfff)。然后得出一个像素线条的长方形正如我们创造的上一步一样。

按下Ctrl+J 复制这个图层，然后拖动它到顶部的导航条刚刚在你颜色盒子上。

下面处理文字。创建一个新层选择文字工具。挑选一个漂亮的字体和类型在你的站点标题的左边的空间键入标题。
被称为“Century Gothic”（一种字体）用在这里,应该是一个默认字体在windowsXp里。不管用什么你想要的颜色,纯白的使用在这里。

然后添加一个你想要的副标题。当然是在一个新层当中,使这个字体小一些。被称为的字体 ‘Silkscreen’ (ps字体下载 )
使用在这里。再一次，使用纯白色。

然后在一个新层上添加导航链接文字。再一次使用字体 ‘Silkscreen’ 纯白色。

最后的步骤将被添加图像代表链接。您可以自己创建他们,但也有很多网站你可以在那里下载一些好看的图片。
这里所有的图像来自 famfam.com .使用。
因此,首先在这里是首页图像。打开并粘贴到一个新层中。那么把它移动到位置上。

同样的方法处理搜索图标。

论坛图标

沟通图标。如果你有额外的或者其他的链接我想你会在那个网站上找到喜欢的图标。

现在你应该有一个漂亮的光滑的蓝色网页导航条。 

这个教程由 Sanity penguin所写，ps真功夫原创翻译，希望大家喜欢。

No related posts.