在Photoshop中创建一个干净和专业的网页设计

在本Photoshop网页设计教程中，我们将设计一个粉碎，干净，专业网站布局在Photoshop中。我们在本教程中所做的布局可以用作个人或企业网站设计．这种设计是非常友好的，所以它应该是伟大的网站声誉．更新:这是第一部分这是两部分系列的一部分，将教你如何在Photoshop中创建布局，然后如何将其转换为符合标准的(X)HTML网页设计。

“干净专业的网页设计”系列

• 第1部分:在Photoshop中创建一个干净和专业的网页设计
• 第2部分:编写一个干净和专业的网页设计

最后预览

看看我们将在本教程中创建的布局。

你可以看到最终预览的图像下面或点击这里查看完整尺寸的版本．

准备Photoshop文档

1按照下图的设置在Photoshop中创建一个新文档(Ctrl/Cmd + N)。

设置单位和标尺设置

2确保你使用的是像素单位，这是网页设计的标准固定单位。

从Preferences对话框窗口(Ctrl/Cmd + K)为标尺设置以下设置;点击单位与标尺并确保如下图所示设置了所有内容。

添加指南来指定内容区域

3.从查看>标尺激活Photoshop标尺。

通过按“Ctrl/Cmd + R”切换标尺的可见性。

同时从窗口> Info打开信息面板(快捷键:F8)。

Info面板根据所选工具提供有用的信息。

通过按“M”，选择矩形选框工具，创建一个矩形120 px从画布的左角开始偏大。在进行选择时，您可以通过查看信息面板来调整大小。现在点击左边的标尺，并拖动一个参考线到选框的右边，如下图所示。

4将此选区移动到画布的右边缘。在选区的左侧分配另一个参考线。你的画布现在应该是这样的:

创建logo

5现在我们要为我们的网站创建标志。

这个标志将是非常简单的，它将有一个颜色渐变效果。

创建新组(图层>新建>组)命名为标志”。

6用水平文字工具(T)输入"粉碎(或网站名称)大写。

7然后在字符面板中，设置字体为天线，风格为大胆的尺寸为42 pt．还将抗锯齿方法选项设置为锋利的使用相同的颜色# 101112．当类型工具是活动工具时，您还可以在选项栏中设置这些选项。

8双击打开图层样式对话框。选择渐变叠加，点击渐变编辑器，按下图设置。9将“SMASHING”类型图层置于距离35像素从上到下0 px从左向导开始。

