预览
点击下面的图片查看它全尺寸．
教程资源
960网格系统简介
在本教程中我们将使用960网格系统组织和安排我们网站布局的元素。在我们开始之前，在您的计算机上下载网格系统。
解压你下载的存档文件，进入“templates”文件夹，然后进入“photoshop”文件夹。您将找到三个. psd文件。每个文件都包含一个包含12、16和24列的网格。
psd文件中已经设置了一些指南，这将非常有用。要激活参考线，转到查看>显示>参考线，或使用快捷键Ctrl/Cmd +;。在本教程中，您将需要创建具有特定尺寸的形状。
当你创建一个形状或选区时，要查看它的确切大小，请点击Window > Info打开信息面板。您的形状和选择的宽度和高度将显示在此面板中。
提示:如果你需要一个更全面的使用960 GS的指南，我建议阅读指南称为960网格系统变得简单。
步骤1:设置文档
在Photoshop中打开960_grid_12_col.psd文件。
然后点击编辑>画布大小，设置宽度为1200px，高度约为1700px。稍后您可以调整高度，使您的网页布局符合您的文档。
步骤2:创建标题
创建一个新组Header。用矩形工具(U)创建一个矩形(130,130,100)，尺寸:1200px * 100px，颜色:#383c3e。命名此图层为header bg。右键单击该图层并选择转换为智能对象。然后点击滤镜>噪声>添加噪声，按照下图设置。
步骤3:添加web布局的名称
用文字工具在标题的左边写上你的网页布局的名字。
我用的字体:Rockwell Bold，字号:40pt，颜色:#FFFFFFActivate the guides (Ctrl/Cmd + to help you position this layer as you see in the image below.
步骤4:创建对角条纹图案
现在我们将创建一个对角条纹图案，我们将在后面使用添加一个程式化的阴影到文本层。
新建一个文档，尺寸:3px * 3px。隐藏背景图层，然后创建一个新图层(Ctrl/Cmd + Shift + N)，使用矩形选框工具(M)创建三个矩形选区，如下图所示(按住Shift键，然后创建每个选区)。
用白色填充选定的区域，并按Ctrl/Cmd + D取消选择。点击:编辑>定义图案，给你的图案一个名字，然后点击确定。现在可以关闭这个文档了。
步骤5:添加一个程式化的阴影到文本层
按住Alt/Option键，拖动文本层的副本到原来的文本层下面。命名这个新图层为shadow，并把它的颜色改为红色，这样当我们移动它的时候你可以看得更清楚。选择移动工具(V)并使用键盘上的方向键将文本层向下移动2px，向右移动2px。
然后将该图层的填充设置为0%，不透明度设置为40%(我们将填充设置为0%，以便使该图层不可见，但仍然能够应用图案到它，或任何其他样式)。双击阴影图层打开图层样式窗口，按照下图设置模式叠加。
步骤6:添加导航项
创建一个新组navigation。用文字工具为你的导航菜单项添加名称。我用的字体:Rockwell Regular，字号:16pt，颜色:#e1e6e9我还为每个导航项添加了第二行文字，字体:Lucida Sans Regular，字号:12pt，颜色:#e1e6e9。
步骤7:在导航项之间添加分隔符
现在我们将创建一个垂直虚线模式用于分隔符。新建一个文档，尺寸:1px * 10px。创建一个新图层(Ctrl/Cmd + Shift + N)，并通过点击它的眼睛图标来隐藏背景图层。
用矩形选框工具创建一个矩形选区，尺寸:1px * 6px。用白色填充选区，并按Ctrl/Cmd + D取消选择。点击:编辑>定义图案，给你的图案一个名字，然后点击确定。
现在可以关闭这个文档了。
用直线工具在两个导航项之间创建垂直分隔线。设置该图层的填充为0%，不透明度为30%。
命名此图层为虚线，双击打开图层样式窗口，按照下图设置样式叠加。复制这个图层，你需要多少次，并在所有导航菜单项之间放一个分隔符。
步骤8:为活动导航菜单项创建样式
现在，我们将为其中一个导航菜单项创建一个更亮的背景，以表明它是活动的。
用矩形选框工具(M)创建一个选区，如下图所示。点击图层>，新建调整图层>亮度/对比度，按照下图设置。你创建的选区将被用作调整层的蒙版。
把这个图层放在navigation items组的所有文本图层下面。
步骤9:创建面包屑条
添加面包屑访问你的网站是一个很好的实践，因为它可以让访问者随时知道他们在网站上的位置以及他们来自哪里。用矩形工具(U)创建一个矩形(130,200)，尺寸:1200px * 40px，颜色:#63686b。
命名此图层为面包屑bg。右键单击该图层并选择转换为智能对象。然后点击滤镜>噪声>添加噪声，按照下图设置。
新建一个文档，尺寸:5px * 5px。
使用与前面创建对角条纹图案相同的技术，但这次用黑色填充选区。创建好图案后，回到你的网页布局文档，双击“面包屑bg”图层，按照下图设置图案叠加。
第十步:完成面包屑条
用文字工具在面包屑栏中添加一些文字。
我用的字体:Lucida Sans，字号:12pt，颜色:#dde2e5用直线工具(U)，设置粗细为1px，在面包屑条下面创建一条水平线，颜色:#373a3c。复制此图层(Ctrl/Cmd + J)并向上移动一个像素。更改新线条层的颜色为#787e82。在面包屑条的顶部添加两个相同颜色的线层。
步骤11:为图像滑块创建背景
创建一个新组Slider。用矩形工具创建一个矩形(130,200)，尺寸:1200px * 460px，颜色:#45494c。命名此图层为slider bg。右键单击该图层并选择转换为智能对象。然后点击滤镜>噪声>添加噪声，按照下图设置。
步骤12:创建图像滑块
用矩形工具创建一个矩形(130,940px * 340px)，尺寸:940px * 340px，颜色:#5e6468。命名此图层为border。双击该图层打开图层样式窗口，添加1px的描边，颜色:#787e82。
用矩形工具(U)在之前创建的矩形(910px * 295px)内创建一个新的矩形(0,910px * 295px)。命名此图层为image_holder，并添加1px的内描边，颜色:#45494c
找到一个你想要显示在你的图像滑块上的图像，并在Photoshop中打开它。
使用移动工具将这张图片移动到你的网页布局文档中，并将其放在image_holder图层的上方。命名此图层为image，右键单击并选择创建剪贴蒙版，使其仅在image_holder图层的区域可见。
步骤13:为图像滑块创建导航
现在我们将创建一个ribbon，在那里我们将显示当前图像的名称，以及图像滑块的上一个和下一个按钮。
创建一个新组slider navigation。用矩形工具创建一个矩形(130,960px * 50px)，尺寸:960px * 50px，颜色:#c4ccd1命名此图层为rectangle。右键单击该图层并选择转换为智能对象。然后点击滤镜>噪声>添加噪声，按照下图设置。双击该图层打开图层样式窗口，按照下图设置样式。
内发光的颜色:#d8e0e4，描边的颜色:#575d61。
用钢笔工具在矩形的右下角创建一个三角形，如下图所示。设置三角形的颜色:#636b70，命名为triangle right。右键单击该图层并选择转换为智能对象。然后点击滤镜>噪声>添加噪声，按照下图设置。双击该图层打开图层样式窗口，添加一个单像素描边，颜色:#575d61。
现在我们将创建色带的结束区域。用钢笔工具创建一个如下图所示的形状，颜色:#8b9297。命名此图层为end ribbon right。右键单击该图层并选择转换为智能对象。添加0.7高斯单色噪声到此层。双击该图层打开图层样式窗口，按照下图设置样式。
外发光的颜色:#9ea6ab，描边的颜色:#3d4245。把这个图层放到“triangle right”图层下面，然后移动它，如下图所示。
复制“triangle right”和“end ribbon right”图层(选择它们并拖动到“创建新图层”按钮上)。选择这两个图层，编辑>，变换>，水平翻转。
使用移动工具(V)移动这些图层在色带的左侧，如下图所示。
现在我们将添加一个阴影到色带。选择矩形工具(U)创建一个黑色矩形，如图1所示。
命名此图层为shadow。右键单击该图层并选择转换为智能对象。然后点击滤镜>模糊>高斯模糊，按照下图(2)进行设置。把这个图层放在所有其他色带图层(3)的下面。
转到>图层蒙版>隐藏所有。这将使“阴影”层不可见，添加一个黑色蒙版。我们这样做是因为我们想只在色带的底部应用阴影。
选择一个大的白色软刷(B)，用它在丝带的底部区域绘制阴影。设置该图层的不透明度为60%(4)。
选择文字工具(T)添加在图像滑块中显示的图像的名称。
我用的字体:Lucida Sans，字号:18pt，颜色:#4b4e50
步骤14:为图像滑块添加导航按钮
创建一个新组next button。选择圆角矩形工具(U),设置半径为4 px和创建一个圆角矩形尺寸110 px的26 # 8 fbfd1 px和颜色。命名此图层为button，双击打开图层样式窗口，按照下图设置图层样式。描边的颜色:#6f95a4。
用矩形工具(U)在按钮的右侧创建一个矩形(0,0,0,0,0,0,0,0,0,0)，颜色:#72a3b5。看看下面的图片作为参考。命名此图层为dark rectangle，右键单击并选择创建剪贴蒙版，使其仅在按钮内部可见。
按住Ctrl/Cmd键，点击button图层的缩略图来选择它。
创建一个新层，用白色填充选区。命名此图层为noise，右键单击并选择转换为智能对象。然后点击滤镜>噪声>添加噪声，按照下图设置。
设置此图层的混合模式为正片叠底50%。
用文字工具(T)在你的按钮上写上文字Next Project。字体:Rockwell Regular，字号:13pt，颜色:#effbff。
复制这个符号“»”，进入Photoshop，选择文字工具(T)，并将其粘贴到按钮的较暗的一面。字体:Rockwell Regular，字号:20pt，颜色:#effbff。
复制“next button”组(右键单击它并选择Duplicate)。
命名新组为“prev button”。点击编辑>变换>水平翻转，并将此按钮移动到色带的左侧。你需要擦掉文字图层(因为它是随着整个组翻转的)，选择文字工具(T)，用相同的字体和颜色在上面写上“prev button”。
步骤15:为图像滑块创建项目符号
创建一个新组，命名为bullet points。用椭圆工具，按住Shift键创建一个圆，尺寸:10px * 10px，颜色:#373b3e。命名此图层为bullet point。复制这个图层几次(Ctrl/Cmd + J)，并使用移动工具(V)排列圆形，如下图所示。新建一个圆，尺寸:6px * 6px，颜色:#a6adb2。把这个圆放在第一个黑圆里面。命名此图层为active。
第16步:给图像滑块一个像素线
用直线工具，设置粗细为1px，在滚动条背景的底部创建一条水平线。颜色:#373a3c。命名此图层为1px line复制此图层并将新行向上移动一个像素。更改新线条层的颜色为#5a5f63。
步骤17:创建内容区域
创建一个新组Main Content。用矩形工具(U)创建一个矩形(130,200)，尺寸:1200px * 670px，颜色:#5e6468。把这个矩形放在图像滑块区域的下面。命名此图层为main content bg，右键单击并选择转换为智能对象。现在我们将使用一些滤镜为背景添加纹理。
首先，去滤镜>噪声>添加噪声，设置数量为1，分布为高斯，并勾选单色框。转到滤镜>扭曲>玻璃。将失真设置为16，平滑度设置为2，纹理设置为小镜头。
然后点击滤镜>笔画>交叉，设置笔画长度为8，锐度为6，强度为1。您的结果应该看起来类似于您在下面的图像中看到的。
双击main content bg图层，按照下图设置内阴影，在区域顶部添加一个小阴影。
步骤18:添加介绍段
现在我们将在主要内容区添加一段文本。
这个区域可以用来展示你自己和你的服务。用文字工具添加一段文字，如下图所示。我用的字体:Rockwell，字号:26pt，颜色:#eeeeee，并将文字居中。
双击文本图层打开图层样式窗口，按照下图设置投影样式。
步骤19:为主要内容创建背景
用圆角矩形工具创建一个圆角矩形(130,940px * 380px)。Activate the guidelines (Ctrl/Cmd + to help you create the rectangle.
命名此图层为content bg，双击打开图层样式窗口，按照下图设置图层样式。描边的颜色:#4c5154。
现在我们将在我们之前创建的矩形的顶部和底部添加一个阴影。复制content bg图层，将其从图层面板底部的“创建新图层按钮”上拖动。命名此新图层为shadow。右键单击它，选择清除图层样式。更改此图层的颜色为黑色，并将其拖动到content bg图层的下方。右键单击阴影图层，选择转换为智能对象。
然后点击滤镜>模糊>高斯模糊，设置半径为7px。正如我提到的，我们将只在矩形的顶部和底部添加阴影。要实现这一点，去层>蒙版>隐藏所有。
一个黑色的面具将添加到你的“阴影”层，这意味着阴影现在是看不见的。选择一个大的白色软刷(B)，用它在矩形的中间区域上绘制，以便显示矩形顶部和底部的阴影。看看下面的图片作为参考。
步骤20:创建“Services”区域
创建一个新组services。下载这个一组图标，打开提供的。psd文件，并移动星形图标到您的网页布局文档，在您的圆角矩形的顶部。一定要在图标和矩形的边距之间留出一些空间。命名此图层为star icon，双击打开图层样式窗口，改变渐变的颜色为#505356和#a1a5a8。用文字工具在图标旁边写上Services。我用的字体:Rockwell Regular，字号:22pt，颜色:#5e6468提示:要选择你想要的图标，而不必浏览所有的图层，选择移动工具(V)，从文档上方选项栏的下拉菜单中选择“图层”。现在按住Ctrl/Cmd键并单击要使用的图标。该图标的层将被自动选择，你可以移动到你的网页布局文档。
现在使用文字工具(T)添加一个服务列表。Activate the guides (Ctrl/Cmd + to help you create this content column. Also, add an icon for each service listed.
例如，我在网页设计服务中使用iMac图标，在SEO服务中使用烧杯图标，在iPhone/iPad应用程序服务中使用iPad图标。标题的字体:Rockwell Regular，字号:18pt，颜色:#5e6468。文字段落的字体:Lucida Sans Regular，字号:12pt，颜色:#5e6468。使用组来组织所有这些层，如下图所示。
步骤21:创建“Portfolio”区域
创建一个新组portfolio。将手提箱图标从下载的图标包中移动到此文件夹中。然后从iMac图标复制图层样式并粘贴到此图层。用文字工具(T)写下单词Portfolio，使用和services区域相同的字体和颜色。
创建一个新组portfolio items。用矩形工具创建一个正方形(130,130,130,130,130,130,130,40,40,40,40,40,80px)，尺寸:80px * 80px，颜色:#c8ccce。命名此图层为border，右键单击并选择转换为智能对象。双击该图层打开图层样式窗口，按照下图设置样式。
描边的颜色:#bababa。然后在这个图层上添加一个噪声过滤器，设置如下图所示。
用矩形工具，按住Shift键在border图层的中间创建一个正方形。
命名此图层为image_holder，并添加1px的描边，颜色:#bababa
按住Ctrl/Cmd键并选择border图层和image_holder图层。复制这些图层8次，并按下图排列。
作品集项目之间的距离为20px。
步骤22:创建“About”区域
创建一个新组about。将“user”图标从下载的图标包中移动到这个组中，并应用与“services”和“portfolio”区域图标相同的图层样式。用文字工具在图标旁边写上文字About。用矩形工具创建一个矩形(130,130,130,130,130,130,130,130,0,0,0,0,0,0,0,0,0,0,1)。右键单击该图层并选择转换为智能对象。使用与作品集项目边框相同的图层效果和滤镜效果。在之前创建的矩形的中间创建一个新的矩形。
命名此图层为image_holder，并添加1px的描边，颜色:#bababa在Photoshop中打开一张你想在“关于”部分使用的图片。使用移动工具(V)将它移动到你的网页布局文档，在image_holder层之上。
命名此图层为image，右键单击并选择创建剪贴蒙版。现在你的图像只在image_holder层的区域可见。用文字工具在图片下方添加一些文字。
字体:Lucida Sans Regular，字号:12pt，颜色:#5a6064。
步骤23:为主内容区域创建按钮
创建一个新组buttons。选择圆角矩形工具(U),设置半径为4 px和创建一个圆角矩形的尺寸由38 px 190 px。命名此图层为button，双击打开图层样式窗口，按照下图设置图层样式。描边的颜色:#415c66。
用矩形工具在圆角矩形的右侧区域创建一个矩形。颜色:#72a3b5。命名此图层为dark rectangle，并添加1px的描边，颜色:#608c9d右键单击该图层，选择创建剪贴蒙版，使其仅在按钮图层的区域可见。用文字工具在按钮上写上View portfolio。
字体:Rockwell Regular，字号:20pt，颜色:#effbff。然后复制这个符号“»”，并将其粘贴到按钮的右侧区域，也就是我们创建的深色矩形区域。
现在我们将为按钮添加一些噪声。
按住Ctrl/Cmd键，点击button图层的矢量蒙版，对其进行选择。在“暗矩形”图层上面创建一个新图层，用白色填充选区。命名此图层为noise，右键单击并选择转换为智能对象。
然后点击滤镜>噪声>添加噪声，按照下图设置。设置此图层的混合模式为正片叠底50%，以去除白色。
步骤24:创建“雇用我”按钮
与创建投资组合按钮类似，创建一个“雇用我”按钮。
看看下面的图片作为参考。
步骤25:添加分隔符
现在，我们将为主内容区域创建两个分隔符。创建一个新组separators。用直线工具(U)从圆角矩形的顶部到底部创建一条垂直线。设置颜色:#ffffff，命名此图层为1px line。复制这个图层(右键单击并选择复制)。更改新行颜色为#abb0b3。用移动工具向右移动这个图层一个像素。选择两个线条图层并复制它们。然后使用移动工具(V)在其他两个内容列之间移动它们。
给separators组添加一个蒙版(图层>层蒙版>显示全部)。然后选择渐变工具(G)，按住Shift键并拖动一个黑色到透明的渐变在你的分隔线的顶部，使他们淡出。然后在分隔符的底部拖动另一个渐变。
看看下面的图片作为参考。
步骤26:创建“奖状”区域
如果你是一名自由职业者，在你的在线作品集上发布与你共事过的客户的评价可以为你带来更多的客户和项目。在本节教程中，我将向您展示如何设计奖状，使它们脱颖而出。
创建一个新组，命名为“奖状”。用矩形工具创建一个矩形(130,200)，尺寸:1200px * 500px，颜色:#45494c。命名此图层为bg，右键单击并选择转换为智能对象。然后点击滤镜>噪声>添加噪声，按照下图设置。
双击该图层打开图层样式窗口，按照下图设置投影样式。
用直线工具在上一步创建的矩形的顶部创建一条垂直线，颜色:#373a3c。命名此图层为1px line复制这个图层，用移动工具向下移动新图层1px。改变新线条的颜色为#5a5f63。
步骤27:创建“奖状”标题
激活参考线(Ctrl/Cmd +;)。将聊天图标从下载的图标包中移到“证词”组中。把这个图标放在“奖状”区域的左上角。
从你之前使用的图标图层中复制图层样式并粘贴到这个图标上。用文字工具在图标的旁边写上文字“certificates”。我用的字体:Rockwell，字号:22pt，颜色:#c5cacd
步骤28:创建一个“奖状”布局
现在我们将创建奖状的实际设计。创建一个新组，命名为“demonstrial #1”。用圆角矩形工具(U)创建一个圆角矩形(130,130,200)，尺寸:490px * 120px。命名此图层为text bg。为这个矩形添加1px的描边，颜色:#252729。距网页布局的左边缘30px的距离。我们将使用该区域添加客户端的照片/标志。
现在我们将为客户端照片/logo创建一个区域。
用圆角矩形工具创建一个圆角矩形(130,988)，尺寸:60px * 60px，颜色:#747a7f。命名此图层为border。选择钢笔工具(P)，并确保从你的图像上方的选项栏的“形状图层”按钮是激活的。然后为“border”图层创建一个三角形，如下图所示。命名此图层为arrow。用矩形工具(U)创建一个正方形(740,50px)，尺寸:50px * 50px。命名此图层为image_holder，并把它放在border图层的中间。
用文字工具(T)为推荐区域添加一段文字。
字体:Lucida Sans，字号:12pt，颜色:#6f7274。
现在，我们将创建一条虚线，将证言与客户信息分隔开来。创建一个新文档(Ctrl/Cmd + N)，尺寸:10px * 1px。新建一个图层(Ctrl/Cmd + Shift + N)。
用矩形选框工具创建一个矩形选区，尺寸:6px * 1px。用黑色填充选区。隐藏背景图层，点击编辑>定义图案。
给你的图案一个名字，然后点击OK。现在可以关闭这个文档了。回到你最初的网页布局文档，选择直线工具(U)创建一条水平线，尺寸:430px * 1px。
设置此图层的填充为0%，不透明度为20%。双击该图层打开图层样式窗口，按照下图设置样式叠加。
用文字工具在虚线下面添加一些客户端信息。
为每条信息(姓名、公司、网站)添加一个图标。我使用自由变换(Ctrl/Cmd + T)来改变这些图标的大小。此外，我将图层转换为智能对象，并应用颜色叠加，颜色:#7e8082。
步骤29:创建更多的奖状
复制“证言#1”组，把新的证言放在第一个证言的下面。
步骤30:创建联系人表单
创建一个新组contact。在此图层中添加信封图标，并使用与其他图标相同的图层样式。用文字工具在图标旁边写上Contact me。我用的字体:Rockwell Regular，字号:22pt，颜色:#c5cacd
选择矩形工具(U)创建联系人表单，颜色:#eeeeee。对联系人表单的每个字段使用下图中的图层样式设置。描边的颜色:#393c3e。
用文字工具在每个字段里面写上它所代表的内容。
创建一个发送按钮，尺寸:100px * 28px，就像你创建的portfolio和hire me按钮一样。
步骤31:创建页脚
创建一个新组Footer。用矩形工具在你的网页布局的底部创建一个矩形(40px)。命名此图层为footer bg。用直线工具在页脚的顶部创建两条水平线。暗线的颜色:#303436，亮线的颜色:#4a5053。用文字工具在你的页脚中间添加一些版权声明。字体:Lucida Sans Regular，字号:12pt，颜色:#a8aeb1。
最终结果
以下是本教程的最终网页布局。我希望你喜欢它，你学到了一些新东西。在下面的评论区分享你对本教程的看法。
感谢您的阅读。
下载源文件
- photoshop_dark_textured_portfolio(zip, 5.30 mb)
