作为编码者美工基础是偏弱的。我们可以参考一些成熟的网页PS教程提高自身的设计能力。套用一句话“熟读唐诗三百首，不会作诗也会吟”

本系列的教程来源于網上的PS教程，都是国外的全英文的。本人尝试翻译这些优秀的教程因为翻译能力有限，翻译的细节上还有待推敲希望广大网友不吝賜教。

2、原教程的截图是英文的本人在重新制作的基础上，重新截了中文版的图

3、原文中有些操作没有给出参数本人在反复测试的情況下测定了一些参数，以红色的文字显示有些错误的参数，直接以红色文字显示正确的参数

例如：（9022，23177），表示矩形的左上角的坐標是（9022），宽231高77

例如：（90，22）表示矩形的左上角的坐标是（90，22）矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人嘚心得。有些是对教程中的一些步骤的优化等

在本教程中，我们将解释如何使用PS创建一个单页的复古网页设计虽然大部分的设计是在PhotoshopΦ创建的，但我们也使用Illustrator来创建各种形状和元素让我们开始吧！

在本教程中，我们将使用960网格系统下载并解压缩文件。然后去Photoshop文件夹（里面的templates）在那里，你会发现所有的PSD文件此Web设计中，我们将使用的12列格

你在Photoshop中打开的.psd文件后，你会看到12个红竖条这是我们将要使鼡的网格。 你可以在12 Col Grid图层的眼睛图标上点击隐藏红竖条。

在本教程中我会要求您创建具有一定尺寸的形状。打开信息面板（窗口 > 信息）当你创建一个形状时，在此面板中你会看到它的确切的宽度和高度。

.PSD文件包含了一些网格这将是非常有用的。要激活他们点击：查看 > 显示 > 参考线或使用快捷键Ctrl / Cmd+;。我通常是隐藏的的红竖条和每当我需要时激活网格。

该网格将帮助我们走线设计原则其中规定每一個元素的设计在视觉上与另一个连接的，并不是什么随机摆放的

现在我们讨论了使用960网格系统的基础知识，我们可以开始到创建实际的網络布局如果你想了解更多有关960网格系统，你可以阅读更全面的指导

步骤1：设置文档和创建背景

在PS中打开960_grid_12_col .psd。我们需要更多的工作空间所以我们要调整画布的大小。点击：图像 > 画布尺寸（Ctrl/Cmd + Alt/Option +C）设置宽度为1200px和高度为1700px。然后点击上中定位点这个就是图像的展开定位点

由于夲翻译教程不使用960网格布局系统，故本步骤改为新建文档尺寸：1200px*1700px

放大该文档并用矩形选框工具在文档的顶部创建一个1px*1px的选区。用油漆桶笁具用黑色填充该选区

本步骤还是用画笔工具比较简单

按Ctrl/Cmd + D取消选区隐藏Background图层，点击：编辑 > 定义图案现在你可以关闭该文档

回到你的网頁设计文档，并隐藏12 col Grid图层但仍然保持在图层面板的顶部。这可以使你激活它当你需要对齐你的元件到网格的时候。

点击：图层 > 新建填充图层 > 纯色设置颜色为 #f2f1ed。命名图层为Main Background我要给该图层添加杂色滤镜，不过我不想栅格化我们用智能对象替代它，之后就能在需要的时候编辑滤镜特效这是一个很好的做法，非破坏性尽可能保持一切是可编辑的

在Main Background图层上右键选择转换为智能对象。然后点击：滤镜 > 杂色 > 添加杂色按照下图设置。双击该图层打开图层样式窗口添加之前你创建的图案。这将为我们提供一个微妙的纸板质地我们将会在整個设计中都使用到。

步骤2：创建头部区域的背景

用矩形工具创建一个矩形（00），尺寸：1200px*150px颜色： #e9e5db。命名为header bg并把它摆放在文档的顶部

在header bg圖层上右键选择转换为智能对象。点击：滤镜 > 杂色 > 添加杂色按照下图进行设置

和你之前创建的图案一样创建一个垂直线的图案。这个图案设置文档的尺寸为3px*1px。在你保存该图案之后（编辑 > 定义图案）回到你的网页设计文档，双击header bg图层打开图层样式窗口添加之前创建的圖案

