网站模板

点击下图查看网站模板

素材

• 矢量社区媒体图标（下载）
• 凌乱、自然灰褐色图案（下载）
• 高清花纹笔刷（下载）
• 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教程–创建清新、色彩生动的网页布局（下）

查看CSS/HTML完整版，请点击这里：

布署文件

在我们开始切割图片之前，先在本地web服务器上布署文件，创建文件夹，在新建的文件夹中新建空白HTML文件”index.html”，空白CSS文件”styles.css”，styles.css放在另一个文件夹”stylesheets”中，最后再新建文件夹”images”存放图片。

创建HTML元素

用代码编辑器打开html文件，在标签”BODY”内新建DIV，设置ID属性为”container”，此DIV将是所有元素的容器，代码如下：

在”container “DIV内创建另外一个DIV，ID属性为”nav”，是包含所有导航元素的容器，代码如下：

在”nav”DIV内创建一个简单的UL无序列表，设置UL的class属性为”navigation”，每个列表元素（LI）也设置不同的class属性，根据class属性来设置LI的样式。代码如下：

以上是主要的HTML代码，接下来开始分割导航图片。

准备导航图片

不管你相不相信，我们只需要一张大图片，呈现正常和激活的状态，然后巧用CSS改变背景图片位置，这种技术称为”样式表贴图定位（CSS Sprites）“。

这么cool的技术的目的就是通过整合图片（只要加载一次图片，在激活状态下运行也是正常的），减少对服务器的请求次数，提高页面加载速度。整个图片大小是80kb。图片如下：

在photoshop中打开PSD文件，选取”矩形选框”工具，选中整个导航。

然后去往菜单”图像>裁剪”，裁剪后，你将注意到画布变短了，所以要增加画布高度，记住当前画布的高度，乘以2，画布高度将是当前画布的一倍。我的179px，增加一倍后是358px，去往菜单”图像>画布大小”。如下图进行设置：

效果如下：

复制导航菜单

在复制之前，移除激活状态效果。

选择所有导航图层并进行复制，选中复制的图层，垂直往下移，位于原图的正下方，保证两图之间没有缝隙。如下图所示：

上方的导航是浏览器一加载的正常状态，下方的是鼠标激活的状态，所以要给下方的每个按钮增加激活的效果，在此过程中不要移动按钮文字和球体。浏览器会因为一小点的移动而失去原有的效果。

在保存图片之前，移除背景图层，这样两个导航的背景层是透明的，把图片”navigation.png”保存到文件夹”images”中。同时我们还要保存一张拉丝金属背景图”bg.gif”到”images”中。

CSS样式设置

打开”styles.css”，开始编辑HTML元素body和container DIV的样式，代码如下：

对于body，只是简单的增加背景图片，并重复出现。对于container，设置margin为auto，是能让导航图片居中显示，宽度正是导航图片的宽度。

接下来设置nav DIV的样式，代码如下：

我们必须意识到nav DIV的高度和宽度都是固定的，正是导航图片的高度和宽度，而且文本要缩进到-9999px，这样是为了隐藏文本。

接下来设置每个无序列表LI的样式：

背景图片都是一样的，但是宽度和位置不一样。宽度可以在photoshop中测量出来，如下所示：

最后设置LI元素在激活状态下的CSS样式：同样也是要调整背景图的位置。

好了，关于代码就写在这了。当然还有其它方式来实现这种效果，需要各位多多实践！

Related posts:

1. 碳纤维风格的插入式导航菜单

最终图片预览：

第一步：新建文档　宽1400px，高650px。使用以下渐变（#474747–>#0c0c0c）填充背景图层：

第二步：在背景图层上方新建一命名为“高光顶部”的图层，选取一大点(1000px)的白色软笔刷，单击画布的顶部中心地区。

创建另一图层，名为“高光底部”，使用上一步中相似的笔刷(这次我用的是400px大小)，单击画布中心，自由变换（ctrl+t）它形成透视。

到目前为止，效果图为：

