首先声明教程使用版本以及重要标记

1、本文的软件是Photoshop CS5版本

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

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

例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77

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

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

在本教程中，我们要在PS中创建美丽多彩的作品集。我会告诉你许多技术用于创建不同的东西，如弯曲的纸角，虚线，图像跑马灯，3D的横幅，和更多！我将指导您完成每个步骤，精确的细节，你没必要去猜测用了什么特别的技术。我们将使用960网格系统创建这个布局（一开始就使用）。

步骤1：了解网格
下载 960网格并解压缩的存档。在Photoshop模板文件夹内，你会发现三个PSD文件。每一个都有一定数目的列（12，16，和24）的网格。这种布局中，我们将使用16列的网格。所以，在Photoshop中打开该文件，960_grid_16_col.psd文件。你可以看到，你有16个红色（几乎是粉红色的）在你的文档中的垂直条纹。我们将在这些红色的垂直条纹上创建网页布局。
在图层面板中有两个组：“16 Col Grid”（其中包含所有的红色竖条纹）和“图层1”（我们并不需要这一层，这样你可以删除它）。
要显示或隐藏网格，单击眼睛图标的“16 Col Grid”组在图层面板中切换它的可见性。网页布局的左右元素都在这个组的下方创建的，所以它总是在最上面。 PSD文件包含的参考线，这将是非常有益的。要显示或隐藏的指引去查看“>”显示“>”参考线“（或按Ctrl / Cmd的+ ;)。
这是几乎所有你需要知道的关于网格。
在我们开始之前，请确保您打开信息面板（“窗口”>“信息”）。在本教程中，我会要求您创建具有一定规模的形状，当您创建形状时，你在“信息”面板中，将能看到确切的宽度和高度。

 

基本的知识点，了解布局系统的基本情况。本翻译教程不使用布局系统。

步骤2：修改画布的尺寸

为了让我们有更多的空间在高度方向上，我们需要增加我们的画布的大小。点击：图像 > 画布大小，高度为1920px。

 

由于不使用960布局系统，本步改成新建文档，尺寸：1020px*1920px

步骤3：创建布局的背景

用矩形工具创建一个白色的矩形（40，0），尺寸：940px*1920px。确信PS的参考线是激活的（Ctrl/Cmd + ;），这样你创建这样的矩形是很简单的。命名图层为bg，双击打开图层样式窗口，按照下图的设置给它添加外发光和描边的图层样式

描边的颜色： #1f1907

步骤4：创建头部区域

新建组header。然后选择矩形工具创建一个矩形（40，0，940，96），颜色： #aedee1。命名为header bg，双击该图层，按照下图设置添加渐变叠加图层样式

步骤5：网站名称的凹型处理
选择文字工具（T）的写你的网站名字，颜色：#93b9bb。对文字creative使用字体：Museo 700，对文字folio使用字体：Museo 300。

现在，我们将创建一个凹型处理，使用Photoshop的图层样式。双击您的文字层，打开图层样式窗口按照下图的设置内阴影、内发光、斜面和浮雕图层样式。顺便说一下，如果你想知道一个更详细的这种技术教程，检视Six Revisions上的Jacob’s Inset Typography tutorial（使用不同的技术）。

步骤6：创建一个头部区域中的一小片云 创建一个新组，将其命名为cloud。

然后选择椭圆工具（U），按住Shift键，以保持比例，并创建了几个不同大小的白色圆圈。（具体地说，本翻译教程用的是5个圆）

然后使用移动工具（V）安排这些圆形成云。将cloud组的不透明度设置为80%。

步骤7：创建一个“hrie me”的公告栏

现在，我们要创建一个小的一张纸，在上面写一个号召性文字去吸引潜在客户。强调的号召性文字对作品集网站是非常重要的，因为它鼓励有雇佣设计师意愿的去点击它去联系网站的所有者。

创建一个新组hire me。然后选择矩形工具（U），在头部区域的右侧创建一个小的矩形（795，15，145，81），颜色： #f7efda。

命名此图层为paper，双击打开图层样式窗口，并按照下图设置样式。

步骤8：折曲纸的一角

现在，我会告诉你如何在Photoshop中创建一个折曲的拐角效果。首先，对paper层激活矢量蒙版。

然后选择钢笔工具（P），确保模式是“形状图层”，并在选项栏中选择“从形状区域减去”按钮。