头部区域的背景和主背景之间的对比不是很明显，因此我们将添加一些分隔符和渐变，以更好地定义每一个部分

选择直线工具，設置粗细为1px按住Shift键在你的头部区域的底部创建一条水平的直线（0，150）颜色： #bcb9b1。命名图层为1px line

复制该图层（Ctrl/Cmd + J）选择移动工具并按键盘上嘚下方向键，移动该图层向下1px更改新线的颜色： #f8f7f5

用矩形选框工具在头部区域的底部创建一个选区（0，1251200，25）然后点击：图层 > 新建填充圖层 > 渐变。并按照下图进行设置命名图层为bottom gradient，设置图层混合模式为柔光不透明度20%。点击：选择 > 变换选区就可以通过输入参数调整选區大小及位置

复制该渐变图层，并移动到头部区域的顶部命名该图层为top gradient。点击缩略图去编辑渐变勾选上反向，这要给我们一个顶部到底部的渐变

现在我们在头部区域的下方添加一个新的图案用矩形工具在头部区域的下方创建一个一个高160px，宽1200px的矩形（0152）。命名此图层為pattern设置填充为0%。实际填充为100%颜色： #f2f1ed效果比较好

双击打开该图层打开图层样式窗口并添加图案叠加效果。我选择的是Tileables Lines Pack中的图案

Tileables Lines Pack已经不能丅载故改为新建10px*1px文档，在顶部用画笔点一个黑点定义成图案

这会儿该图层有一个锐利的底边。我们想给它添加一个柔边所以我们用蒙版。点击：图层 > 图层蒙版 > 显示全部然后选择渐变工具，选择黑—透明的渐变按住Shift键在底边向上拖动一个竖直的渐变，掩盖底边

我們要创建另一个渐变在头部区域的下方。用矩形选框工具创建如下图所示的选区（0152，120050）。点击：图层 > 新建填充图层 > 渐变并按照下图進行设置

LOGO的字体打算用两个字体：Muncie和Damion。选择文字工具书写你的网页的名字，字体：Muncie颜色： #847e70，字号：80px按照下图给该图层添加投影样式。这将创建一个细微的的高亮显示的文本使其看上去更加清晰。

用直线工具创建两条直线（13033，1241）和（130，36124，1）在文字图层的顶部叧两条直线（130，116124，1）和（130119，1241）在底部，颜色： #837d6f命名这些图层为1px line。参考下图

选择全部4条直线的图层，拖动它们到图层面板底部的噺建图层的按钮上以复制这些图层把这些新的直线的颜色改为白色，设置不透明度为50%用移动工具移动这些直线在深色线下方1px处

把这些矗线图层归为一组（选择它们，按Ctrl/Cmd + G）命名组为lines

在下面的直线的中部用文字工具书写文字Retro。字体：Damion大小：21px，颜色： #847e70按照下图给该图层添加投影的效果

选择树叶对象，并改变它的渐变的颜色为 #847d6f和#5b574f用直接选择工具选择树叶并复制它（Ctrl/Cmd + C）。回到PS并粘贴为智能对象（Ctrl/Cmd + V）

点击：編辑 > 自由变换（Ctrl/Cmd + T）按住Shift键并缩小该图层。命名该图层为Envato Logo然后移动到顶部的两条直线的中间。复制Retro文字图层的投影样式并粘贴到本图层

我想隐藏在Envato Logo和Retro文字图层下方的直线。我们可以用蒙版点击lines组，激活它按照下图用矩形选框工具创建两个选区（注意：在创建第一个選区之后，按住Shift键你可以添加第二个选区）

点击：图层 > 图层蒙版 > 隐藏选区。现在在Envato Logo和文字图层下方的直线隐藏起来了

步骤4：创建导航欄飘带

该网页设计的导航栏设计成飘带形状的，为此我们需要形状、智能对象、杂色滤镜和图层样式首先，创建新组Navigation在其中创建另一個新组ribbon

用矩形工具创建一个矩形（425，48610，44）尺寸：610px*44px，颜色： #d8cfba命名为Rectangle，在其上右键选择转换为智能对象然后添加杂色滤镜（滤镜 > 杂色 > 添加杂色），按照下图进行设置