第三步：编辑字体在上步的图层上，推荐使用大而粗的字体。

并设置如下的图层样式：

阴影：

斜面与浮雕：

描边：

效果如下：

为了增加字体厚度，复制字体图层，并设置透明度大概为20%，并向左移动一点

第四步：现在开始新建一个简单的画笔，新建文档（大小为200px*200px）,背景颜色为白色，选取多边形工具（U），画一个像下图一样的的图形（使用自由变换中的扭曲选项来调整图形）

所使用的多边形工具设置如下图：

图形：

重要：图形画好后，确保栅格化图层（右击图形图层，在下拉菜单中选择“栅格化图层”），使背景为透明。

完成上述步骤后，去往菜单“编辑”->自定义画笔预设，在弹出的对话框中，输入画笔名称，点击“确定”后，在画笔面板中您将看到新建的画笔。

第五步：回到原来的文档，选择新建的画笔，进行如下图一样的设置

形状动态：

散布：

并且勾选“喷枪”和“平滑”。

在字体图层下方新建图层，运用刚设置的动态画笔，像下图一样画些随机图案

第六步：现在让我们增添点效果，在字体上增加些云彩，因而在字体图层上方新建图层“云”，通过云彩滤镜（“滤镜｜渲染｜云彩”，设置前景色为黑灰色，背景色为黑色）在文字中渲染些云彩。

在渲染云彩之前，用套索工具选取文字轮廓（设置羽化半径为20px），然后在选区中进行渲染。

你将得到如下效果：

改变“云”图层的混合模式为“滤色”，将会是如下效果：

也可以复制“云”图层，改变大小，如下图一样移动复制图层：

重设大小：

复制：

第七步：为了给字体增加更好的阴影效果，这里有一个快捷的方法：在原来字体层上方新建一图层，并设置混合模式为“亮光”，选取软笔刷，像下图一样填充颜色

增加“黑白”调整图层，位于所有图层上方，像下图一样进行调整，直到字体底部有阴影

效果图：

在“黑白”调整图层上创建新的图层，设置新图层的混合模式为“颜色”，并如下图一样画些颜色

第八步：现在终于来到这篇教程的最好的部分了，添加滤镜效果！首先拼合图层（“图层｜拼合图层”），然后复制背景图层，给复制的图层添加“减少杂色”（滤镜｜杂色｜减少杂色）

字体将变得清晰，整体图像更加锐利

再一次复制锐化的图层，增加“动感模糊”（滤镜｜模糊｜动感模糊），设置和效果如下：

把“模糊”图层的混合模式改为“强光”，用橡皮擦工具擦掉字体上的模糊部分（不想让字体变得很模糊）

第九步：回到锐化字体的图层，再一次复制该图层，拖动到最上方，添加网状滤镜（滤镜｜素描｜网状）

效果图：

把混合模式改为“颜色减淡”

或者：去往像qbrushes.net这类网站找些看起来脏的画笔预设，然后创建新图层，混合模式为“叠加”。这是我的效果：

第十步：我们几乎完成这个作品！最后的扫尾工作了。在所有图层上新建图层，再一次渲染云彩，设置混合模式为“柔光”，效果图为：

最后我还添加两个“色彩平衡”的调整图层：

最终效果图：

结束了！总结：尝试不同图层混合模式，体会它们不同效果，有时会给您意料之外的惊喜哦！

No related posts.

第十一步：编辑导航菜单

第十二步：创建分隔线

现在我们将在菜单栏中创建分隔线，新建图层，选取单列选框工具，并在菜单的布局上点击一下，选取矩形选框工具（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教程–创建清新、色彩生动的网页布局（下）

Related posts:

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

Boxed Art网站设计教程（已翻译 注Boxed Art是一个真实的网页教程网站）

学习如何使用photoshop设计一个好看的网页

Boxed Art网站设计教程

抽象发光物体制作教程 (已翻译)

这个教程将教你如何设计一个抽象物体发光效果。

* * * * *

