预览
这是我们要创建的网页布局。点击下面的图片来查看全尺寸版本．
资源
- 功能划分的社交图标
- 纸飞机通过本格里宾(这个图像不是免费的;你可以花3美元得到它，或者如果你有预付定金，你只需要支付1美元。
- 博物馆的字体通过exljbris字体铸造
步骤1:理解网格
下载960网格并解压缩存档。
在Photoshop模板文件夹中，你会发现三个。psd文件。每个网格都有一定数量的列(12、16和24)。对于这个布局，我们将使用16列网格。
所以，打开文件960年_grid_16_col.psd文件在Photoshop。如您所见，在您的文档中有16条红色(几乎是粉红色)垂直条纹。我们将在这些红色垂直条纹中创建布局。
在图层面板中，你有两个组:16 Col Grid(包含所有的红色竖条纹)和Layer 1(我们不需要这个图层，所以你可以删除它)。要显示或隐藏网格，单击图层面板中“16 Col grid”组的眼睛图标来切换其可见性。布局的所有元素都应该创建在这个组的下面，所以它必须一直在顶部。
psd文件还包含指导方针，这将非常有用。要显示或隐藏指南，请查看>显示>指南(或按Ctrl/Cmd +;)。这几乎是你需要知道的关于网格的一切。
在我们开始之前，确保你的信息面板是打开的(窗口>信息)。在本教程中，我将要求您创建具有一定大小的形状，当您创建它们时，您将能够在信息面板中看到形状的确切宽度和高度。
步骤2:修改画布的大小
为了给我们更多的空间高度，我们需要增加画布的大小。
转到图像>画布大小和改变高度为1920 px．
步骤3:创建布局的背景
选择矩形工具(U)创建一个白色的矩形，大小如下所示940 px通过1920 px．Make sure that Photoshop’s Guides are activated (Ctrl/Cmd + so that you can create the rectangle easily.
命名此图层bg，双击打开图层样式窗口，按下图设置图层样式外发光而且中风图层样式。
步骤4:创建头部
创建一个新组，命名为头”。然后选择矩形工具(U)创建一个矩形，使用颜色# aedee1．命名此图层头bg，双击它，并使用下面图像中的设置渐变叠加图层样式。
第五步:场地名称凸版处理
用文字工具(T)写你的布局的名称，使用颜色# 93 b9bb．
我用过字体博物馆700年对于“创造性”这个词和博物馆300年“页码”。现在我们将使用Photoshop的图层样式创建一个凸版印刷类型的处理。双击文本图层打开图层样式窗口，按照下图设置图层样式内阴影，内发光,斜面和浮雕图层样式。顺便说一下，如果你想了解关于这项技术的更详细的教程，请查看Jacob的教程插图排版教程《Six Revisions》(使用了不同的技巧)。
步骤6:在头部创建一个小云
创建一个新组，命名为云”。然后选择椭圆工具(U)，按住Shift键保持比例，并创建一些不同大小的白色圆圈。然后用移动工具(V)排列所有这些圆，形成一个云。设置“cloud”组的不透明度为80％．
步骤7:创建一个“雇用我”的横幅
现在我们要做一张小纸片，在上面写一段呼吁行动的文字，来吸引潜在的客户。一个强有力的行动呼吁对于一个作品集网站来说是非常重要的，因为它可以鼓励那些可能想要雇佣设计师的访问者与网站所有者联系。创建一个新组，命名为雇用我”。然后选择矩形工具(U)，在头部的右侧创建一个小矩形# f7efda．命名此图层纸，双击打开图层样式窗口，按照下图设置图层样式。
第八步:弯曲纸张的一角
现在我将向你展示如何在Photoshop中创建一个弯曲的角落效果。
首先，点击paper图层的矢量蒙版使其激活。然后选择钢笔工具(P)，确保“形状图层”按钮被激活，并从选项栏中选择从形状区域减去按钮。现在用钢笔工具在黄色矩形的右上角创建一个三角形，如下图所示。
步骤9:在弯曲的纸张上应用渐变叠加
创建一个新图层，用钢笔工具创建一个三角形，如下图所示# f1e9d3．命名此图层角落里，双击它并使用下面图像中的设置渐变叠加．
步骤10:给纸角添加阴影
在“corner”图层下面创建一个新图层。
用钢笔工具创建一个黑色三角形，如下图所示。右键单击新图层并选择转换为智能对象．然后转到滤镜>模糊>高斯模糊，使用一个2 px半径。
给这个图层添加一个蒙版(图层>图层蒙版>显示全部)，选择一个黑色的小笔尖(B)，用它在纸角右侧的阴影上涂抹，擦除它。命名此图层影子，并将不透明度设置为15％．
步骤11:在纸张上添加杂色
现在我们要在纸张上添加一些杂色，让它看起来更真实。
Ctrl/ cmd -点击paper图层的矢量蒙版，选择纸张。创建一个新图层在该组的所有其他图层之上，并使用白色填充选区(# ffffff)使用油漆桶工具(G)。将这个图层转换为一个智能对象，然后点击滤镜>噪点>添加噪点，按照下图设置。
命名此图层噪音并将其混合模式设置为乘图层不透明度为15％．在接下来的步骤中，我们将为布局的其他元素添加噪声，我将参考这一步，所以你可能想要记住这个方法。
步骤12:在纸上添加文字
现在是时候添加你的行动号召文本了。
用水平文字工具(T)在纸上用该颜色书写一段文字# 514 c3f还有字体Museo。
步骤13:添加一个纸飞机
从网上下载一张纸飞机的图片，然后在Photoshop中打开。然后使用移动工具(V)移动飞机到你的文档。
的图像我用的是来自GraphicRiver它的费用是3美元(如果你有预付定金，则是1美元)。将此图层转换为智能对象。然后进入编辑>自由变换(Ctrl/Cmd + T)，按住Shift键保持比例，改变纸飞机的大小，并旋转它。
我的飞机指向行动号召横幅，使其更加引人注目。点击滤镜>杂色>添加杂色，参照下图进行设置。然后将此图层命名为纸飞机，双击打开图层样式窗口，使用下图中的设置阴影图层样式。
步骤14:在飞机后面创建虚线
我用Adobe Illustrator(是的，我欺骗了一点点，但你也可以用Photoshop -只是不会那么容易)在平面后面创建虚线。如果你没有Illustrator，你可以下载并使用我的虚线PNG图像被称为dashed_line.png(Windows用户的提示:右键单击其中一个链接并选择另存为)．在Photoshop中打开它，并使用移动工具(V)将它定位在画布上。
可选:适用于Adobe Illustrator用户
如果有的话有Adobe Illustrator并知道如何使用它，你可以按照下面的步骤。打开一个新文档(Ctrl/Cmd + N)，并使用矩形工具(M)创建一个大的灰色矩形。然后选择钢笔工具(P)创建一个路径，如下图所示。
使用一个1 pt白色(# ffffff)笔划和没有填满．然后打开笔画面板(窗口>笔画)，按照下图进行设置。使用选择工具(V)选择你的虚线，复制它(Ctrl/Cmd + C)，回到Photoshop，并将其粘贴为智能对象(Ctrl/Cmd + V)。
命名此图层行，然后把它放在“纸飞机”层下面。使用自由变换(Ctrl/Cmd + T)旋转这行你想要的方式。
步骤15:创建导航栏
在header组下面创建一个新组，命名为导航栏”。然后选择矩形工具(U)创建一个矩形的尺寸940 px通过40像素还有颜色# c0e332．命名此图层"导航栏bg，双击它并使用下面图像中的设置。
步骤16:制作1px的细线
选择直线工具(U)，设置权重为1 px并在导航栏的顶部使用颜色创建一条水平线# 7 e961d．
命名此图层1px暗线”。按Ctrl/Cmd + J复制此图层，并将新行移动到导航栏底部。
步骤17:给1px的线条一些深度
创建一个权重为的新行1 px使用直线工具(U)和颜色# d8fd42．命名此图层1px光线然后把它放在第一条黑线下面。
复制这个图层(Ctrl/Cmd + J)，并把新的图层放在第二条黑线的上方。
步骤18:输入导航菜单项
用文字工具书写导航菜单项的名称。字体:Museo 700，颜色# 336600．
步骤19:创建特色内容区域
在navigation bar组上方创建一个新组，命名为特色”。然后选择矩形工具(U)创建一个矩形的尺寸940 px通过450 px使用颜色# e6b633．命名此图层特色区域bg”。
步骤20:添加1px的线条
网页设计是关于细节的。用直线工具(U)创建两条水平线1 px在黄色矩形的底部。
- 对于暗线，使用颜色# 755 c18并将图层命名为"1px暗线”。
- 对于浅色线，使用颜色# ffdf87并将其图层命名为"1px光线”。
步骤21:为特色内容背景添加噪声
现在我们将为特色内容区域的背景添加一些噪声，就像我们对纸张所做的那样。
Ctrl/ cmd -点击featured area bg图层的矢量蒙版，选择黄色矩形。然后创建一个新图层，用白色填充选区(# ffffff)使用油漆桶工具(G)。将此图层转换为一个智能对象。
然后点击滤镜>杂色>添加杂色，按照下图进行设置。设置此图层的混合模式为乘，降低图层不透明度为25％，并命名为“噪音”。
步骤22:为标题创建一个蓝色栏
创建一个新组，命名为蓝色酒吧”。然后选择矩形工具(U)创建一个矩形，如下图所示# 1 e92e4．命名此图层蓝色酒吧双击打开图层样式窗口，按照下图的设置添加一个渐变叠加而且中风图层样式。然后选择移动工具(V)移动矩形10 px在布局的左边缘之外，距离为20 px从导航栏。
步骤23:创建3D效果
创建一个新图层，选择钢笔工具(P)，在矩形的左下角创建一个小三角形，使蓝色条看起来像3D的。命名此图层三角形，双击它并使用下面图像中的设置渐变叠加．
步骤24:在蓝色栏上添加文本
用文字工具(T)输入"特色”在蓝色栏上使用Museo 700字体和颜色# ffffff．
步骤25:添加图像到特色内容区域
创建一个新组，命名为图片”。然后在Photoshop中打开三张你喜欢的图片，并根据尺寸裁剪每张图片290 px通过260 px．我只是用了一些随机的图片和截图六个修正以及来自我的网站PSDBURN。使用移动工具(V)在画布中移动每个图像，像下面这样排列它们。
添加一个内发光和一个中风对每个图像使用下面图像的设置来创建双描边效果。
步骤26:创建“read more”按钮
创建一个新组，命名为按钮”。然后选择圆角矩形工具(U)，设置半径为6像素然后用这个颜色创建一个圆角矩形# f8c539．双击该图层打开图层样式窗口，按照下图设置图层样式。然后用文字工具书写:阅读更多:在按钮上使用Museo 500的字体和颜色# 3 d382a．
这些在所有网站上都是非常重要的，尤其是对于那些有很多内容的大型网站，比如大学．
步骤27:创建一个“view portfolio”按钮
复制你在上一步创建的圆角矩形图层(Ctrl/Cmd + J)，并将新的圆角矩形向右移动。然后将其颜色更改为# dfd7c0，并将笔画颜色改为# ccc5b2．
使用文字工具(T)，字体:Museo 300，颜色# 3 d382a写”视图组合在你的纽扣上。
步骤28:创建一个灯
现在我们将创建一个灯，从特色内容区域照亮中间的图像。创建一个新组，命名为灯”。然后选择圆角矩形工具(U)，设置半径为7 px然后用这个颜色创建一个小圆角矩形# 8 f631e．双击该图层打开图层样式窗口，按照下图进行设置内阴影，内发光，渐变叠加,中风图层样式。命名此图层木”。在灯的木头部分添加一点噪音，就像你在第11步对纸所做的那样。使用一定量的5%均匀和单色噪声。设置这个噪声层的混合模式为正片叠底35%．
步骤29:创建灯罩我们的灯
我们将创建一盏灯来照亮我们的特色作品，这不仅象征着特色区域的含义，而且还将更多的注意力带到网络布局的这一部分。
用圆角矩形工具创建一个圆角矩形，如下图所示，颜色如下图所示# 9 ce340．确保这个图层的矢量蒙版被选中，点击排除重叠的形状区域按钮，并拖动一个新的矩形到第一个矩形的下半部分以擦除该区域。看看下面的图片作为参考。然后双击该图层，使用下图中的设置进行添加内发光，斜面和浮雕，渐变叠加而且中风图层样式。
步骤30:给我们的灯一个漂亮的渐变叠加
复制你在上一步创建的图层(Ctrl/Cmd + J)并设置它的填充为0％．右键单击该图层并选择清除图层样式．然后双击它并使用下面图像中的设置渐变叠加．
第31步:在灯罩上添加另一个渐变叠加
复制上一步的图层(Ctrl/Cmd + J)，并使用下面图像的设置渐变叠加．
步骤32:在灯罩上添加噪音
添加一些噪音的灯给它一点纹理使用相同的技术，你已经在第11步纸张。设置此噪声层的混合模式为乘并设置图层不透明度为15％．
步骤33:让灯罩有一定的深度
复制你在步骤29中创建的图层(“Shape 1”)，并把它放在“noise”图层之上。清除图层样式，并更改此形状的颜色为# eef8e2．
点击编辑>自由变换(Ctrl/Cmd + T)，减小形状的宽度，如下图所示。给这个图层添加一个蒙版(>图层蒙版>显示全部)，选择渐变工具(G)，从底部拖动一个黑色到透明的渐变到这个形状的中间。命名此图层突出，并将混合模式设置为覆盖图层不透明度为20％．
步骤34:制作灯泡
没有灯泡的灯是什么?在Shape 1图层下面新建一个图层，选择椭圆工具创建一个圆(按住Shift键创建一个完美的圆)，使用颜色# f6f3a2．命名此图层灯泡，双击它并使用下面图像中的设置内发光，渐变叠加,中风图层样式。
步骤35:创建光源从灯
在“light bulb”层上面创建一个新层。然后选择钢笔工具(P)创建一个白色的形状，就像你在下图中看到的那样。将此图层转换为智能对象。
然后选择滤镜>模糊>高斯模糊，设置半径为7 px．命名此图层光，并将不透明度设置为25％．
步骤36:创建图像旋转木马的右箭头
创建新组right arrow。选择椭圆工具(U)，在特色内容区域的右边缘中间创建一个圆。使用颜色# e6b633．命名此图层圆”。
给右边的箭头添加噪音
添加一些噪音在黄色的圆圈使用相同的技术，你已经在使用步骤11为了报纸。
步骤38:在圆上添加一个描边
复制circle图层(Ctrl/Cmd + J)，并将新的图层放在它的下面。双击该图层，并使用下图中的设置添加一个外发光和一个中风图层样式。
然后给这个图层添加一个蒙版(>图层蒙版>显示全部)。选择渐变工具(G)，从圆圈的左边拖动一个水平的黑色到透明的渐变到右边。看看下面的图片作为参考。
命名此图层中风”。
步骤39:创建实际的箭头
选择自定义形状工具(U)，在你的圆上创建两个箭头# fbf2db．下面使用的自定义形状被调用箭头2(它是Photoshop中的默认形状，是箭头自定义形状组)。我选择这个形状是因为它最像“Featured”蓝色栏文本中的箭头，在布局中给我们一些重复的设计元素。
步骤40:创建图像旋转木马的左箭头
复制“右箭头”组(右键单击并选择复制组)。点击编辑>对>进行水平翻转变换，并使用移动工具将其移动到布局的左侧。命名这个组"左箭头键”。
步骤41:添加图像的名称
创建一个新组，命名为图片的名字”。选择圆角矩形工具(U)，设置半径为5 px并创建一个白色(# ffffff)每个图像底部的圆角矩形，来自特色内容区域。添加一个中风使用下图中的设置为每个矩形设置图层样式。然后选择文字工具(T)，用字体在这些矩形内写下你的图像名称Verdana还有颜色# 38352 c．
步骤42:创建services区域
创建一个新组，命名为服务”。选择矩形工具(U),并创建一个矩形的高度340 px使用颜色# e6e2d5．命名此图层服务bg，并将不透明度设置为25％．
步骤43:添加“Services”蓝色栏
从特色区域复制“蓝色条”组，并将其移动到“services”组中。
然后用文字工具(T)将文字Featured更改为服务”。
步骤44:添加服务列表
创建一个新组，命名为导航”。用矩形工具(U)在蓝色矩形的下面创建一个矩形# edeadf．双击该图层打开图层样式窗口，按照下图设置图层样式渐变叠加．复制这个矩形三次，并使用移动工具排列它们。
步骤45:创建分隔
用直线工具创建带有重量的直线1 px分隔在上一步中创建的矩形。使用颜色# d9d6c9．然后将所有图层分组(Ctrl/Cmd + G)并命名为分隔符”。
步骤46:写出你提供的服务
用文字工具(T)书写一个服务列表，字体:Museo 300，颜色# 3 f3d36．
步骤47:为每个服务添加映像
现在，我们将为列出的每个服务添加一个代表图像。创建一个新组，命名为图片”。然后添加裁剪到尺寸的图像160 px通过210 px．从特色内容区域的图像中复制图层样式，并粘贴到此图像中，以获得相同的双描边效果。用圆角矩形工具(U)在图片的底部创建一个白色的圆角矩形。
然后添加1 px # 999381描边到这个图层。用文字工具(T)在矩形内用字体写下列表中第一个服务的名称Verdana还有颜色# 38352 c．
步骤48:添加更多的图像
再添加三张图片，对每一张重复前面的步骤。
然后移动第二个和第四个图像20 px向下(选择图像，选择移动工具(V)，按住Shift键并按向下箭头键两次)。这看起来比让每个图像都以相同的方式对齐更有趣。
步骤49:添加两个呼叫按钮
复制特色内容区域的两个按钮，并使用移动工具将它们移动到服务区域的图像下面。
然后将黄色按钮的文本更改为“今天就雇我吧!然后在它前面写几个字。看看下面的图片作为参考。现在，喜欢作品集网站上展示的作品的访问者/潜在客户有两个选择:聘请设计师或查看他的更多作品。
通过这些行动号召按钮，我们希望鼓励潜在客户采取行动，并与我们联系开展新项目。自从“今天就雇用我!”是我们最希望的行动号召，我们使用了更突出的颜色，并将其定位在左边，这对于从左到右的英语读者来说，将是他们首先看到的东西。
步骤50:添加两个隔板
用的权重创建两条线1 px在服务区的底部。
使用颜色# c0bcb1对于第一行和# ffffff对于第二题。
步骤51:创建博客区域的背景
在services组下面创建一个新组，命名为博客”。这将从博客文章摘录，这是现在许多投资组合。选择矩形工具(U),并创建一个矩形的高度345 px使用颜色# f8f5ec．命名此图层博客bg，并将不透明度设置为25％．
步骤52:在博客区域添加一个蓝色栏
从服务区域复制“蓝色条”组并向下移动。用文字工具将文字“Services”更改为“Services”博客”。
步骤53:写博客的类别
复制services区域的navigation组，并移动到blog组。然后使用移动工具(V)移动博客区域蓝色栏下的矩形。我们将使用这个列表来划分博客的类别。
用文字工具修改列表的文本。如果有必要，添加更多的矩形复制这些层之一，因为你需要很多次。
步骤54:添加两篇博文
创建新组posts。添加两张图片到你的博客区域340 px通过140 px．复制图层样式从其中一个图像从服务区域，并粘贴到这两个图像，以获得相同的双笔画效果。然后用文字工具在你的图片下面写一些文字。
使用字体Verdana用颜色# 222222浏览头条及# 444444对于文本块。
第55步:呼吁阅读你的博客
用文字工具(T)书写问题想要更多的文章和教程?在博客文章下面。然后在这个问题旁边添加一个按钮，文本为“阅读博客”。请注意:您可以从“services”组复制此按钮。
步骤56:更多的隔板
从服务区域底部复制两个分隔层，并使用移动工具(V)将它们移动到博客区域底部。
步骤57:创建About me区域
创建新组，命名为"关于，并将其移到“博客”组下面。
选择矩形工具(U),并创建一个矩形的高度200 px还有颜色# e6e2d5．命名此图层对bg，并将不透明度设置为25％．复制在前面步骤中创建的蓝色条组，将其移动到该区域的左上角，并将文本更改为About me。用文字工具在蓝色栏下面写几句话，然后你可以在文字下面添加一些社交图标。我使用的是Function，你可以免费下载。
最后，加上两行重物1 px在这个区域的底部。
步骤58:创建联系人区域
在about组下面创建一个新组，命名为联系”。使用矩形工具(U)创建一个矩形的高度450 px还有颜色# f8f5ec．命名此图层bg联系，并将不透明度设置为25％．复制先前创建的蓝色条组。
移动联系人区域左上角的新蓝条，并用文字工具将文本更改为"联系”。
步骤59:创建联系人表单发送按钮
使用矩形工具(U)创建一个联系人窗体。设置每个矩形的颜色为# ebe9e5．然后使用文字工具(T)和颜色# 8 c8a86将联系人表单的每个字段的名称写入其中。
在联系人表单下面添加发送按钮。您可以复制您之前创建的按钮之一，并将文本更改为“发送”。
步骤60:创建页脚
我们即将进入本教程的最后一步，所以请坚持下去!创建一个新组，命名为页脚”。然后使用矩形工具(U)创建一个矩形，高度为30 px还有颜色# e6e2d5．命名此图层页脚bg，并将不透明度设置为25％．用砝码加两条线1 px在页脚的顶部。
然后选择文字工具(T)写一个版权声明。使用字体Verdana还有颜色# 595753．
结论
我希望您能像我写这篇教程一样喜欢它。
我们涵盖了创建目前流行的设计元素的许多方面，如3D效果，凸版文本处理效果，使用网格布局我们的网页，等等。知道这些对任何人都很有用网页设计公司！走了60步，你成功了!
这是我们最终的布局。点击下面的图片放大．关于如何优化像这样有很多图片的网站的技巧，点击这里．
如果本教程在某种程度上启发了您，请将您的作品包含在设计指导Flickr组池拜托!
下载源文件
- creative_vibrant_portfolio(zip, 2.53 mb)