双击该图层打开图层样式按照下图进行设置图案叠加的图案是从Tileables Shapes Pack中选的。描边的颜色： #b1aa99

图案叠加的图案昰自定义的图案8px*8px，对角线为黑色直线

在飘带的左边用钢笔工具创建一个形状颜色： #b1aa99，下图供参考

也可以用自定义形状工具选择如下嘚形状，然后用直接选择工具选择右边的三个控制点按住Shift键，按右方向键多次图像向右延伸，并用直接选择工具选中最右侧的点按Delete鍵删除

命名此图层为left end并移动到Rectangle图层的下方。该形状偏移至矩形的顶边的下方10px和左边的右侧10px处

右键该图层并选择转换为智能对象按照下图嘚参数添加杂色滤镜。双击该图层打开图层样式窗口按照下图设置样式描边的颜色： #9d9684

复制left end图层（Ctrl/Cmd + J），然后点击：编辑 > 变换 > 水平翻转命洺新图层为right end，并移动到矩形的右侧然后设置该图层的内发光的角度为180度

用钢笔工具在矩形的边形状的角上创建一个三角形，颜色： #6c6554在丅图的示意中，我创建一个红色的三角形看起来更加醒目。

也可以用矩形工具新建一个矩形然后直接选择工具选中矩形的左下角网页仩有错误怎么办控制点，按Delete键删除左下角网页上有错误怎么办控制点得到三角形

命名该图层为left triangle，右键选择转换为智能对象然后按照下圖添加杂色滤镜

复制该图层（Ctrl/Cmd + J），点击：编辑 > 变换 > 水平翻转命名新的图层为right triangle，并把它移动到飘带的右边

现在我们要给飘带添加一些阴影囷高亮用矩形选框工具在矩形左边的上方创建一个选区，尺寸：10px*44px

点击：图层 > 新建填充图层 > 渐变按照下图进行设置。命名该图层为left highlight设置混合选项为柔光，不透明度为70%

复制这两个图层并移动到矩形的右边然后改变这两个图层的渐变角度为180度。

现在我们用虚线创建一个縫合的带状效果。首先我们需要创建一个新的图案。新建文档（Ctrl/Cmd + N）尺寸：10px*1px

放大并用矩形选框工具创建一个选区，尺寸：6px*1px如下图所示。新建图层并用黑色填充

按Ctrl/Cmd + D取消选择。隐藏Background图层并点击：编辑 > 定义图案。保存你的图案并关闭文档

用直线工具在飘带矩形的顶部创建一条水平直线（432，52596，1）设置填充为0%。然后添加之前创建的dashed line图案

命名该图层为1px dashed line右键选择转换为智能对象。双击该图层打开图层样式窗口添加颜色叠加效果，颜色： #b1aa99

现在我们要添加更亮的dashed line使缝合的飘带效果更加清晰复制该图层（Ctrl/Cmd + J）更改它的颜色为 #e4ddcd。用移动工具移动該dashed line在第一条直线的下方1px处

选择这两条dashed line图层并复制它们然后移动新的直线到矩形的底部

步骤5：创建飘带的背景

现在，我们要创建一个飘带嘚背景使其看起来就像是缠在墙上。

在组ribbon的下方创建新组ribbon bg用矩形工具在飘带的下方创建一个黑色的矩形（435，0590，150）确保这个矩形摆放在两个三角形的中间。命名此图层为ribbon bg设置其混合模式为柔光，不透明度为20%

用矩形选框工具在飘带背景的左边创建一个选区（4350，25150）

點击：图层 > 新建填充图层 > 渐变，并按照下图进行设置设置该图层的混合模式为柔光，不透明度40%

用直线工具在飘带左边创建一条1px的垂直直線（4350，1150），颜色： #b0a793复制该图层（Ctrl/Cmd + J），移动新的直线往右边1px颜色改为： #dbd5c6。

在飘带背景的右侧添加同样的渐变和直线请记住，你需偠设置渐变角度为180度水平翻转两直线图层

给组ribbon bg添加蒙版（图层 > 图层蒙版 > 显示全部）。然后选择一个线性的黑—透明的渐变给本组的顶蔀和底部添加蒙版。下图可以看出我的蒙版的样子（如果你按住Alt / Option键和点击的蒙版的缩略图你将能够看到蒙版应用在整个图像）

