今天我们将在Adobe Photoshop中设计一个时尚的商业模板。该模板包含页眉（header）、图片轮换、服务区域、视频，关于我们、页脚(footer)等内容。通过本教程，结合图案、纹理、颜色等元素，轻松几步即可制作出3D效果的界面。

下图是今天我们将要制作的模板，点击可以全屏预览。

本教程需用到的资源

· 背景纹理

· 用户界面元素

· 社交网站图标

· 图标

· 秘鲁AtixVector的插画作品

第一步：创建文档

在Photoshop中创建一个1400像素x1700像素的文档。

标尺工具在本教程中非常有用，使用之前要确保标尺和参考线已经显示

· 标尺快捷键：Ctrl+R

· 参考线快捷键：Ctrl + ;

使用标尺工具时，信息面板也非常重要，用标尺进行测量时，相关信息会先在在信息面板。如果没有显示，你可以到窗口（Windows）勾选上信息（Info）这一选项。

站点的内容区域的总宽度为960像素。所以我们先创建第一条参考线，进入到视图（View）中的选择新建参考线（New Guide），设置值为220像素，重复步骤将值改为1180像素。这样可保证站点内容区域居于整个画布中央（译者注：即左右各为220像素）

第二步：为Header和Slider创建背景

我们要让背景表面呈现出3D效果，以放置幻灯片展示区。顶部安放的是网站标志，导航条和RSS订阅图标。

使用矩形工具（U）创建一个960像素的，颜色为#092f56的矩形。接下来，用标尺工具从该矩形的底部拉一条距离（该矩形）顶部为140像素的水平参考线。

添加一条颜色为#062340，大小1像素的分割线，记住，只有该分割线在横向参考线的上方，距离为1像素。

用矩形选取工具（M）创建一个图示选区。设置前景色为#000，然后选择线性渐变（Linear Gradient）前景色到透明填充该选区。设置图层样式为正片叠底，不透明度为30%。

用矩形工具（U）创建一个45像素的矩形，放在图示位置。

应用图层选项

投影颜色：#000

内阴影（内阴影颜色）颜色：#0f3b6

渐变叠加：使用线性渐变拉渐变色：#051f3a， #082c50

描边颜色： #06213a

效果

接下来，使用已经下载的背景纹理。选择Paper 9放到图示的画布位置。

将图层混合模式设为正片叠底（Multiply），不透明度设为30%。待我们制作好Header和Slider之后，会为背景增加高光效果。

第三步：制作Header

页面包含标志，导航和RSS订阅。

网站Logo

我使用的字体是Snickles，可在Font Squirrel中找到。按照以下的字体设置键入网站名字。

字体设置

字体名：Snickles

字体样式：正常

字体大小：60pt

注意：网站的标志距离顶部为75像素。

应用图层样式

投影颜色：#000

内阴影颜色：#fff

渐变叠加：#c0c0c0， #ffffff

效果

导航条制作

绘制一个580像素 x 50像素，半径为20像素的圆角矩形，与顶部距离为75像素，如下图所示：

应用图层样式

投影颜色：#000

内阴影： #fff

渐变叠加颜色：#fea201， #fccf6a

效果

用文本工具在导航条上分别写上Home， Blog， About Us， Free Consultation和Contact Us。 各个链接之间的距离为41像素，

字体设置

字体名： Helvetica Neue

字体样式： Roman

字体大小： 12pt

字体颜色： #fff（Home的颜色）， #ac5b00（其余链接的颜色）

Home文本层与其它链接有所不同，先复制一个图层，将其放在原始文本层下，用键盘上的移动键轻微向上移动1像素，将字体的颜色改变成#d38904。其它的链接放在原始文本层之下，下移1像素的距离，并将颜色变为#ffe91e。这下，各个链接看起来有浮雕效果了。

接下来使用直线工具在每个链接之间添加分割线，分割线颜色为#fee79e，大小1像素，放置在图示位置。

在所有文字图层之下，创建一个图层，画一个70像素 x 30像素，颜色为#ee9e0d的圆角矩形，放在图示位置。

应用图层样式

投影颜色： #fff

内阴影颜色： #000

效果

RSS订阅源

下载RSS订阅按钮，放置在图示位置，并添加上图示文字：Signup To Newsletter

字体设置

字体名： Arial

字体样式： Regular

字体大小： 12pt

字体颜色： #fff

应用图层样式

投影颜色： #000

内阴影颜色： #fff

渐变叠加颜色： #f38600， #fed676

效果

第四步：Slider的制作

Slider包含文字标题和描述，按钮，和浏览器显示

文字标题和描述

用以下字体格式写上文本内容。

标题

使用文字工具

字体名：Helvetica Neue

字体样式：Condensed

字体大小：24pt

字体颜色： #fff

描述部分

字体名：： Arial

字体样式：Regular

字体大小：12pt

字体颜色： #dddddd

按钮