现在使用钢笔工具（P）创建一个三角形在黄色矩形的右上角，你在下面的图片中看到。

这一步是非常有意思的步骤，在之前的教程中从未出现过，因此在这里补充详细的过程，由于不善于使用钢笔工具，在说明过程中用矩形工具替代

首先激活paper的矢量蒙版，点击图层面板上的paper层的矢量蒙版（paper层上的两个矩形中的右边的那个）。

然后选择矩形工具，点中是“形状图层”和“从形状区域减去”按钮

在paper层上的矩形的右上角画一个小的正方形（按住Shift键）

再用直接选择工具选择小矩形的右下角的控制点

按键盘上的delete键删除左下角的控制点，使得形成一个三角形

鼠标点击其余图层，完成此步骤

 

步骤9：应用一个渐变叠加到折曲的纸张上

创建一个新图层，使用钢笔工具（P）创建一个三角形，颜色： #f1e9d3，就像下面的图片中看到的一个三角形。

命名此层为“corner”，双击图层并按照下图设置渐变叠加。

对于不善于使用钢笔工具的，可以用矩形工具加直接选择工具选择一个控制点后删除的方法来实现三角形

 

步骤10：对纸的折角添加阴影

在corner层的下方，创建一个新的图层。

选择钢笔工具（P），创建一个黑色三角形，就像下图一样。这一步还是用复制conner层比较好

右键单击新图层，选择“转换为智能对象”。可能由于PS版本的原因，在CS5版本中，为了完成后面的步骤，这一步应该是栅格化图层。

然后点击：滤镜 > 模糊 > 高斯模糊，并使用一个2px半径。

这一层（图层 > 图层蒙版 > 显示全部）添加蒙版，选择一个黑色的小笔尖（B）和涂抹它的右侧的纸护角的影子，将其擦除。

命名此层为shadow，并设置其不透明度为15%

 

步骤11：将杂色添加到纸张

现在我们要添加一点点的杂色在纸张上，以使它看起来更逼真。按Ctrl / Cmd+Click在在paper层的矢量蒙版上，作出纸张的选区。在该组所有其他层的上方中创建一个新层，选择油漆桶工具（G）用白色（＃FFFFFF）填充选区。

这层转换为智能对象，然后点击：滤镜 > 杂色 > 添加杂色，按照下图设置。

命名此层为“noise”，并设置其混合模式为正片叠底，图层不透明度改为15％。

在下面的步骤中，我们将添加其他元素的杂色，我也会重复这一步，所以你可能要牢记这种方法。

 

步骤12：在纸上添加文字

现在是时候添加您的号召性文本。选择横排文字工具（T），并写在纸张上的文字使用的颜色： #514c3f和Museo字体。

 

 

步骤13：添加一个纸飞机

从互联网上下载一个纸飞机图像，在Photoshop中打开它。然后使用移动工具（V）移动飞机到您的文档中。我使用的图像是从GraphicRiver的，它的成本为3美元（或1美元，如果你有一个预付订金）。

把这层转换为智能对象。然后点击：编辑 > 自由变换（Ctrl / Cmd+ T），按住Shift键保持的比例，改变纸飞机的大小，并旋转它。我的飞机指向的号召性文字的公告栏，使其更加明显。

点击：滤镜 > 杂色 > 添加杂色，从下面的图片中使用的设置。

然后将此图层命名为paper airline，双击它打开图层样式窗口，按照下图设置的投影的图层样式。

 

 

步骤14：创建纸飞机后面的虚线

我用了Adobe Illustrator中（是的，我只是一个稍微有点被骗，但可以使用Photoshop解决这件事 - 它是不会那么容易）创建一个飞机后面的虚线。如果你没有Illustrator中，你可以下载和使用我的虚线dashed_line.png（提示Windows用户：右键单击的链接，选择“另存为”）的PNG图像。在Photoshop中打开它，和它放置在你的画布，使用移动工具（V）。

可选：Adobe Illustrator的用户

如果你有Adobe Illustrator和知道如何使用它，你可以按照下面的步骤。打开一个新文件（按Ctrl / Cmd+ N），使用矩形工具（M）创建一个大的灰色矩形。然后选择钢笔工具（P），像一个从下面的图片中创建一个路径。使用1点白色（＃FFFFFF）描边和无填充。然后打开“笔触”面板（点击：窗口>描边），从下面的图片中使用的设置。