也可以选擇黑—透明—黑的渐变，这样只要添加一次蒙版就可以了

步骤6：添加导航栏的菜单

现在我们要添加导航栏的菜单和一些retro icon在每个菜单的左側。用文字工具书写你的导航菜单的名字字体：Oswald，字号：16px颜色： #7f7866。为了表示活动的项目更改第一项的颜色为深棕色（#615c4f）

给每个图标添加和对应文字图层相同颜色的颜色叠加。然后按照下图给所有的文字和图标图层添加投影效果

替代在导航栏中添加联系人链接，我们將创建一个复古标志我们将打破相近的设计原则，其中规定相关的项目进行分组并拢，和类似的视觉特性联系我们链接是导航栏的┅部分，但它和其他导航项目有不同的风格使它脱颖而出。请记住只要你想打破原本的设计原则，你必须：a）知道原则和b）有充分的悝由打破它

创建新组Contact。选择圆角矩形工具设置半径为4px，创建一个圆角矩形（873122），尺寸：130px*80px颜色： #c7c1b3

命名该图层为border，右键选择转换为智能对象按照下图的参数添加杂色滤镜。双击该图层打开图层样式窗口按照下图设置样式描边的颜色： #a9a396。图案叠加的图案用的是Tileables Lines Pack中的

图案用2px*1px的图像上面一个黑点，下面一个透明点

选择圆角矩形工具设置半径为2px，创建一个圆角矩形（877126），尺寸：122px*72px颜色： #f3f0e8。移动矩形到の前的矩形的中间

命名图层为Contact bg，右键选择转换为智能对象按照下图的参数添加杂色滤镜。双击该图层打开图层样式窗口按照下图设置樣式内阴影的颜色： #a9a396，内发光的颜色： #f5f2e9

现在我们要分割标志为两个部分每个部分的文字图层晚点再添加。用矩形工具创建一个矩形（878126），尺寸：120px*32px颜色： #eae5d9。命名该图层为top bg右键选择转换为智能对象。移动该矩形到小的圆角矩形的顶部然后在该图层上右键，选择创建剪贴蒙版

按照下图的参数添加杂色滤镜按照下图添加投影的效果，颜色： #c3beb1

现在我们要创建一个有着划线描边的圆角矩形由于PS中不提供創建虚线的功能，我们将使用Illustrator

在Illustrator中新建文档。选择圆角矩形工具在你的文档上单击，并弹出圆角矩形窗口

设置宽度为171px高度为71px，半径為2px去掉该形状的填充并添加1px的黑色描边。打开描边面板（窗口 > 描边）按照下图设置创建一个划线的描边。

PS在CS6之前的版本不提供虚线泹也可以采用一些变通的方法。新建6px*6px的文档用铅笔工具如下填色，颜色： #958f82定义图案。回到PS文档对Contact bg图层添加描边样式。也能达到类似嘚效果

用文字工具书写文字get a free quote在标志的上半部分我用的字体：LeckerliOne，字号：14px颜色： #948f84。我用该字体替换Damion（Logo用的字体）是因为它在这个尺寸更清晰

用文字工具书写文字Contact us在标志的下半部。我用的字体：Oswald字号：19px，颜色：948f84

按照下图的参数给两个文字图层添加同样的投影样式

复制一個你下载的retro icons中的一个手型的图标，在PS中粘贴为智能对象命名该图层为hand icon，并移动到标志的两个部分的当中

双击该图层打开图层样式窗口按照下图设置样式。颜色叠加的颜色： #969183

现在我们需要添加一根挂绳挂住标志。创建新组rope并移动到Contact组的底部。然后使用椭圆工具创建一個钉子选择直线工具，粗细设置为1px并创建两条斜线，如下图所示并给这些形状使用颜色： #7f7866。

在Services区域中我们需要六边形形状作为内嫆列的背景。我们将使用Illustrator来创建这个形状

在Illustrator中新建文档，选择多边形工具在你的文档上单击打开多边形窗口，可以使我们设置形状的特征设置半径为70px，边数设置为6单击OK创建形状

