预览
点击下面的预览图来查看布局全面．
步骤1:设置你的ps画布
我们需要做的第一件事是创建一个1024x900px的新文档。这将是一个很好的工作大小的网页布局。
使用油漆桶工具(G)，用深蓝色(#0b2533)填充默认的白色背景层。
步骤2:创建网页标题形状
现在转到工具面板，选择圆角矩形工具(U)，在选项栏中设置半径为10px。
在画布的顶部创建一个圆角矩形，宽度约为970px，用作布局的页眉/报头。使用移动工具(V)将其水平居中。
第三步:给头部形状图层添加图层样式
现在我们想给圆角矩形添加一些图层样式。
在图层面板中右键单击圆角矩形图层，从菜单中选择混合选项，打开图层样式对话框。添加一个渐变叠加图层样式，给我们的头部添加金属橙色。
步骤4:创建站点名称/徽标
使用一个简单的字体(我用Fruitger对于logo和无数的职业为标记线)，拉出水平文字工具(T)，并布局你的标志在我们的标题的左侧。
确保你的网站名称和标签线在不同的文本层上，这样你就可以独立地移动它们。
第五步:在头部上创建顶部斜角
Ctrl/Cmd +点击你的圆角矩形图层，在它周围自动创建一个选框。在新图层上用白色(#ffffff)填充选区。
当仍然选中时，用移动工具(V)向下移动你的选区(大约1px或2px，取决于你想要的斜角有多大)，然后点击编辑>清除。
继续，改变图层的混合模式为柔光，然后降低不透明度为65%。
步骤6:制作主导航栏按钮
是时候制作导航菜单了。
用圆角矩形工具在头部的右上方画一个小圆角矩形。
使用矩形选框工具(M)在形状的顶部做一个选择，然后选择编辑>清除(或点击删除键)。
第七步:给导航栏按钮添加图层样式
接下来，我们将设置导航栏按钮的样式。
我们将通过添加阴影图层样式和渐变叠加图层样式来做到这一点。
投影图层样式
渐变叠加图层样式
步骤8:在导航菜单栏按钮上创建3D效果
使用多边形套索工具(L)，在按钮的左侧做一个三角形选区，让它看起来像是悬挂在头部上方。用蓝灰色填充选区(#657681)。
第九步:给按钮一个放射状的辉光
用椭圆选框工具加羽化，宽度约15px，在按钮中心周围画一个选区。
在新图层中，用白色填充选区(#ffffff)。将图层的混合模式改为柔光，并将不透明度降低到52%左右。
在按钮的形状层(不是径向发光层)，按Ctrl/Cmd +点击图层选择它。然后，通过选择>反转你的选区(Shift + Ctrl/Cmd + I)。再次选择你的径向发光层，并按下删除键来删除按钮外面的区域。
步骤10:在按钮上添加底部3D效果
同样，我们需要按Ctrl/Cmd +点击按钮的形状图层，在它周围做一个选择。然后新建一个图层(在径向发光图层的下方，在按钮形状图层的上方)，用白色(#ffffff)填充选区。使用矩形选框工具(M)，选择一个不包括按钮下部5px-6px的选区。
选择编辑>清除以移除白色矩形的顶部。继续，将图层的混合模式更改为叠加，然后将其不透明度降低到44%左右。用水平文字工具(T)在按钮上添加文字(比如“Home”)。
步骤11:制作更多的导航菜单按钮
重复此过程，为您的主导航栏创建更多链接项。我又创建了三个导航菜单栏按钮。
步骤12:创建内容区背景
让我们继续为我们的内容区域制作背景。
用你的矩形选框工具(M)，选择一个宽度横跨你的头部，高度约460px的选区。用浅蓝灰色(#b7c3c1)填充选定区域。
让我们给内容区背景一个渐变叠加。
在头部创建1px的水平插入
让我们回到头部。我们需要在橙色渐变的底部添加一点光泽。这是一件小事，但细节很重要。
从橙色头部区域的底部1px处创建一个1px高的选区。在新图层中，用白色(#ffffff)填充选区。将图层的混合模式更改为柔光，你最终会得到一个1px的插入效果。
步骤14:在左侧创建侧边栏
让我们转到侧边栏。用矩形选框工具(M)在内容区域的左侧做一个选区;宽度应该在180px-200px之间。用任何颜色填充选区(稍后我们将使用图层样式给它上色，所以此时你选择的颜色无关紧要)。
接下来，我们给侧边栏一个内阴影和一个颜色覆盖。
内阴影图层样式
颜色叠加图层样式
在右边做一个垂直的分隔线
我们想在侧边栏和主内容区之间创建一个1px的垂直分隔符。选择从上到下1px的垂直分隔线，并在新图层中填充灰色(#4a5452)。
然后降低分割层的不透明度到37%左右。
步骤16:添加侧边栏菜单标题
使用水平文字工具(T)，前景色设置为深蓝色(#1e2e36)，在侧边栏的顶部添加一个标题。我使用的文本是“按类别浏览”。
让我们用投影图层样式来样式标题文本图层，这将使它流行插入/凸版文字效果．
步骤17:使活动的侧边栏菜单项成为背景
用矩形选框工具(M)在“按类别浏览”标题的正下方做一个选区，填充黑色(#000000)。这将作为您的活动类别链接的背景。
使用多边形套索工具(L)，做一个选择，使活动类别背景的右侧形状像一个向右指向的箭头。选区完成后，选择编辑>清除或按删除键删除不需要的区域。
对于活动类别背景的颜色，我们将使用蓝色渐变叠加图层样式。
给菜单项背景设置1px边框
Ctrl/Cmd +点击你的图层选择它，然后在自己的图层上用白色(#ffffff)填充选区。不要取消选择(如果你取消了，只需按Shift + Ctrl/Cmd + D重新选择)。点击:选择>修改>契约，在契约单位选项中指定1px。
选择“编辑>清除”。这应该给我们的活动类别链接背景周围一个白色的1px边框。
降低图层的不透明度为40%，然后给1px的边框一个蓝白渐变叠加图层样式。
使用矩形选框工具(M)在活动菜单背景的底部创建一个1px的直线选区，并在新图层上填充黑色(#000000)。
降低新图层的不透明度为15%。
步骤19:为非活动类别链接设计背景
然后，我们想要显示非活动类别将如何显示。
使用矩形选框工具(M)在我们的活动类别背景下面放置一个选区，然后在一个新图层上，用深灰色(#1f2324)填充它。
对于非活动类别链接的背景颜色，我们将使用渐变叠加图层样式。
步骤11:在类别链接之间创建水平分隔
使用矩形选框工具(M)，画一个1px高的选区，作为类别链接之间的水平分隔线。
在新图层中，用白色填充选区(#ffffff)，并将图层的不透明度降低到19%左右。
步骤12:添加类别名称和图标
侧边栏剩下的就是添加一些图标和文本。我将让您找到自己喜欢的图标集来使用(或者根本不使用任何图标)。
使用水平文字工具(T)，文本的颜色设置为白色(#ffffff)。我用的字体是Helvetica Bold, 11pt大小。
这就是我们的侧边栏类别链接。
在内容区域的右上角添加一个阴影
让我们通过在内容区域的右上角添加一个阴影来使内容区域更有趣一点。用矩形选框工具(M)在右上方画一个矩形选区，在新图层上填充黑色(#000000)。然后使用椭圆选框工具剪切黑色矩形区域的左侧部分(当您对椭圆选择满意时，只需按Delete键)。
同时，将该图层的不透明度降低到5%左右。再次使用矩形选框工具(M)，在内容区域的顶部，就在橙色标题的下方做一个选择。用黑色填充选区(#000000)，然后降低图层的不透明度为12%。
步骤14:制作特色内容部分
用你的矩形选框工具(M)在内容区域的顶部选择一个选区，在所有的边都留下一些空白。该区域将包含我们的特色区域图像，可用于推广您的特色项目。在新图层上用黑色(#000000)填充特色内容区域的选区。
要样式我们的特色内容区域部分，我们将添加一个投影和渐变叠加图层样式。
投影图层样式
渐变叠加图层样式
第15步:添加一个特色项目图像和填充内容
我继续为标题和描述添加了一些填充物，以及一个特色项目图像。例如，你可以使用你引以为傲的设计项目的截图。
使用一个lorem ipsum生成工具，以获得一些文本内容与水平文字工具(T)。
步骤16:制作“detail”栏
我们现在想做一个“细节”栏，这是一个用户界面元素，作为我们的特色项目图像的导航方案，让你的用户滚动你的工作，并为你的潜在客户提供一点信息。使用矩形选框在我们在上一步中放置的填充内容下面创建一个又短又宽的矩形选区。
填充为黑色(#000000)。
通过使用图层样式对话框窗口添加颜色渐变来样式细节栏。
接下来，使用矩形选框工具(M)在栏的顶部添加1px高的边框。
确保选区距离栏的顶部1px。在新图层上，用白色(#ffffff)填充1px的边框，并将新图层的不透明度降低到53%左右，并将混合模式设置为柔光。
步骤17:设计“细节”栏上的进度圈
用椭圆选框工具按住Shift键在条的左边画一个圆。
填充白色(#ffffff)。这将作为哪个功能项目的用户目前是在指示。
添加一个渐变叠加样式的圆圈。
然后，我们需要为非活动项制作圆圈。创建另一个与第一个圆圈相同大小的圆圈(或复制第一个圆圈，并将图层样式更改为下面讨论的样式)。然后使用内阴影和渐变叠加给非活动项目圆圈它的颜色。
内阴影图层样式
渐变叠加图层样式
接下来，复制您刚刚制作的圆圈，使其成为您想要的任意数量的非活动项目圆圈。也添加一些文字和图标到我们的“细节”栏。
步骤18:创建内容区域的底部部分
添加内容区域的底部，使用1px的水平线，就像我们在前面的步骤中使用矩形选框工具所做的那样。
然后用矩形选框工具(M)在底部区域周围画一个选区，然后填充为蓝灰色(#8fa09d)。
创建页脚区域
最后一步是创建页脚。使用圆角矩形工具(U)在布局的底部创建一个矩形，半径设置为10px -确保这个图层在除了背景图层之外的所有其他图层的下面。
给页脚区域一个渐变叠加图层样式。
接下来在图层面板中按Ctrl/Cmd +单击新创建的圆角矩形图层，选择它。新建图层，用黑色填充选区(#000000)。
现在，将选区(不是图层，只是选区)向上移动约6px。
选择编辑>清除，然后降低该图层的不透明度为19%左右。
同样，我们要按Ctrl/Cmd +点击页脚的背景图层，选择它，并在新图层上用黑色(#000000)填充选中的区域。
然后我们想要使用椭圆选框工具(M)在中间做一个选择，给脚一个金属外观的表面。创建选区后，点击编辑>清除，删除选区内的区域。
降低图层的不透明度至5%左右。
我们需要做的最后一件事是用水平文字工具(T)在页脚添加一些关于你的作品集网站的描述。我使用了Helvetica字体，在我的文本图层上使用了投影和渐变叠加选项。
投影图层样式
渐变叠加图层样式
教程汇总
本教程一步一步地用大量的截图向你展示了如何创建一个现代外观的网页布局，这将是个人或机构投资组合的完美选择。
PSD模型可以转换为功能齐全的HTML/CSS布局，甚至可以移植到CMS/发布平台，如Drupal或WordPress。我们使用基本的Photoshop工具，如选框选择工具，形状工具和图层样式来创建这个美妙的布局。
下载教程源文件
- modern_portfolio_weblayout(zip, 0.67 mb)
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识并成长为个人。