使用选择工具（V）选择您的虚线，将它复制（按Ctrl / Cmd+ C），返回到Photoshop中，作为一个智能对象（按Ctrl / Cmd+ V），并将其粘贴。

 

命名此层为line，并把它放在的paper airplane层的下方。使用自由变换（Ctrl / Cmd+ T），把这条虚线的移动到你想要的位置。

 

 

步骤15：创建导航栏

在组header的下方创建一个新组navigation bar。

然后选择矩形工具（U）创建一个矩形（40，96），尺寸：940px*40px，颜色： #c0e332。命名此层为navigation bar bg，双击它按照下图进行设置。

 

步骤16：添加细节部分的1px线条

选择直线工具（U）的权重设置为1px，并在导航栏的顶部创建一个水平线（40，96，940，1），颜色： #7e961d。命名此层为“1px dark line”。

按Ctrl/ Cmd+ J复制这个图层，并移动新的水平线到导航栏的底部（40，135，940，1）。

 

步骤17：让1px的线看起来有深度感

使用直线工具（U），粗细为1px，创建一个新的水平线，颜色： #d8fd42。

命名此层为“1px light line”，并把它移到第一条暗线的下方（40，97，940，1）。

复制这个图层（Ctrl / Cmd+ J），并把它移到第二条暗线的上方（40，134，940，1）。

 

步骤18：输入导航菜单项

选择文字工具（T）和输入导航菜单项的名称。使用字体museo700，颜色： #336600。

 

步骤19：创建特色内容区域

在navigation bar组上方创建一个新组featured。

然后选择矩形工具（U）创建一个矩形（40，136），尺寸：940px*450px，颜色： #e6b633。

命名此层为featured area bg

 

步骤20：添加细节部分的1px线条

网页设计是取决于的细节。使用直线工具（U）在黄色矩形的底部创建粗细1px的两条水平线。

对于暗线（40，585，960，1），使用颜色： #755c18，图层命名为1px dark line。

对于亮线（40，584，960，1），使用颜色： #ffdf87，图层命名为1px light line。

 

步骤21：添加特色内容背景的杂色

现在我们将在特色内容区域添加一些杂色，就像我们之前纸张的背景一样。按Ctrl / Cmd+click点击featured area bg的矢量蒙版，出线黄色矩形的选区。然后创建一个新层，使用油漆桶工具（G）用白色（#FFFFFF）填充选区。

将这层转换为智能对象。

然后点击：滤镜 > 杂色 > 添加杂色，从下面的图片中使用的设置。

设置这层的混合模式为正片叠底，图层的不透明度降低到25％，并命名为noise。

 

 

步骤22：创建标题行的一个蓝条

创建一个新组blue bar。

然后选择矩形工具（U）创建一个矩形（30，156，190，42），颜色： #1e92e4，像下图一样。

命名此层为blue bar，双击打开图层样式窗口，并按照下图添加一个渐变叠加和描边图层样式。

然后选择移动工具（V）和移动的矩形到超出的左边缘10px，距上方导航栏的距离为20px。

描边的颜色： #3a77be

 

 

步骤23：创建3D效果

创建一个新的图层，选择钢笔工具（P），并创建一个小的三角形在矩形的蓝条左下角的下方，颜色： #166ead，看起来像它的3D阴影。

此步也可以是用矩形工具新建一个矩形（30，198，10，10），然后直接选择工具选择矩形的左下角的控制点，按delete删除左下角的控制点，得到三角形

命名此层为triangle，双击图层并按照下图设置渐变叠加。

 

 

步骤24：在蓝条上添加文字

选择文字工具（T），并写上Featured ?在蓝条上，使用的字体：Museo 700，颜色： #FFFFFF。

 

步骤25：在特色内容区域中添加图像

创建一个新组iamges

然后在Photoshop打开你喜欢的图像，每一个都是260px*290px的尺寸。我只是用了一些随机图像和从Six Revisions上的screengrabs，和从我的网站PSDBURN。

在你的画布上使用移动工具（V），排列他们，就像你看到下面的图像。经测算，这3图片的位置分别是（80，207）、（380，207），（680，207）

每个图像按照下图添加内发光和描边的设置，创建一个双描边效果。

描边的颜色： #5d5643

 

步骤26：创建一个read more按钮

创建一个新组buttons。

然后选择圆角矩形工具（U），设置半径为6px的，颜色： #f8c539，创建一个圆角矩形（322，524，179，41）。

双击层打开图层样式窗口，按照下图进行设置。