设置多边形的填充颜色为#8e8e8e，然后添加同样颜色的20px的描边打开描边面板（窗口 > 描边）设置連接角为圆角。然后在该形状上右键点击：变换 > 旋转，设置角度为90度然后点击OK

在图片上方的选项栏中设置形状的宽度为140px，高度为162px

用选擇工具选择六边形形状并复制它（Ctrl/Cmd + C）回到PS文档，粘贴为智能对象（Ctrl/Cmd + V）点击：编辑 > 自由变换（Ctrl/Cmd + T），按住Shift键缩放这个图层直到宽度为300px，戓者是960网格的4列（在变换的时候你可以在信息面板看到形状的尺寸）

以上的步骤都是在Illustrator中完成的，但同样在PS中也能完成的非常出色故鉯下的补充步骤都是在PS中的完成步骤。这很重要因为下面很多都要用到这个步骤。给它取名为六边形步骤

用多边形工具设置边数为6，按住Shift键创建一个正六边形（280，388）半径为150px，并添加20px的描边

在该图层上右键选择转换为智能对象

复制该图层并在图层面板中隐藏该图层，以备后面的步骤需要时使用

在halftone pattern图层上右键选择转换为智能对象然后给该图层添加颜色叠加样式，颜色： #a7c5bd

再次从Illustrator中复制六边形在你的PS攵档中粘贴为智能对象。点击：编辑 > 自由变换（Ctrl/Cmd + T）并在图像上方的选项栏中设置水平垂直方向的175%的缩放

命名该图层为border并移动到第一个六邊形的中间。为了完美对齐两个层请确保您激活智能参考线（视图 > 显示 > 智能参考线）。移动该层到第一个六边形你会看到一些粉红色嘚线，表明两层是如何排列的

给border层添加颜色叠加的样式，颜色： #a7c5bd

复制在六边形步骤中的图层点击：编辑 > 自由变换（Ctrl/Cmd + T），并在图像上方嘚选项栏中设置水平垂直方向的94%的缩放命名该图层为border，并添加颜色叠加的样式颜色： #a7c5bd

我们要给该层添加杂色的滤镜。然而颜色叠加效果会在杂色滤镜的上方。为了解决这个问题我们需要将其转换为智能对象。在border层选择转换为智能对象点击：滤镜 > 杂色 > 添加杂色，并按照下图进行设置

双击该图层打开图层样式窗口并按照下图进行设置外发光样式。颜色： #89b9ac

再次从Illustrator复制六边形的形状并在PS中粘贴为智能对潒点击：编辑 > 自由变换（Ctrl/Cmd + T），并水平垂直缩放170%命名该图层为column bg并移动到其他两个六边形形状的中间

复制在六边形步骤中的图层，点击：編辑 > 自由变换（Ctrl/Cmd + T）并在图像上方的选项栏中设置水平垂直方向的90%的缩放。命名该图层为column bg

给该图层添加颜色叠加样式样式： #f5f2ea。在图层上祐键选择转换为智能对象并按照下图添加杂色滤镜。双击该图层打开图层样式窗口按照下图设置样式。描边的颜色： #83a098

图案叠加的图案昰6px*6px的左上角有2px*2px的黑色色块

步骤9：添加Services区域的内容

用文字工具书写标题Web Design，字体：Muncie字号：48px，颜色： #7b9d94然后按照下图设置白色的投影样式

用攵字工具创建一个文本块，230px宽（在你创建文本块的时候你可以在信息面板中看到文本块的宽度。）在其中添加一段文字，字体：Open Sans Light字號：15px，颜色： #5c574f

为了使文本更加容易阅读我们要设置行高为1.6倍。我们的字号为15px15*1.6=24。这就是行高的像素数点击字符面板，设置字符间距为24px

現在我们要给该列添加View Portfolio按钮后面我们会创建Portfolio区域，希望用户能够选择一个所提供的服务并得到下面Portfolio方面的项目。

选择圆角矩形工具创建一个圆角矩形（220470），尺寸：120px*30px颜色： #a7c5bd。命名该图层为button在该图层上右键选择转换为智能对象

点击：滤镜 > 杂色 > 添加杂色，并按照下图进荇设置然后双击该图层打开图层样式窗口并按照下图进行设置样式。描边的颜色： #83a098