你可以使用移动工具(V)和方向键准确地做到这一点。复制这个类型的图层(图层>复制图层)。将复制层移到“SMASHING”单词旁边，并将文本编辑为“Dzine”。重复步骤6,7,8，但使用不同的渐变颜色(左颜色停止:# b27625,正确的颜色停止:# e5ad27)的“Dzine”一词。

10选择水平文字工具(T)，在logo下面添加一个标签线，设置如下。11最终的logo应该如下图所示。要激活/禁用参考线，转到查看>显示>网格或使用快捷键Ctrl/Cmd +;

创建导航栏

12创建一个新组，命名为导航，则应在“logo”组的上方。

从最上面的标尺拖动一条参考线，150 px在画布的上边缘下面。选择矩形工具(U)和绘制一个水平线4 px颜色为的高度# e3ab27，在画布上。

13添加导航链接12 px -从这条水平线开始20 px在左边向导的右边。选择圆角矩形工具(U)绘制一个方框，大小为72 px通过35像素．

将此图层移到文本链接下面并命名为"徘徊”。

用转换点工具将底部圆角拉直。移动下面不均匀边缘的边8像素边距使边与底部的其他内边相等。双击“悬停”图层，打开图层样式对话框，添加渐变颜色(左停色:# e5ad27，右色停:# b27625)．

选择水平文字工具(T)，选择文本“Home”，并将颜色更改为# ffffff(白色)。

创建“呼叫我们”部分

14接下来，我们将在我们的设计的右上角创建“call us”部分(正好在logo的对面)。下载这个手机图标把这个放在右边的引线附近。

命名此图层手机图标”。选择水平文字工具(T)。

使用字体在电话图标左侧添加一个电话号码天线，大小设置为20分还有颜色# 292929．在电话号码下面用字体添加一些相关的文字天线，设为大胆的，尺寸为11 pt还有一种颜色# 595959．

创建头文件

15现在我们要创建标题部分。

创建一个新组，命名为头”。

16选择矩形工具(U)创建一个矩形形状，大小为1200 px通过440 px．把这个矩形放在1 px在导航栏下面命名此图层头bg”。双击header bg图层，选择渐变叠加图层样式，在渐变编辑器中选择这两种颜色(左停色:# 2 e2226，右色停:# 7 a7556)．

查看下图矩形的位置和颜色细节。17用矩形工具创建另一个矩形(U)，大小为960 px通过360 px．把这个矩形放在40像素从“header bg”图层的顶部和0 px从左边的指南。

命名此图层头的容器”。预览下面我们已经做了什么，直到现在的设计。

创建“特色项目”部分

18接下来，我们将创建特色项目部分。在标题组中创建一个新组，命名为"《外交政策》”。选择矩形工具(U)创建一个矩形，大小为630 px通过340 px在距离10 px从头容器的顶部和左侧。给这个图层颜色# 000000给它命名"fp容器”。19在Photoshop中打开一张图片，放在这里作为你的特色项目。选择>全部(Ctrl/Cmd + A)，然后编辑>副本(Ctrl/Cmd + C)。回到我们的网页设计。

在fp container图层上面创建一个新图层，点击编辑>粘贴(Ctrl/Cmd + V)，粘贴你的特色项目图像。

重命名此图层为fp形象”。右键单击“fp image”图层并选择创建剪贴蒙版．现在图像只在矩形(" fp container ")内可见。

进行调整，使您的特色项目图像类似于下面所示的。20.点击编辑>变换>比例(Ctrl/Cmd + T)。

从“选项”栏中单击旋转框并键入4按两次回车键调整角度。停留在相同的图层(“fp image”)，并选择光度作为这个图层的混合模式。21接下来，我们将为特色项目图像创建标题和描述栏。

选择矩形工具(U)创建一个矩形形状，大小为630 px通过90 px使用颜色# 161718．更改此图层的不透明度为90%给它命名"标题bg”。放置这个矩形如下图所示。22创建另一个大小为的矩形630 px通过1 px使用颜色# 9 c9c9c给它命名"标题水平线”。将这个矩形放在title bg图层内容的上边缘。

23在步骤21中创建的矩形中添加标题和描述，使用下面的标题和描述设置。

标题:

• 字体:天线,颜色:# ffffff,大小:25 pt和抗锯齿方法选项:锋利的

描述如下:

• 字体:天线,颜色:# a4a4a4,大小:12 pt和抗锯齿方法选项:没有一个

创建“快速引用”部分

24在header组内创建另一个组，命名为"快速报价”。选择矩形工具(U)创建一个矩形，大小为300 px通过340 px．把这个矩形放在10 px在特色项目部分的右侧，并命名为“qq容器”。

25我们将从上一步中创建的另一个图层复制一个图层样式。进入“navigation”组，右键单击“hover”图层，选择复制图层样式，回到qq容器图层，右键选择粘贴图层样式．

现在我们的qq容器的图层样式与hover图层相同。

26用水平文字工具(T)书写:快速报价在“qq容器”里的距离20 px从包含框的顶部和左侧边缘。

将字体族设置为抛石机女士(或你喜欢的网页安全字体)，颜色为白色(# ffffff)和抗锯齿方法选项设置为锋利的．我们将使用圆角矩形工具(U)创建三个表单字段。选择圆角矩形工具(U)，设置半径为3 px．

然后创建两个圆角矩形的大小260 px通过35像素使用白色(# ffffff)．然后将形状图层命名为"field1"和"field2分别”。创建第三个圆角矩形，大小为260 px通过75 px使用白色(# ffffff)，并命名为“field3”。选择水平文字工具(T)为每个表单字段创建标签。27选择圆角矩形工具(U)创建一个方框80 px通过35像素给它命名"提交btn”。

28双击图层打开图层样式对话框，从左边选中渐变叠加复选框。点击渐变编辑器，改变渐变的颜色，如下图所示。

29用水平文字工具(T)输入"提交使用字体天线、风格大胆的尺寸为13 pt．在图层面板中选择两个图层(" submit btn "和" submit text ")。

30.从工具面板中选择移动工具(V)并单击对齐垂直中心而且对齐水平中心从选项栏。(或者，您可以通过转到得到相同的结果层>对齐>垂直中心而且层>对齐>水平中心)．

创建主要内容区域

31创建一个新组，命名为内容”。选择矩形工具(U)创建一个矩形300 px通过175 px给它命名"c01”。放置这个图层30 px在标题下面0 px从左边的指南。双击图层，按照下图进行设置。

32我们现在要向这个框中添加内容。

用水平文字工具(T)添加文字:关于SmashingDzine”。使用水平文字工具(T)选择About单词，然后将其颜色更改为# b47825．然后选择“Smashing”字，然后将颜色改为# 2 f2f2f．在标题下面添加一些描述和链接文本。

标题、描述和链接文本使用了以下选项。(您可以根据需要调整这些选项)。

标题:

• 字体:抛石机女士风格:正常的,大小:24 pt，抗锯齿方法:锋利的

说明:

• 字体:天线风格:正常的,大小:12 pt，抗锯齿方法:没有一个,颜色:# 767676

对于链接文本:

• 字体:天线风格:大胆,大小:13 pt，抗锯齿方法:没有一个,颜色:# 252525、下划线

33现在我们将在描述旁边添加一个方框。

选择矩形工具(U)和颜色# ffffff，按住Shift键保持比例，创建一个大小相同的正方形88 px通过88 px．将这个方块移动到10 px从矩形的左边(“c01”)。命名此图层边境”。双击图层打开图层样式对话框窗口，按如下设置添加一个描边图层样式:

34创建另一个大小为的方框82 px通过82 px然后把它放在border图层的中心。命名此图层盒子，并将这个正方形的颜色改为# d5d5d5．选择该组中的所有图层("内容group)，点击图层>，从图层中新建>组(Ctrl/Cmd + G)，重命名这个组关于”。注意:里面的灰色方框是图像的占位符，可以替换为您选择的任何图像。

35复制“about”组(右键单击组并选择重复组)，并命名为“服务”。右键单击“services”组并选择重复组再说一遍，给它命名"投资组合”。我们现在有三个组(“about”、“services”和“portfolio”)。将最后一组(“portfolio”)移动到右侧向导，如下所示。36在图层面板中选择所有三个组，然后选择图层>分布>水平中心，使它们平均分开。

点击这里查看完整尺寸的图片下面的图像。37更改“services”组(中间)和“portfolio”组(右边)的标题，如下所示。(您可以根据自己的需要更改这些标题。)

创建页脚

38创建一个新组，命名为页脚”。选择矩形工具(U)创建一个矩形，大小为1200 px通过100 px在我们的设计布局的底部。命名此图层页脚bg”。使用与header bg相同的渐变叠加样式，右键单击header bg图层并选择复制图层样式。回到页脚组，右键单击footer bg图层并选择粘贴图层样式．39选择水平文字工具(T)，并添加版权文本和页脚链接文本在左侧使用字体天线，大小12 pt灰色的(# dddddd)．

40我们将在右侧添加电子邮件订阅部分。

在footer组中创建一个新组并命名为订阅”。选择圆角矩形工具(U)创建一个矩形85 px通过35像素．命名此图层订阅btn”。

41重复步骤26添加表单字段和标签。

42用水平文字工具(T)输入"订阅使用字体天线，样式设置为大胆的尺寸为13 pt．选择两个图层(“订阅btn”和“订阅文本”)。

43重复步骤28创建订阅按钮。

44选择圆角矩形工具(U)，设置半径为3 px．

创建一个圆角矩形大小210 px通过35像素使用白色(# ffffff)，并将此形状层命名为“电子邮件领域”。在“电子邮件字段”上方添加一个文本行。

最终结果

好了，我们做完了。这是最终结果。

点击下面的图片来查看全尺寸布局．谢谢你跟随我的教程。我希望你们都喜欢并从本教程中学到了新的东西。

请在下方留言分享你的想法和观点，我很乐意听。你也可以把这个设计教程分享给你的朋友，如果你认为这对他们有帮助的话!

下载源文件

你可以下载Photoshop本教程的文件(PSD)从下面的链接作为ZIP存档。

• clean-professional-weblayout(zip, 2.4 mb)

总结

如果你决定使用这种设计，一定要确定优化图像减少加载时间。

这个决定应该是伟大的小网站，如一个为高尔夫球场因为它简单，易于使用，而且用户友好。

相关内容

• 如何用Photoshop创建一个干净的博客设计
• 从Photoshop中编写一个干净的Web 2.0风格的网页设计
• 在Photoshop中创建一个光滑和极简的网页布局
• 在Photoshop中制作一个3D铅笔和纸图标
• 在Photoshop中创建一个光滑的视频播放器UI

作者简介

他说明是一个来自迪拜的自由网页设计师、阿联酋。他是杂志的创始人和编辑增加灵感，在那里他展示了数字艺术、平面设计、插图、摄影和排版的不同创意资源，以获得灵感。你可以通过……找到他推特或Facebook。