在这个Photoshop中网页设计教程，我们将学习如何创建一个光滑和最小外观的网站布局。我们将使用960网格系统作为模板，使其易于对齐布局上的设计元素。
预览
这是我们将一起创建的预览，点击图片扩大．
创建一个新的Photoshop文档
1我们将使用960网格系统(下载它在http://960s/)作为开始模板。
下载完成后，请保存名为960年_grid_12_col.psd然后隐藏小组叫12 _col_grid．
创建背景
2首先，右键单击图层面板中的背景图层，然后选择背景图层．这将解锁背景层，以便它是可编辑的。
我把背景图层命名为bg．
3.现在选择渐变工具(G)，设置前景色为# efefef和你的背景颜色# cacaca．选择径向梯度作为选项栏中的渐变类型。
将渐变拖动到画布上，这样你就有了类似的效果:
标题部分的设计
4我们将添加一个新的水平导向50 px从文档顶部标记以设置顶部边界。这将标记布局标题部分的位置。
5我们将开始添加标题和口号;选择水平文字工具(T)，并键入您的网站的名称和标语。
下面是我在布局中使用的字体设置:
“YourName”
- 字体族:Nilland字体(从dafont.com上获取）
- 字体:33pt
- 字体重量:粗体
- 抗锯齿设置:强
- 颜色:# 525252
“一些很棒的口号”
- 字体系列:Arial
- 字体:14pt
- 字体粗细:普通
- 抗锯齿设置:强
- 颜色:# 207687
6对齐字体在左上方，使用您的指导方针，以准确的位置。
创建导航
7用水平文字工具(T)输入导航文字(home, about us, services, portfolio, and contact)，字体设置如下:
- 字体系列:Arial
- 字体:17pt
- 字体粗细:普通
- 抗锯齿设置:强
- 颜色:# 525252
8使用文档的参考线对齐导航链接文本，如下图所示:
创建搜索栏
9现在是时候创建位于导航链接右侧的搜索栏了。选择圆角矩形工具(U)，设置半径选项值为5 px，然后在画布上绘制圆形图层形状，这样它就有155 px宽度和20 px高度，并位于导航链接的右侧。
10在图层面板中双击圆角矩形图层，打开图层样式对话框，添加一个内阴影图层样式。使用下面的设置来设置图层样式:
11现在让我们创建GO按钮。创建一个新的圆角矩形形状，高度相同(20 px)和半径选项值(5 px)，但宽度为30 px．
12在Go按钮上应用垂直(90度)线性渐变图层样式，左边的颜色停止# 2 fa9c1正确的颜色不再存在# 207687．
13然后写下这样的文字搜索…"使用在搜索栏上方的水平文字工具(T);使用白色(# ffffff）.14使用自定义形状工具(U)，创建一个白色箭头，并对齐到中心。
我使用了自定义的形状叫做箭头2，这是Photoshop CS版本的标配。在选项栏的形状选项下拉菜单中寻找它。我们的搜索栏应该是这样的:
15在进入下一步之前，只需确保文档中的所有内容都组织良好。
这是我在开发布局时的图层面板截图:
创建分隔线
16用直线工具(U)，创建两个1 px线条相互叠加，颜色值如下:
注意:有许多方法来设置线条形状的颜色。第一种方法是在绘制线条之前在选项栏中设置颜色选项。另一种方法，如果你已经画了线条，是使用颜色叠加图层样式。
我让你决定怎么做。
添加子导航
17使用水平文字工具(T)输入你的子导航文字，设置如下:
- 字体系列:Arial
- 字体:17pt
- 字体粗细:普通
- 抗锯齿设置:强
- 颜色:# 787878
18确保主导航和子导航之间的分隔线在中央对齐。它应该是这样的:
创建特色设计区域
19我们将开始创建一个特色设计的图像的位置，所以我们将选择圆角矩形工具(U)，我们将创建一个矩形335 px宽度和128 px和Radius选项设置为5 px．
20.通过设置填充类型选项来应用渐变描边图层样式梯度．修改渐变颜色，使它从# 31 aeca结束于# 2 b9ab2．
21调用这个新创建的层photo_holder．
22好吧，让我们通过文件>位置添加一个特色设计的图像。这将打开放置对话框，在这里您可以选择一个图像放置在我们的画布上。选择一个图像，然后按Place按钮，当你完成。
23确保图像的层在photo_holder层之上;如果不是，那就移动它。右键单击图像层并选择创建剪贴蒙版．
24修改图像的大小以适应;你可以使用自由变换(Ctrl/Cmd + T)。
当你对尺寸满意时，确保你的图像按照上图对齐，刷新到布局设计的右侧。图片大小对于降低网站加载时间非常重要，所以优化你的图像会让你的网站更加seo友好。
在设计中添加一些内容
25让我们在设计中添加一些内容，但在此之前，我们必须为内容设置边界。
为此，拖动两个水平参考线，如下图所示。
添加标题和类别
26对标题和类别使用以下设置。
标题(我的标题是“倒立!”)
- 字体系列:Arial
- 字体:20pt
- 字体粗细:普通
- 抗锯齿设置:强
- 颜色:# 2197 b1
类别(在我的例子中是“Photoshop设计”):
- 字体系列:Arial
- 字体:17pt
- 字体粗细:普通
- 抗锯齿选项:强
- 颜色:# 313131
段落内容
27添加你的段落文本，使用下面的图片作为参考。
28在工具面板中选择移动工具(V)，在图层面板中选择我们的三个文本图层(按住Ctrl/Cmd同时点击它们来选择所有的文本图层)。29给它们相等的间距使用分配上边缘选择。
创建滑块控件
30.现在是时候创建滑块控件了。
首先复制我们为导航创建的两行，然后调整它们的大小(您可以使用自由变换来完成此操作)。我们将使暗线更暗，给它一个颜色值# 777575．
31然后用矩形工具创建一个小的矩形盒子(15个像素宽,15个像素应用渐变叠加图层样式。
32在我们进入下一步之前，我们必须组织我们的图层。使用下面的参考图片，以确保层是在适当的顺序。
创建内容框
33首先，我们需要设定界限。
拖动水平参考线并将其放在滑块线上。留下一个50 px间隙，再加另一水平导轨。
34现在选择圆角矩形工具(U)。
创建一个矩形260 px宽度和170 px的身高和颜色# d0d0d0．将这个图层命名为bg_1．35对齐矩形，像下面的参考图片，使用移动工具(V)定位准确。
36右键单击图层面板中的bg_1图层并选择创建图层蒙版从上下文菜单。37选择渐变工具(G)，设置你的前景色和背景颜色为黑白(按D自动重置颜色)。用线性渐变，从上到下拖动，直到你满意的外观。
38现在让我们创建阴影。复制bg_1层。给复制的图层命名影子．
将该层放在bg_1层的下面。然后应用颜色叠加图层样式，颜色为深灰色(# 3 e3e3e）.
39当选择阴影层时，点击滤镜>模糊>高斯模糊。
设置模糊半径为5.0 px．
40使用渐变工具(G)，调整图层蒙版，直到你有如下效果:
41向框中添加一些内容。下面，您将看到我最终得到的结果。
42将创建的内容层分组到名为内容．43现在我们要对齐它。选择内容组，按住Ctrl/Cmd键，在图层面板中选择bg_1图层。
选择移动工具(V)，并单击对齐水平中心选项和对齐垂直中心选项定位他们。
44现在通过复制我们刚刚创建的原始内容框的图层来复制这个框的两个副本。对齐它们，改变内容，不要忘记在底部添加水平指导。
45让我们检查并确保所有的层都是有组织的;使用我的图层截图作为参考。
创建主要内容区域
46留下一个50 px间隙并拖动一个新的水平导轨。开始添加你的内容，并按照下图对齐。
47让我们让它看起来好一点。我们将选择矩形选框工具(M)。在样式选项中选择固定大小具有固定的宽度15个像素和一个固定的高度30 px．
设置前景色为# 12197 b用颜色填充矩形选框(按Ctrl/Cmd +退格键来填充)。
48使用相同的设置，您可以在右侧添加一些内容。
49在底部拖动一个新的水平参考线。
添加分隔线;以下图为参考。
50返回查看你所有的图层都组织好了，使用下面的图片作为参考。
创建页脚区域
51我们将从创建页脚区域开始(再次)创建一个新的水平参考线。
留下一个50 px上面的导轨间隙，再拖动一个新的横向导轨!52选择单行选框工具(M)。设置前景色为白色(# ffffff）.
单击画布以创建选框选择。然后按Ctrl/Cmd +退格键填充。将这个图层命名为1 px_upper_line．
53选择矩形选框工具(M)创建一个矩形1020 px宽度(它跨越画布的整个宽度，和160 px高度。这将是页脚区域的背景。用任何颜色填充它。
应用一个渐变叠加图层样式，使用下面的设置。
54复制1px_upper_line图层并将其移动到页脚的底部，叫它任何你想要的名字，但我已经叫了我的1 px_down_line．这是它的样子。
55开始添加一些内容;以下图片供参考:
56你可以从deviantART下载这些社交媒体图标——它们被称为Aquaticus。社会俊威。57像下图一样对齐它们:
创建小页脚
58在大(棕色脚)的底部拖动一个新的水平参考线，留下一个50 px差距，然后添加一个新的水平引导。59然后像这样写你的页脚导航文本:
60写版权文本并对齐到右边，添加一个最后水平的指导。
调整画布的大小
61最后，我们需要在页脚导航、版权文本和边框之间再留一个50px的空白，为了做到这一点，我们将调整画布的大小。
结论
结果出来了!我们已经创建了一个干净和最小的布局设计!
下载源文件
你想要一份PSD副本，对吧?这是一个包含PSD和JPG预览的ZIP存档，现在就得到它!
- slick-minimal-layout.zip(4.97 mb,邮编)
相关内容
- 在Photoshop中创建一个冬季主题网页设计
- 创建一个动画“号召行动”按钮
- 用Photoshop设计一个最小和现代的作品集布局
- 相关类别：教程而且网页设计
实际的建议
WebFX，位于哈里斯堡，PA，是一个全面服务的网站开发和互联网营销机构。
看看他们为酒店做的一些工作在这里，并联系他们为您的下一个互联网营销或网页设计项目!