选择文字工具书写文字See Portfolio字体：Oswald，字号：17px颜色： #f9f9f9。紦该文字图层放在你的按钮的中间然后按照下图添加投影的图层样式，颜色： #83a098

把这两个图层归并到一组button

用直线工具给本列的头条的下方創建两条水平直线颜色： #cbc5b7。上面的直线（180300）宽度为200px，第二条直线（160310）宽度为240px，两条直线之间的空距为9px命名这些图层为1px line

复制这些图層并移动新图层往下1px。改变新线的颜色为白色并设置不透明度为40%

把这些直线的图层归并到一组lines。用矩形选框工具创建一个直线穿过文字嘚部分的选区确保lines组是激活的，然后点击：图层 > 图层蒙版 > 隐藏选区

在Services区域创建另两个列就像你创建的Web Design列。所有的设置都是一样的除叻颜色以外，就像下图所示一样

首先能想到的是复制Web Design组，然后修改组内图层的颜色值很遗憾，直接做是不行的因为组内很多图层都昰智能对象，修改一个智能对象的颜色值则其他同源智能对象的颜色值也会同时改变（这就是智能对象的优势，一处修改处处改变）。例如中间的六边形改成红色，则左边的六边形也同时会变成红色

但如果是重新制作，工作量也太巨大了

比较好的做法是，先把Web Design组轉换为智能对象然后在图层上右键选择通过拷贝新建智能对象。这样新复制图层中的智能对象和原图层中的智能对象就不是同源了，修改新的智能对象原智能对象也不会发生改变。

到目前为止我们在本设计中使用五种字体。我们可以排除脚本字体——这是为了不同嘚目的只使用了一次——谈论其它三种字体：MuncieOswald和Open Sans。

我选择的字体Muncie因为它是一个设计精美的简明字体相匹配的风格符合我创造的文字。峩们用这种字体包括Logo和Services区域的头条此字体在足够小的尺寸时不清晰（例如导航栏的），所以我使用了Oswald的这两种字体可以融洽相处，因為它们共享一个特点：他们都是简明的字体

对于文本块，我选择了Open Sans字体族因为它有10个不同风格的选择。该字体的简易版本我们用得朂多，与使用其他字体有一个更好的对比

Portfolio区域从Services区域链接过来。自从我们要创建一个单页网页我们需要的选择类别的功能和从该类别Φ获得项目的列表的功能。

我们打算使用3个服务的类别为了表明所选择的类别，我们将使用相同和Services区域相同的配色方案

当用户点击Branding服務，下面的部分将有一个红色的描边突出显示的颜色和标题的颜色是红色的，会有一个红色的杆连接的Branding一列和portfolio方块这三种视觉指标，將足以使用户快速了解Portfolio区域是如何工作的

选择矩形工具创建一个矩形（120，620）尺寸：960px*310px，颜色： #89b9ac命名此图层为first border，设置不透明度为20%然后選择移动工具，移动到Services区域下方60px处

创建新的矩形（125625），尺寸：950px*300px颜色： #a7c5bd。命名此图层为second border并移动到第一个矩形的中间。双击该图层打开圖层样式窗口按照下图设置样式内阴影和描边的颜色： #83a098

创建新的矩形（130，630）尺寸：940px*290px，颜色： #f5f2ea命名此图层为Portfolio bg。双击该图层打开图层样式窗口并按照下图进行设置描边的颜色： #f9f8f5

Portfolio区域会被分成两列。左边的一列会显示一组缩略图当用户点击一个缩略图的时候，右边的一列会显示该项的更详细的信息

现在我们要创建右边一列的背景。选择矩形工具创建一个矩形（430630），尺寸：640px*290px颜色： #ece8df。命名此图层为active item bg茬图层上右键选择转换为智能对象

按照下图添加杂色滤镜。然后双击打开图层样式窗口并按照下图设置样式内发光的颜色： #9d9180

新建组Portfolio items。从Illustrator複制六边形形状并在PS中粘贴为智能对象我们重复六边形形状，以在整个设计中保持相同的视觉风格

点击：编辑 > 自由变换（Ctrl/Cmd + T）并在水平垂直方向缩放50%。给这个图层添加颜色叠加样式颜色： #f4eee7，和1px的内描边样式颜色： #c3b9ab。命名该图层为border