然后选择文字工具（T），并在按钮上写上Read more ?，使用的字体Museo 500和颜色： #3d382a。

 

 

步骤27：创建一个view portfolio按钮

复制的上一步创建圆角矩形层（按Ctrl / Cmd+ J），移到上一步圆角矩形的右边（522，524）。然后改变它的颜色为： #dfd7c0，描边的颜色设置为： #ccc5b2。

使用文字工具（T），字体：Museo 300，颜色： #3d382a，在按钮上写View Portfolio

 

 

步骤28：创建一盏灯

现在，我们将在特色内容区域的中间将放置一个点亮的灯。创建一个新组lamp。然后选择圆角矩形工具（U），设置半径为7px的，并创建一个小的圆角矩形（475，162，66，12），颜色： #8f631e。

双击打开图层样式窗口，使用下图设置内阴影、内发光、渐变叠加、描边的图层样式。

命名此层为wood。

对灯的木质部分添加一点点的杂点就像你在第11步对纸一样。使用5％的平均分布和单色。

设置noise层的混合模式的为正片叠底，不透明度为35％。

描边的颜色： #634513

 

步骤29：为我们的灯创建灯罩

我们将按顺序创建一盏灯，照亮我们的特色工作，这不仅是在的特色区域的符号，也希望带来更多的关注这部分的网络布局。选择圆角矩形工具（U）创建一个圆角矩形（439，168，141，39），半径设置为15px，像下面的图片，颜色： #9ce340。

单击选择这层的矢量蒙版，在选项栏上选择“从形状区域减去”按钮，并拖动一个新的矩形的在前一个矩形的下半部分，达到删除的目的。就像下面的图片一样。和之前做的纸片折角的做法是一样的。

然后双击这一层，从下面的图像中添加内发光，斜面和浮雕，渐变叠加和描边的图层样式。

描边的颜色： #84b93d

 

 

步骤30：给我们的灯一个漂亮的渐变叠加

复制在上一步创建的图层（按Ctrl / Cmd+ J），设置其填充为%。在该图层上单击鼠标右键，选择清除图层样式。

然后双击它，按照下图设置渐变叠加。

渐变编辑器的颜色： #535b5e、#fefefe、#535b5e、#fefefe、#535b5e。

 

 

步骤31：给灯罩添加另一个渐变叠加

复制上一步的图层（按Ctrl / Cmd+ J），并按照下图设置渐变叠加。

 

 

步骤32：给添加杂色

给灯添加一些杂色，给它一点的质地，就像在第11步中对纸张使用的技术的技术一样。这种杂色层设置混合模式为正片叠底，并设置图层不透明度为15％。

 

 

步骤33：给灯罩一些深度

复制在步骤29中创建的图层，并把它移到图层noise的上面。

清除图层样式，并改变这种形状的颜色：#eef8e2。

点击：编辑 > 自由变换（Ctrl / Cmd的+ T），并减少宽度的形状，当就像你看到的下图。

给这一层（点击：图层 > 图层蒙版 > 显示全部）添加蒙版，选择渐变工具（G），并选择一个黑色到透明的渐变，从这形状的底部到中间拖动渐变。

命名此层为highlight，并设置其混合模式为叠加，图层不透明度为20％。

 

步骤34：创建一个灯泡

没有灯泡的灯怎么能算灯呢？ 在shade层下方创建一个新层，选择椭圆工具（U）创建一个圆（按住Shift键，以创建一个完美的圆圈），颜色： #f6f3a2。

命名此层为light bulb，双击它按照下图设置内发光、渐变叠加、描边的图层样式。

描边的颜色： #8cc93d

 

步骤35：创建从灯发出的光

在light bulb层上方创建一个新层。

然后选择钢笔工具（P），并创建一个白色的形状像一个你看到下面的图片。

不习惯使用钢笔工具的，可以按照下面的步骤完成：

新建一个矩形（377，193，266，304），颜色： #f6f3a2

按Ctrl+T自由变换，右键选择透视，拖动左上角的控制点到合适的位置，如下图所示：

把这层转换为智能对象。
然后去点击：滤镜 > 模糊 > 高斯模糊，设置半径为7px。
命名此层为light，并设置其不透明度为25％。

 

步骤36：创建走马灯式的图像的右箭头

创建一个新组right arrow。选择椭圆工具（U）创建一个圆圈，在特色内容区域的右部中间的位置。使用颜色： #e6b633。命名此层为circle。

 