使用矩形工具创建一个150像素 x 35像素的图形

应用图层样式

投影颜色： #000

内阴影颜色： #fff

渐变叠加颜色： #f38600， #fed676

效果

在按钮上写上内容：View Details

描述部分字体设置

字体名： Helvetica Neue

字体样式： Roman

字体大小： 14pt

字体颜色： #fff， #02b0f3

效果

Display

首先用矩形工具创建一个450像素 x 250像素的形状。

再用圆角矩形工具创建一个半径为5像素，大小为450像素 x 20像素的图形，叠放在之前的矩形上方，如图所示。

设置高光效果

选择减淡工具，并将曝光度设为10%，减淡区域大小为200像素。

复制形状图层，并进行栅格化。用减淡工具涂抹图示区域。

效果

第五步：Consult Area制作

新创建一个大小为15像素 x 15像素的透明文档。用铅笔工具创建下图所见的样式。

进入编辑，选择定义图案，命名为zigzag。接下来创建一个150像素的矩形。选择油漆桶工具，从下拉列表中将前景选项变为图案选项。在该图形的底部，创建一个选取，用事先制作的图案进行填充。

应用图层样式

投影颜色： #bfbfbf

渐变叠加颜色： #f5f4f4， #fdfdfd

效果

用文本工具添加一段文字

字体设置

字体名： Helvetica Neue

字体样式： Light Condensed

字体大小： 20pt

字体颜色： #444444

按钮

创建一个210像素 x 50像素的圆角矩形。应用相同的渐变叠加和内阴影。

应用图层样式

描边颜色： #cf8606

在按钮上写上文字：CONSULT NOW

字体设置

字体名：Helvetica Neue

字体样式： Roman

字体大小：18pt

字体颜色：#fff， #cf8606

效果

第六步： Services区域制作

服务区域划分为4列。每一列的大小为210像素 x 125像素。每一列的间距为40像素。并按照具体大小拖动参考线。

打开事先下载好的图标，放置在下图所示位置。在图标下方写上相应文字。

字体设置

字体名： Helvetica Neue

字体样式： Condensed

字体大小：18pt

字体颜色： #444444

用直线工具画线，颜色为#bfbfbf，放在下图所示的位置

完成之后，合并所有直线，在该图层面板上点击图层蒙版图标进行操作。用笔刷工具轻涂每条直线的边缘，达到类似下图所见的效果为止。

第七步：Video Tour区域制作

用文字工具为header添加文本内容

字体设置

字体名： Helvetica Neue

字体样式： Condensed

字体大小： 22pt

字体颜色： #444444

用矩形工具创建一个460像素x255像素的形状，颜色为：#dddddd。

应用图层样式

外发光颜色：#bfbfbf

描边颜色：#fff

将播放按钮放在如图所示正中位置。

效果

第八步：About Us和Testimonials区域制作

Header的字体不变，每段内容字体设置见下：

字体设置：

字体名称：Arial

字体样式：Regular

字体大小：12pt

字体颜色：#444444

创建一个70像素 x 70像素的图形用作缩略图，将该图形的描边大小改为3像素，其它的设置与video tour部分的图层样式一致。其后的文字部分的字体设置见下：

字体设置

字体名：Arial

字体样式：Regular

字体大小：215pt

字体颜色：#dad9d9

效果

第九步：Footer制作

页面的footer包含以下内容：Quick Links， Latest Posts， Latest Tweets， We Socialize， 和 Copyright.它的宽度与之前在service中所划分的4列宽度一样。

首先创建基底背景。在画布较底部创建一个宽不变，高为45像素的矩形，颜色为#04203b。顶部的宽仍然不变，高设为450像素，颜色为 #052342。复制head和slideshow部分制作好的背景纹理，放在footer之下。

Quick Links

Quick Links距footer顶部距离为30像素。每个链接与分割线之间的距离为15像素。分割线的颜色：#265686。

字体设置

字体名：Helvetica Neue

字体样式：Condensed

字体大小： 18pt

字体颜色：#fff

Links

字体名：Arial

字体样式：regular

字体大小：12pt

字体颜色：#fff

Latest Posts

Latest Post的文字格式与Quick Links相同

Date

Date的字体设置

字体名： Arial

字体样式： Regular

字体大小： 11pt

字体颜色： #8496a9

Latest Tweet

Text

字体名： Arial

字体样式： Regular

字体大小： 12pt

字体颜色： #8496a9

Link

字体名： Arial

字体样式： Regular

字体大小： 12pt

字体颜色： #fcc757

We Socialize

将下载好的图标分别放在图示中相应的位置

应用图层样式

投影颜色： #000

内阴影颜色： #fff

渐变叠加颜色： #03b8ff， #89e3fe

Copyright

最终效果

PSD Download查看更多教程

希望你能从本教程中学到一些技巧。（jaysming）

全教程完,学完记得交作业。如果本教程对您有所帮助，请推荐给你的朋友。