参照之前的六边形步骤用多边形工具創建六边形，半径为40添加10px的居中描边，转换为智能对象移动到（138，649）这样的六边形就会有圆角效果。给这个图层添加颜色叠加样式颜色： #f4eee7，和1px的内描边样式颜色： #c3b9ab。命名该图层为border

复制border图层（Ctrl/Cmd + J），在图层上右键选择清除图层样式然后点击：编辑 > 自由变换（Ctrl/Cmd + T）。茬水平垂直方向缩放84%命名此图层为image_holder，并保证它在border图层的中间

打开你想显示在Portfolio区域的图片并移动到image_holder图层的上方命名该图层为image，在图层上祐键选择创建剪贴蒙版你的图片仅仅在image_holder六边形的中间的部分才显示。

把这些组都归并到一个新组item #1

复制item #1组7次，并排列你的Portfolio项目成一个六邊形蜂窝状

第四个Portfolio项目有不同的边框颜色，以表示它被选中简单地改变那个border图层颜色叠加的颜色： #a7c5bd和描边颜色： #83a098。

现在我们要给活动嘚Portfolio项目添加内容（之前高亮的那个）新建组active item。选择圆角矩形工具设置半径为4px，创建一个圆角矩形（450650），尺寸：220px*250px颜色： #f5f2ea。命名此图層为border并添加1px的内描边的图层样式，颜色： #c3b9ab

选择矩形工具创建一个矩形（460，660）尺寸：200px*230px，在之前的圆角矩形的中间

打开你想显示在本區域的图片并移动到image_holder图层的上方。命名该图层为image在图层上右键选择创建剪贴蒙版。你的图片仅仅在矩形的中间的部分才显示

用文字工具书写你的Portfolio项目的名字，字体：Oswald字号：24px，颜色： #7b9d94移动文字到图片的右侧20px处。按照下图给本头条文字添加投影样式

用直线工具创建一条沝平线（690680），尺寸：370px*1px颜色： #c3b9ab。移动直线到头条文字下方10px处复制这个图层（Ctrl/Cmd + J），把新线的颜色改为 #faf9f8并向下移动1px。

用文字工具创建一個文本块宽度为370px。添加一段文字字体：Open Sans Light，字号：15px颜色： #5c574f。并点击到字符面板设置行间距为24px，就像我们之前Services区域的段落

About区域有2列，包含照片、名字、2个人的说明文字我们继续用六边形来显示照片，为了保持一致的网页设计

新建组About。从Illustrator复制六边形形状并在PS中粘貼为智能对象。点击：编辑 > 自由变换（Ctrl/Cmd + T）并缩放图层到宽度为2网格列。命名图层为border双击该图层打开图层样式窗口并按照下图设置样式。颜色叠加的颜色： #d0cbc0描边的颜色： #958f82。

新建组About按照六边形步骤制作六边形，半径70px居中描边20px，转换为智能对象移动到（127，987）命名图層为border，双击该图层打开图层样式窗口并按照下图设置样式颜色叠加的颜色： #d0cbc0，描边的颜色： #958f82

复制border图层（Ctrl/Cmd + J），在新的图层上右键选择清除图层样式然后用自由变换（Ctrl/Cmd + T），缩放这个形状90%，命名该图层为Image_holder

在PS中打开你想显示在本区域的图片并移动到Image_holder图层的上方在图片图层仩右键选择创建剪贴蒙版。

选择文字工具在图片的右侧添加一些内容标题文字，字体：Oswald字号：24px，颜色： #a39f94对于文字块，字体：Open Sans Light字号：15px，颜色： #5c574f我也设置行间距为24px

用直线工具在标题和文字块之间创建水平的分隔符。第一条直线（2901023，3001）颜色： #bebbb1，第二条直线（2901024，3001）的颜色： #ffffff

重复此过程给About区域添加第二列

步骤13：创建联系表单的背景

Contact区域包含2列：一列是联系表单，另一列是Twitter feed我们将利用对比的设计原則，区分这两个列

联系表单会比Twitter feed列宽一点，因为它是更重要的它需要以吸引更多的关注。为了实现这一目标我们还要创建一个不同褙景的联系表单。让我们开始工作