步骤37：给右箭头添加杂色

给黄色的圆添加一些杂色，和步骤11中给纸添加杂色的技术一样。图层混合模式是正片叠底，不透明度为25%

 

步骤38：給圆添加描边

复制circle图层（Ctrl / Cmd+ J），并把新的图层放到circle图层的下方。

双击图层，按照下图设置外发光和描边图层样式。

然后添加蒙版层（点击：图层 > 图层蒙版 > 显示全部）。

选择渐变工具（G），并拖动水平的黑色到透明的渐变，从圆的左侧拖动到右侧（实际应该是圆的中左侧拖到右侧）。来看看下面的图片，以供参考。

命名此层为stroke。

 

 

步骤39：创建真实的箭头

选择自定义形状工具（U）在你的园中创建2个箭头，颜色： #fbf2db。该自定义形状被称为Arrow 2它（作为一个默认的形状在Photoshop中的箭头自定义形状组的一部分）。我选择了这个形状，因为它最相似在“特色”蓝色栏的文字中的箭头，这给我们在布局中只用一些重复的设计元素。

 

步骤40：创建走马灯式的图像的左箭头

复制right arrow组（右键单击它并选择“复制组）。

点击：编辑 > 变换 > 水平翻转，和使用移动工具（V）移到左侧的布局。

这组命名为left arrow

 

步骤41：添加图像的名称

创建一个新组image names。

选择圆角矩形工具（U），设置半径为5px，创建特色内容区域的每个图像的底部的白色圆角矩形，分别是（110，475，200，32）和（410，475，200，32）和（710，475，200，32）。

按照下图为每个圆角矩形设置描边图层样式。

然后选择文字工具（T）和书写每个图像的名字，使用的字体：Verdana，颜色： #38352c。

描边的颜色： #999382

 

步骤42：创建服务区域

创建一个新组services

选择矩形工具（U）创建一个矩形（40，586，940，340），高度340px，颜色： #e6e2d5。

命名此层为“services bg”，并设置其不透明度为25％。

 

步骤43：添加服务区域的蓝条

复制特色区域中blue bar组，从特色区域组里移到services组。

然后使用文字工具（T）把Featured改为Services。

 

步骤44：添加一个服务列表

创建一个新组navigation

选择矩形工具（U）在蓝条的下方创建一个矩形（40，648，180，42），颜色： #edeadf。

双击打开图层样式窗口，按照下图设置渐变叠加。

复制这个矩形三次，使用移动工具（V）移动到合适的位置。

 

步骤45：创建分隔线

选择直线工具（U）创建的粗细1px的线，分隔你在上一步中创建的矩形。颜色： #d9d6c9。然后选中所有这些层归并到一组（按Ctrl / Cmd+ G），并将其命名为separators。

这五条直线分别是（40，689，180，1）和（40，731，180，1）和（40，773，180，1）和（40，815，180，1）和（219，648，1，168）

 

步骤46：提供服务的列表

选择文字工具（T）写服务列表，字体Museo 300，颜色： #3f3d36。

 

步骤47：给每个服务添加图像

现在我们将给每个服务添加代表图像。创建一个新组images。然后添加一个图像（240，606），裁剪的尺寸160px*210px。复制特色内容区域的图像的图层样式，并将其粘贴到该图像获得相同的双描边效果。

使用圆角矩形工具（U）在图片的底部创建一个白色圆角矩形。

对这一层添加1px的描边，颜色：#999381

用文字工具在矩形中书写服务列表中的第一个服务的名字，字体：Verdana，颜色： #38352c

 

步骤48：添加更多图片

添加另外三个图像，并为每一个重复前面的步骤。

然后将第二个和第四个向下移动20像素（选择图片的图像，选择移动工具（V），按住Shift键的同时按下向下箭头键两次）。这比每一个图像都对准，看起来有点更有趣。

 

步骤49：添加两个功能按钮

复制特色内容区域的两个按钮，并使用移动工具（V）将其移动到服务区域的图像下。然后更改黄色按钮的文本为Hire me today!，并在前面写了句话。来看看下面的图片，以供参考。

喜欢呈现在作品集网站中的作品的潜在客户有两种选择：，聘请设计师或查看他的工作。通过这些功能按钮，我们要鼓励潜在客户主动与我们联系，并得到一个新的项目。由于Hire me today！是我们最想要的行动，我们使它使用更加突出的颜色，以及左边的位置，从左到右的英文读者，将是他们看到的第一个的按钮。

 