Texture Layer Blending纹理图层混合教程

学习如何在photoshop中将纹理混合到相片之中。

设计杂志类型的wordpress主题

使用photoshop从头开始设计一个杂志类型的wordpress主题。

* * * * *

Sleek Web Portfolio圆滑作品集网页设计教程

学习如何在photoshop中创建鲜亮的作品集型网页。

* * * * *

电影风格的日落效果

是否想过如何创建一个电影风格的日落效果？这个教程如何使用photoshop将处理这种悉尼日落效果。

光线效果基础教程

这个教程将教你使用photoshop创建基本的光线效果的基础操作。

鲜花文字壁纸效果

学习如何使用photoshop创建这种鲜花文字壁纸效果。

创意设计工作室网页设计教程

Grafpedia教我们如何设计一个古典漂亮的设计工作室网页设计教程。

动物国王照片处理教程

Tutorial 9 给我们提供了另一个令人惊奇的教程。这个教程我们将学到如何将人像处理成动物国王（不是恶搞哦）。

矢量元素飞溅效果

学习如何在photoshop中创建一个矢量元素飞溅的效果。这个看起来也不错。

高空滑雪插画教程

PSD Tuts+ 教我们如何创建一个高空滑雪插画教程。我想我们很多人都会从中受益学到不少效果的处理方法。

网页 header部分设计教程

完全使用photoshop来设计一个网页的header部分。

制作印刷文字复古的镂空人脸 (已翻译)

PSD Tuts 教你如何使用photoshop制作印刷文字复古的镂空人脸

Blog Layout博客界面设计教程

跟着PSD Vibe学习如何设计简单的2栏布局的博客界面。

Print Brochure印刷小册子效果

PSD Tuts+将教给我们如何设计一个印刷小册子完全可以为我所用用到实践中。

Web 界面设计

Tutorial9也有一个使用photoshop设计公司网页的教程分享给大家，顶之。

photoshop文字工具详解

这里将教大家如何在photoshop中文字工具使用详解。

用Photoshop伪造3D效果

跟随 WebDesignerMag学习伪造3D效果。.

将纹理应用于粗糙的表面（已更新）

这里将大家一个相当不粗的教程教大家如何将纹理应用于粗糙不平整的表面。

photoshop打造抽象花纹绽放效果 （已翻译）

Tutorial 9 教大家使用photoshop打造抽象花纹绽放效果

使用手写板强化照片效果

这个教程将教你在photoshop如何使用手写板强化照片的效果。

激情粉红豹子海报

GoMediaZine 写了一篇不错的设计激情粉红豹子海报的教程。

文字印刷壁纸教程

Tutorial9 也有另一个不错的教程。这次你可以学到如何创建文字印刷效果海报。

古典风格的旅行者日记

Abduzeedo 发表过一个教大家创建具有古典风格的旅行者日志，看起来非常具有真实感。

钻石广告海报设计教程

学习如何在photoshop中创建钻石广告海报，这个教程包括了一些很酷和有趣的效果。

战士天使插画教程

学会如何将一张普通的照片创建这种漂亮独特的战士天使插画效果。

文字笔迹效果

是否想过在photoshop创建一种漂亮有趣的文字效果？Adbuzeedo 发表了一个教你如何设计这种令人惊讶的文字笔迹效果。

一个网页界面五种效果

PSD Tuts+ 发表了一篇如何修改同样的web界面5次来创造出不同的设计效果。

火鱼

看起来想著名的火狐浏览器要一个新的吉祥物。学习如何创建FIREFOX的火鱼版本。

好了这些2009年度TOP30佳photoshop精品教程就介绍完了，接下来的时间ps真功夫将会翻译其中的教程，欢迎志同道合的朋友加入我们的翻译中，大家也可以选择你所喜欢的教程留言，我们会把大家都比较喜欢的先翻译一下。

Related posts:

1. photoshop设计电影海报效果
2. 给你灵感主题教程—简单几步教你制作植物攀爬到建筑上