新建组Contact。在其中创建另一个组Contact bg选择圆角矩形工具，半径6px创建一个圆角矩形（130，1210）尺寸：620px*360px，颜色： #d0cbc1命名该图层为border，在该图层上右键选择转换为智能对象

点击：滤镜 > 杂色 > 添加杂色，按照下图进行设置双击该图层打开图层样式窗口，并按照下图设置样式描边样式的颜色： #958f82。

选择圆角矩形工具设置半径为4px。然后创建圆角矩形（1351215），尺寸：610px*350px颜色： #f5f2ea。移动该图层箌深色圆角矩形的中间

命名此图层为Contact bg在图层上右键选择转换为智能对象。按照下图添加杂色滤镜双击该图层打开图层样式窗口，并按照下图设置图层样式描边样式的颜色： #f9f8f5

步骤14：创建联系表单

用矩形工具，颜色： #faf9f8在联系表单里创建3个文本框和一个文本区域。这些矩形的宽度为350px我们需要在右边有一些空间来添加一小段文字和更多的联系详情

给每个矩形添加如下的图层样式。描边样式的颜色： #d1cec7

给每个攵本框添加一些文本我用的字体：Open Sans Light，字号：13px颜色： #847f76。然后添加一个Send按钮颜色： #aea89c，边框颜色： #8a857a复制之前你创建的按钮的样式到这个按钮。

选择文字工具在联系表单的旁边创建一个文本块宽度190px。然后添加一段文字在其中我用的是字体：Open Sans Light，字号：15px颜色： #5c574f，行高：24px

複制这个图层（Ctrl/Cmd + J），并移动新线向下2px然后复制这两条直线，并移动新线向下1px更改新线的颜色为 #fcfaf6。把这些直线归并为一组lines

复制你下载嘚retro icons中的手型图标并在PS中粘贴为智能对象。用自由变换（Ctrl/Cmd + T）缩放它并且水平翻转所以现在它指向联系表单。这是我们要把用户的目光指向箌联系表单

移动手型图标移动到直线的中部然后用矩形选框工具创建直线穿过图标的选区。确保lines组是激活的点击：图层 > 图层蒙版 > 隐藏選区。

双击该图层打开图层样式窗口并按照下图设置图层样式颜色叠加的颜色： #837e70

用文字工具添加另一个文本块在直线的下方，用来显示哽多的联系信息如Email，电话和Skype用户名。这段文本的字体：Oswald Italic和Semibold Italic字号：14px，颜色： #5c574f每行都有一个换行。

新建组Twitter然后用文字工具添加一个標题，字体：Oswald字号：24px，颜色： #a39f94

选择直线工具在标题的下方添加两条水平线（7701242，3001）和（770，1243300，1）第一条直线的颜色： #bebbb1和第二条直线嘚颜色： #ffffff

创建Follow us按钮，填充颜色： #a7c5bd和边框颜色： #83a098。这个按钮的其他设置和之前的按钮是一样的

步骤16：在网页设计的边上添加头条

因为这昰一个单网页设计，我想我会在每个部分添加一个标题用来给用户一个反馈，这部分是当前可见的此外还有导航栏中的反馈。

新建组Headlines然后选择直线工具创建一条垂直的直线（100，2181，1352）颜色： #b5b2ac。从Services区域的顶部到Contact区域的底部移动这条直线到网页左边的20px处。命名该图层為1px line

选择文字工具在每个部分的左边书写每个部分的名字参考下面的图。我用的字体：Muncie字号：36px，颜色： #b5b2ac按照下图给文字图层添加投影嘚图层样式

新建组Copyright。然后选择文字工具添加一个版权文字在网页的底部我用的字体：Open Sans Regular，字号：12px颜色： #837f79

在本教程中，我们给出设计的四個基本原则：对比重复，定位和相近创造一个干净的复古网页设计我希望你喜欢它。点击下面的图片看全尺寸版本的设计

后记：本敎程被誉为2012年的推荐教程。整个页面简洁干净本教程主要技术有：1、圆角六边形的制作。充分利用描边效果来完成圆角六边形的制作2、用自定义的简单图案实现各种各样的纹理，其效果像是铜版纸的效果1、巧妙的利用图层的叠加实现特殊的外发光的效果。