步骤50：添加2条分隔符

在服务区域的底部创建2条粗细为1px的水平直线。第一条直线（40，925，940，1）颜色： #c0bcb1，第二条直线（40，924，940，1）颜色： #ffffff

 

步骤51：创建的博客区域的背景

在services组下方，创建一个新组blog。这将有博客文章的摘要，我们现在已经有很多的博客文章。

选择矩形工具（U）创建一个矩形（40，926，940，345），颜色： #f8f5ec。

命名此层为blog bg，并设置其不透明度为25％。

 

步骤52：给博客区域添加蓝条

复制服务区域的blue bar组，并往下移动到合适位置

用文字工具将文本Services改为Blog

 

步骤53：书写博客的类别

复制服务区域的navigation组，并把它移动到blog组。

然后使用移动工具（V）移动到博客区域的蓝条矩形下方。我们将使用这个书写博客的分类列表。

选择文字工具（T）和更改文本的列表。如果有必要，很多时候，你需要通过复制这些层以便添加更多的矩形。

别忘了把分隔符也一起复制过来，并作适当的修改

 

步骤54：增加两个博客文章

创建一个新组posts。添加到您的博客区的两幅图像，尺寸：340px*140px。

从服务领域的图像复制的图层样式，并将其粘贴到这两个图像，使其达到相同的双描边效果。

然后选择文字工具（T），在您的图片下面写一些文字。标题的颜色：#222222，文本块的颜色：#444444，字体：Verdana。

 

步骤55：添加功能按钮read your blog

使用文字工具（T）在你博客文章的下方写Want more articles and tutorials?。然后添加一个按钮，添加回答这个问题的文本Read the blog。

注意：您可以从services组中复制此按钮。

 

步骤56：更多的分隔符

复制服务区域底部的分隔符图层并用移动工具移动它们到博客区域的底部

 

步骤57：创建的关于我区域

创建一个新组about，并将其移动blog组的下方。

选择矩形工具（U）创建一个矩形（40，1271，940，200），颜色：#e6e2d5。命名此层为“about bg”，并设置其不透明度为25％。

复制你在前面的步骤中创建的蓝条，并移动到这个区域的左上角并更改文本About me。

使用文字工具（T）在蓝条下面的写一段句子。然后你可以添加一些社会媒体图标。我都用的是Function上的，你可以免费下载。

最后，在此区域的底部添加两条1px的直线（可以复制之前博客区域底部的分割符）。

 

步骤58：创建的联系我们区域

在about组下面创建一个新组contact。

使用矩形工具（U）创建一个矩形（40，1271，940，449），颜色：#f8f5ec。命名此层为contact bg，并设置其不透明度为25％。

复制你在前面的步骤中创建的蓝条复制你在前面的步骤中创建的蓝条。

将这个新的蓝条放联系区域的左上角，并使用文字工具（T）更改文本为Contact。

 

步骤59：创建的联系表单和发送按钮

使用矩形工具（U）创建一个联系表单。每个矩形的颜色设置：#ebe9e5。然后使用文字工具（T），颜色：#8c8a86，写联系表单里的每个字段的名称。

在联系表单的下方添加发送按钮。

您可以复制您以前创建的按钮并更改文本为Send按钮，并移动到合适的位置。

Name表单：（100，1553，280，36）

E-mail表单：（100，1599，280，36）

Subject表单：（100，1645，280，36）

Message表单：（100，1691，400，130）

 

 

步骤60：创建页脚

我们本教程的最后一步，坚持下去！创建一个新组footer。然后使用矩形工具（U）创建一个矩形（40，1888，940，32），颜色： #e6e2d5。

命名此层为“footer bg”和设置其不透明度为25％。

在页脚的顶部添加两条1px的水平线（可以复制博客区域底部的两条分隔符）。

然后选择文字工具（T），写一个版权声明。

使用字体：Verdana字体，颜色： #595753。

 

最终的结果：

 

后记：

这也是一篇非常详尽的教程，一共有60步。本片教程的亮点有，通过“从形状区域减去”达到某些特殊的效果，例如纸的折角效果，灯罩的效果等。二是大量的运用了渐变叠加的效果，来达到美观的效果。教程中的灯的制作也是一个亮点，就是这几步单独拿出来也是一篇不错的教程。