这个模板的重点是提供一系列基于web的服务的设计机构。因此，我们正在设计的页面的主要目的是宣传业务是做什么的以及他们提供什么服务。
这是第一部分关于建立一个干净的商业网站的教程。
第一部分将着重于在Photoshop中创建设计，第二部分将着重于将PSD结果转换为可工作的XHTML模板。
“廉洁营商网站”系列
最终结果
这是一个截图的设计，我们将创建。
概述
在本教程中，我将假设您对Photoshop有一个基本的了解，知道如何做基本的任务，如添加文本，绘制形状，和调整大小/旋转对象。
我在本演练中的目标是向您展示，您并不总是需要在设计中使用许多花哨的效果来制作好看的模板。通过一些字体和一些微妙的效果，仍然有可能创建一个专业的设计，将给你的访问者留下深刻的印象。
我们将要构建的设计有一个标题，其中包含公司的名称和导航区域。
下面是一个区域，突出显示业务是做什么的以及一些额外的细节。
在这之后，有一个部分更详细地描述了特定的服务。下面的部分有一些客户推荐和一个特色的项目概述。
我们还想通过使用一些客户的评价和一个“特色项目”的例子来建立信誉和信任。
最后，我们在底部有一个简单的页脚，其中包含一些相当标准的版权文本。
创建文档
1创建大小为的新文档1100年x1100px．然后添加一些垂直的参考线70 px而且1030 px这给了我们一个960px的宽度，这应该很容易适合大多数屏幕。
使头
2要创建标题，我们首先需要添加背景。用矩形工具，设置前景色为非常深的灰色(# 333333)，然后从文档的左边到右边画一个方框130 px在高度。
添加网站名称/Logo
3.要添加公司名称，请将字体设置为无数的职业．设置字体大小为60像素,颜色变为浅灰色(继续)，字母间距为-40 px．您可以在字符面板(窗口>字符)中设置所有这些选项。
用水平文字工具(T)，键入名称，并将其放置在左侧参考线上。
使导航
4要添加导航区域，请将字体设置为天线．字体大小为16 px颜色是# EEE。输入一些页面名称(例如:
Home, About等)由两个连字符(-)隔开:
创建特色内容区
5要创建特色内容部分，我们需要首先添加特色内容的标题。设置字体为无数的职业，字体权重为大胆的，字体大小60像素，字母间距为-40 px,颜色是# 333333．用水平文字工具(T)输入标题。
6为了使标题更加突出，我们将把&号(&)的颜色改为漂亮的蓝色(# 00 bff3）.
7在下面，我们需要添加副标题。设置字体为无数的职业，字体权重为常规的，尺寸为50 px，和颜色# BBB。
键入副标题，并将其放在标题的下方。
8现在我们想对公司的业务做一个简短的概述。选择水平文字工具，设置字体大小为30 px，颜色要# CCCCCC，并从左到右输入一系列句点(.)。
9创建这个虚线的副本(在图层面板中选择文本图层，然后按Ctrl/Cmd + J)，然后将它放置在40像素在第一行下面。
10现在我们需要在这些行之间添加文本。设置字体为Myriad Pro，字号为34 px，颜色要# 555555，行间距为42像素，字母间距为-40 px，然后键入几行文本。
你可以使用lorem ipsum发电机只是为了快速获取一些虚拟文本内容。
11你可能还想挑出一些关键词，把它们的字体加粗，让它们更有重点;我选了"一流"和"大影响"两个词
添加服务详情
12现在我们想添加一些关于我们的服务的更具体的细节。在工具面板中选择矩形工具，设置前景色为# 00 aeef，并画一个矩形的形状280年x350px尺寸上，靠左导轨放置。
13为了让这个框更突出一点，我们将添加投影图层样式(在图层面板中双击图层缩略图来访问图层样式对话框窗口);设置投影的颜色，其中颜色设置为灰色(# AAAAAA）.
现在你的盒子应该有更多的强调。
14现在我们需要为我们的服务添加一个标题。选择水平文字工具，设置字体为无数的职业，字体权重为常规的，字体大小为40像素，文本颜色为白色(# FFFFFF）.
从文本框的左边框向右绘制文本框，并将对齐方式设置为“中心文本”。然后，输入一个标题。
15现在设置字体大小为18 px然后输入一系列的句号，它们将变成虚线。
16接下来，将字体大小设置为15个像素然后从文本框的左边画一个文本框，一直画到它的右边。输入一些描述服务的文本。
17最后，我们需要在这个框的底部添加一个按钮。
选择矩形工具，设置颜色为蓝色(# 0076 a3)，然后画一个围绕的方框230年x40px大小。
18给按钮添加一个内发光效果，颜色设置为较暗的蓝色-我已经用过了# 235162．
19现在给按钮添加一个标签。
设置字体大小为18 px然后输入大写字母“GET MORE DETAILS>>”。
这是第一个盒子。
20.通过复制第一个框和其中包含的所有内容，创建该框的两个副本。
使用移动工具(V)将它们均匀地隔开。另外，更改每个框中的详细信息。
21要完成这部分的布局，复制我们在上一步创建的大虚线，并将其添加到该部分的底部。
添加客户证言
22对于客户证言部分，我们最初需要创建一个标题。设置字体为无数的职业，尺寸为24像素，颜色为深灰色(# 555555)，然后用横排文字工具(T)输入“客户证言”。
23现在对于第一张推荐作者的照片，选择矩形工具，设置颜色为浅灰色(# CCCCCC)，并在周围画一个方框84 x84px。
24现在添加一张你的照片，尺寸稍微小一点。将照片添加到背景图层之上的图层中。
25接下来，我们需要在照片旁边添加一些文本。
设置字体为天线，字体大小为14像素，颜色改为深灰色，我们用于客户证言部分的标题(# 555555)，然后键入一些虚拟文本(同样，您可以使用lorem ipsum)。
26现在，将字体权重设置为大胆的然后输入作者的名字。在下一行，输入作者所属单位。
)，并将颜色设为明亮的蓝色(# 00 aeef）.
27使用用于创建第一个证言的所有元素并创建两个副本。将它们以一致的间距放在彼此的下方，并更改内容和图像。
28现在，我们需要在证明部分的右侧添加一个垂直分隔符。创建我们之前创建的虚线的副本，并删除大约一半的句点。将直线旋转90度左右o编辑>变换>旋转90oCCW)，并将其放在客户奖状部分的右侧。
创建特色项目部分
29要创建我们的特色项目区域，首先我们需要添加一个标题。设置字体为无数的职业,的大小24像素,颜色变为深灰色(# 555555)，然后输入“特色项目”。
30.现在为特色项目添加一个标题。
设置字体大小为20 px，颜色变为灰色(# 888888)，并输入标题。
在这个标题下面，我们需要一个截图的项目，是围绕430年x200px．
31然后添加一些提供项目简要概述的文本。
设置字体为天线，字体大小为14像素，文本颜色为深灰色(# 555555)，然后输入几行内容。
32也可以在底部添加一些文字，比如“点击这里获取更多细节”。将文本的颜色改为浅蓝色(# 00 aeef）.
33最后，在这个部分的底部添加另一个虚线的副本。
使页脚
34页脚非常容易完成。设置字体为天线，字体大小为16 px，颜色要# 888888，并键入一些页脚内容。
所有完成
这是所有的工作!
结束
在本教程中，我希望说明，创建一个漂亮的设计并不总是需要很多花哨的效果。有时候一些字体和颜色加上一些微妙的效果就可以很好地完成工作。
如果你有任何问题或任何不清楚的地方，请告诉我，我会尽我所能在评论中回答他们。在本教程的下一部分中，我将介绍如何根据这种设计创建XHTML模板。
“廉洁营商网站”系列
下载源文件
- clean-business-website-psd(ZIP, 0.53 MB)
