时间：2021-07-01 10:21:17 帮助过：35人阅读
本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。
约定：
1、本文的软件是Photoshop CS5版本
2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
In this tutorial we will explain how to create a one-page retro web design using Adobe Photoshop. While most of the design is created in Photoshop, we will also use Illustrator to create various shapes and elements. Let’s get started!
在本教程中，我们将解释如何使用PS创建一个单页的复古网页设计。虽然大部分的设计是在Photoshop中创建的，但我们也使用Illustrator来创建各种形状和元素。让我们开始吧！
This tutorial was a collaboration with Ciursa Ionut.
本教程得到了Ciursa Ionut的协作。
960 Grid System
960网格系统
In this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then go to the "Photoshop" folder (inside "templates"). There you will find all the .PSD files. For this web design we will use the 12 columns grid.
在本教程中，我们将使用960网格系统。下载并解压缩文件。然后去Photoshop文件夹（里面的templates）。在那里，你会发现所有的PSD文件。此Web设计中，我们将使用的12列格。
After you open the .psd file in Photoshop you will see 12 red bars. That is the grid that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.
你在Photoshop中打开的.psd文件后，你会看到12个红竖条。这是我们将要使用的网格。 你可以在12 Col Grid图层的眼睛图标上点击，隐藏红竖条。
During this tutorial I will ask you to create shapes with certain dimensions. Open the Info panel (Window > Info) and when you create a shape you will see its exact width and height in this panel.
在本教程中，我会要求您创建具有一定尺寸的形状。打开信息面板（窗口 > 信息），当你创建一个形状时，在此面板中，你会看到它的确切的宽度和高度。
The .PSD file contains some guides as well which will be very useful. To activate them go to View > Show > Guides, or use the shortcut Ctrl/Cmd + ;. I usually hide the red bars and activate the guides whenever I need them.
.PSD文件包含了一些网格，这将是非常有用的。要激活他们点击：查看 > 显示 > 参考线，或使用快捷键Ctrl / Cmd+;。我通常是隐藏的的红竖条和每当我需要时，激活网格。
The grid will help us apply the alignment design principle, which states that every element of the design should be visually connected with another one and nothing should be placed randomly.
该网格将帮助我们走线设计原则，其中规定每一个元素的设计在视觉上与另一个连接的，并不是什么随机摆放的
Now that we covered the basics of using the 960 Grid System, we can move on to creating the actual web layout. If you want to find out more about the 960 Grid System you can read a more comprehensive guide.
现在，我们讨论了使用960网格系统的基础知识，我们可以开始到创建实际的网络布局。如果你想了解更多有关960网格系统，你可以阅读更全面的指导。
Step 1 – Setting up the document and creating the background
步骤1：设置文档和创建背景
Open the "960_grid_12_col .psd" file in Photoshop. We need more space to work with, so we will have to increase the canvas size. Go to Image > Canvas Size (Ctrl/Cmd + Alt/Option + C). Set the width to 1200px and the height to 1700px. Then click on the upper middle anchor point. That is the point the image will expand from.
在PS中打开960_grid_12_col .psd。我们需要更多的工作空间，所以我们要调整画布的大小。点击：图像 > 画布尺寸（Ctrl/Cmd + Alt/Option +C）。设置宽度为1200px和高度为1700px。然后点击上中定位点，这个就是图像的展开定位点
由于本翻译教程不使用960网格布局系统，故本步骤改为新建文档，尺寸：1200px*1700px
Now we will create a pattern which is going to be applied to the website background. Create a new document (Ctrl/Cmd + N) with the dimensions 1px by 3px. Then create a new layer (Ctrl/Cmd + Shift + N).
我们要创建一个网页背景的图案。新建文档（Ctrl/Cmd + N）尺寸：1px*3px。然后新建一个图层（Ctrl/Cmd + Shift + N）
Zoom in and use the Rectangular Marquee Tool (M) to create a 1px by 1px selection at the top of your document. Fill this selection with black using the Paint Bucket Tool (M).
放大该文档并用矩形选框工具在文档的顶部创建一个1px*1px的选区。用油漆桶工具用黑色填充该选区
本步骤还是用画笔工具比较简单
Hit Ctrl/Cmd + D to deselect. Hide the "Background" layer and go to Edit > Define Pattern. Now you can close this document.
按Ctrl/Cmd + D取消选区。隐藏Background图层，点击：编辑 > 定义图案。现在你可以关闭该文档
Go back to your web design document and hide the "12 Col Grid" layer, but always keep it at the top of the Layers panel. This way you can activate it and check if the elements of your web design are aligned to the grid.
回到你的网页设计文档，并隐藏12 col Grid图层，但仍然保持在图层面板的顶部。这可以使你激活它，当你需要对齐你的元件到网格的时候。
Go to Layer > New Fill Layer > Solid Color and set the color to #f2f1ed. Name this layer "Main background". We will apply a noise filter to this layer, but we don’t want to rasterize it. Instead we will use a smart object, so we can edit the filters later on if needed. It is always a good practice to work as non-destructive as possible and keep everything editable.
点击：图层 > 新建填充图层 > 纯色，设置颜色为 #f2f1ed。命名图层为Main Background。我要给该图层添加杂色滤镜，不过我不想栅格化。我们用智能对象替代它，之后就能在需要的时候编辑滤镜特效。这是一个很好的做法，非破坏性尽可能保持一切是可编辑的。
Right-click on the "Main background" layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below. Double-click on this layer to open the Layer Style window and apply the pattern you created. This will give us a subtle cardboard texture which we will use throughout the entire design.
在Main Background图层上右键选择转换为智能对象。然后点击：滤镜 > 杂色 > 添加杂色，按照下图设置。双击该图层打开图层样式窗口，添加之前你创建的图案。这将为我们提供一个微妙的纸板质地，我们将会在整个设计中都使用到。
Step 2 – Creating the header background
步骤2：创建头部区域的背景
Create a new group (Layer > New > Group) and name it "Header". Create another group inside it and name it "Header bg".
新建组Header（图层 > 新建 > 组）。在其中创建新组Header bg
Select the Rectangle Tool (U) and create a rectangle with the dimensions 1200px by 150px and the color #e9e5db. Name this layer "header bg" and place it at the top of your document.
用矩形工具创建一个矩形（0，0），尺寸：1200px*150px，颜色： #e9e5db。命名为header bg，并把它摆放在文档的顶部
Right-click on the "header bg" layer and select Convert to Smart Object. Go to Filter > Noise > Add Noise and use the settings from the image below.
在header bg图层上右键选择转换为智能对象。点击：滤镜 > 杂色 > 添加杂色，按照下图进行设置
Create a new vertical line pattern just like you created the previous one. For this pattern set the document size to 3px by 1px. After you save the pattern (Edit > Define Pattern), go back to your web design document, double-click on the "header bg" layer to open the Layer Style window and apply the pattern you created.
和你之前创建的图案一样创建一个垂直线的图案。这个图案，设置文档的尺寸为3px*1px。在你保存该图案之后（编辑 > 定义图案），回到你的网页设计文档，双击header bg图层打开图层样式窗口，添加之前创建的图案
There is not a lot of contrast between the header background and the main background, so we will add a few separators and gradients to define each section better.
头部区域的背景和主背景之间的对比不是很明显，因此，我们将添加一些分隔符和渐变，以更好地定义每一个部分。
Select the Line Tool (U) and set the Weight to 1px. Hold down the Shift key and create a horizontal line at the bottom of your header using the color #bcb9b1. Name this layer "1px line".
选择直线工具，设置粗细为1px。按住Shift键在你的头部区域的底部创建一条水平的直线（0，150），颜色： #bcb9b1。命名图层为1px line
Duplicate this layer (Ctrl/Cmd + J), select the Move Tool (V) and hit the down arrow key on your keyboard to move this layer 1px down. Change the color of the new line to #f8f7f5.
复制该图层（Ctrl/Cmd + J），选择移动工具并按键盘上的下方向键，移动该图层向下1px。更改新线的颜色： #f8f7f5
Use the Rectangular Marquee Tool (M) to create a selection at the bottom of your header (1). Then go to Layer > New Fill Layer > Gradient and use the settings from the following image (2). Name this layer "bottom gradient" and set its blend mode to Soft Light 20%.
用矩形选框工具在头部区域的底部创建一个选区（0，125，1200，25）。然后点击：图层 > 新建填充图层 > 渐变。并按照下图进行设置。命名图层为bottom gradient，设置图层混合模式为柔光，不透明度20%。点击：选择 > 变换选区，就可以通过输入参数调整选区大小及位置
Duplicate the gradient layer and move the new one at the top of the header. Name this layer "top gradient". Click on its thumbnail to edit the gradient and tick the Reverse option. This will give us a top-to-bottom gradient.
复制该渐变图层，并移动到头部区域的顶部。命名该图层为top gradient。点击缩略图去编辑渐变，勾选上反向，这要给我们一个顶部到底部的渐变
Now we will add a new pattern beneath the header. Use the Rectangle Tool (U) to create a 160px high rectangle beneath the header (1). Name this layer "pattern" and set its Fill to 0%.
现在我们在头部区域的下方添加一个新的图案。用矩形工具在头部区域的下方创建一个一个高160px，宽1200px的矩形（0，152）。命名此图层为pattern，设置填充为0%。实际填充为100%，颜色： #f2f1ed效果比较好
Double-click on this layer to open the Layer Style window and apply a Pattern Overlay effect (2). The pattern that I used is from the Tileables Lines Pack.
双击打开该图层打开图层样式窗口并添加图案叠加效果。我选择的是Tileables Lines Pack中的图案
Tileables Lines Pack已经不能下载，故改为新建10px*1px文档，在顶部用画笔点一个黑点，定义成图案
At the moment this layer has a sharp bottom edge. We want that edge to be more soft, so we will use a mask. Go to Layer > Layer Mask > Reveal All. Then select the Gradient Tool (G) with a black-to-transparent gradient. Hold down the Shift key and drag a vertical gradient at the bottom of this layer to mask out the bottom edge (3).
这会儿该图层有一个锐利的底边。我们想给它添加一个柔边，所以我们用蒙版。点击：图层 > 图层蒙版 > 显示全部。然后选择渐变工具，选择黑—透明的渐变。按住Shift键在底边向上拖动一个竖直的渐变，掩盖底边。
We will create one more gradient beneath the header. Use the Rectangular Marquee Tool (M) to create a selection as you see in the image below (1). Go to Layer > New Fill Layer > Gradient and use the settings from the following image (2).
我们要创建另一个渐变在头部区域的下方。用矩形选框工具创建如下图所示的选区（0，152，1200，50）。点击：图层 > 新建填充图层 > 渐变，并按照下图进行设置
Name this layer "content top gradient" and set its blend mode to Soft Light 50% (3).
命名该图层为content top gradient，并设置混合模式为柔光，不透明度为50%
Step 3 – Creating the logo
步骤3：创建LOGO
For the logo we are going to use two fonts: Muncie and Damion. Select the Type Tool (T) and write the name of your website using the font Muncie with the color #847e70 and the size 80px. Add a shadow to this layer using the settings from the image below (1). This will create a subtle highlight to the text and make it look sharper.
LOGO的字体打算用两个字体：Muncie和Damion。选择文字工具，书写你的网页的名字，字体：Muncie，颜色： #847e70，字号：80px。按照下图给该图层添加投影样式。这将创建一个细微的的高亮显示的文本，使其看上去更加清晰。
Use the Line Tool (U) with the foreground color #837d6f to create two lines at the top of your text layer and two others at the bottom. Name these layers "1px line" (2). Take a look at the following image for reference.
用直线工具创建两条直线（130，33，124，1）和（130，36，124，1）在文字图层的顶部，另两条直线（130，116，124，1）和（130，119，124，1）在底部，颜色： #837d6f。命名这些图层为1px line。参考下图。
Select all 4 line layers and duplicate them by dragging them over the "Create new layer" button from the bottom of the Layers panel. Change the color of the new lines to white and set their opacity to 50%. Use the Move Tool (V) to move these lines 1px beneath the darker ones (3).
选择全部4条直线的图层，拖动它们到图层面板底部的新建图层的按钮上以复制这些图层。把这些新的直线的颜色改为白色，设置不透明度为50%。用移动工具移动这些直线在深色线下方1px处
Group all the line layers together (select them and hit Ctrl/Cmd + G). Name the group "lines".
把这些直线图层归为一组（选择它们，按Ctrl/Cmd + G）。命名组为lines
Use the Type Tool (T) to write the word "Retro" in the middle of the bottom lines. Use the font Damion with the size 21px and the color #847e70. Apply a shadow to this layer using the settings from the image below.
在下面的直线的中部用文字工具书写文字Retro。字体：Damion，大小：21px，颜色： #847e70。按照下图给该图层添加投影的效果
Now we will add the Envato logo in the middle of the top two lines. First, download the "Powered By Envato API" .PSD file and open it in Photoshop. Double-click on the thumbnail of the "Vector Smart Object" and the file will be opened in Adobe Illustrator.
现在我们要在顶部的两条直线的中部添加Envato logo。首先，下载Powered By Envato API.PSD文件，然后在PS中打开它。双击Vector Smart Object的缩略图，该文件会在Illustrator中打开（也可能是在PS中打开，操作相对繁琐一点）
Select the leaf object and change its gradient colors to #847d6f and #5b574f. Use the Direct Selection Tool (A) to select the leaf and copy it (Ctrl/Cmd + C). Go back to Photoshop and paste it (Ctrl/Cmd + V) as smart object.
选择树叶对象，并改变它的渐变的颜色为 #847d6f和#5b574f。用直接选择工具选择树叶并复制它（Ctrl/Cmd + C）。回到PS并粘贴为智能对象（Ctrl/Cmd + V）
Go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key and scale this layer down. Name this layer "envato logo" and move it in the middle of the top two lines. Copy the Drop Shadow layer style from the "Retro" text layer and paste it on this one.
点击：编辑 > 自由变换（Ctrl/Cmd + T），按住Shift键并缩小该图层。命名该图层为Envato Logo，然后移动到顶部的两条直线的中间。复制Retro文字图层的投影样式并粘贴到本图层。
We want to hide the lines underneath the Envato logo and the "Retro" text layer. We can do this using a mask. Click on the "lines" group to make it active. Use the Rectangular Marquee Tool (M) to create two selections, as you see in the image below (note: hold down the Shift key after you create the first selection, so you can add the second one).
我想隐藏在Envato Logo和Retro文字图层下方的直线。我们可以用蒙版。点击lines组，激活它。按照下图用矩形选框工具创建两个选区（注意：在创建第一个选区之后，按住Shift键，你可以添加第二个选区）
Go to Layer > Layer Mask > Hide Selection. Now the lines underneath the Envato logo and the text layer should be hidden.
点击：图层 > 图层蒙版 > 隐藏选区。现在，在Envato Logo和文字图层下方的直线隐藏起来了
Step 4: Creating the navigation bar ribbon
步骤4：创建导航栏飘带
The navigation bar for this web design is going to be a ribbon that we will create using shapes, smart objects, noise filters and layer styles. First, create a new group and name it "Navigation". Then create another group inside the first one and name it "ribbon".
该网页设计的导航栏设计成飘带形状的，为此我们需要形状、智能对象、杂色滤镜和图层样式。首先，创建新组Navigation。在其中创建另一个新组ribbon
Use the Rectangle Tool (U) to create a rectangle with the dimensions 610px by 44px and the color #d8cfba. Name this layer "rectangle", right-click on it and select Convert to Smart Object. Then apply a Noise filter (Filter > Noise > Add Noise) using the settings from the image below.
用矩形工具创建一个矩形（425，48，610，44），尺寸：610px*44px，颜色： #d8cfba。命名为Rectangle，在其上右键选择转换为智能对象。然后添加杂色滤镜（滤镜 > 杂色 > 添加杂色），按照下图进行设置
Double-click on this layer to open the Layer Style window and use the settings from the image below. The pattern that I used is from the Tileables Shapes Pack. The Stroke color that I used is #b1aa99.
双击该图层打开图层样式按照下图进行设置。图案叠加的图案是从Tileables Shapes Pack中选的。描边的颜色： #b1aa99
图案叠加的图案是自定义的图案，8px*8px，对角线为黑色直线
Use the Pen Tool (P) to create the shape from the end of the ribbon. Take a look at the following image for reference (1).
在飘带的左边用钢笔工具创建一个形状，颜色： #b1aa99，下图供参考
也可以用自定义形状工具，选择如下的形状，然后用直接选择工具选择右边的三个控制点，按住Shift键，按右方向键多次，图像向右延伸，并用直接选择工具选中最右侧的点，按Delete键删除
Name this layer "left end" and move it underneath the "rectangle" layer. Offset this shape 10px down from the rectangle top edge and 10px to the right from the rectangle’s left edge (2).
命名此图层为left end并移动到Rectangle图层的下方。该形状偏移至矩形的顶边的下方10px和左边的右侧10px处
Right-click on this layer and select Convert to Smart Object. Apply a noise filter with the settings from the image below. Double-click on this layer to open the Layer Style window and use the settings from the following image (3). The Stroke color that I used is #9d9684.
右键该图层并选择转换为智能对象。按照下图的参数添加杂色滤镜。双击该图层打开图层样式窗口按照下图设置样式。描边的颜色： #9d9684
Duplicate the "left end" layer (Ctrl/Cmd + J) and go to Edit > Transform > Flip Horizontal. Name the new layer "right end" and move it to the right side of the rectangle. Then set the Inner Shadow angle of this layer to 180 degrees.
复制left end图层（Ctrl/Cmd + J），然后点击：编辑 > 变换 > 水平翻转。命名新图层为right end，并移动到矩形的右侧。然后设置该图层的内发光的角度为180度
Use the Pen Tool (P) with the foreground color #6c6554 to create a triangle that connects the rectangle with the ending shape of the ribbon (1). In the image below I made this triangle red to make it more visible.
用钢笔工具在矩形的边形状的角上创建一个三角形，颜色： #6c6554。在下图的示意中，我创建一个红色的三角形，看起来更加醒目。
也可以用矩形工具新建一个矩形，然后直接选择工具选中矩形的左下角控制点，按Delete键删除左下角控制点，得到三角形
Name this layer "left triangle", right-click on it and select Convert to Smart Object. Then apply a noise filter with the settings from the image below (2).
命名该图层为left triangle，右键选择转换为智能对象。然后按照下图添加杂色滤镜
Duplicate this layer (Ctrl/Cmd + J) and go to Edit > Transform > Flip Horizontal. Name the new layer "right triangle" and move it to the right side of the ribbon.
复制该图层（Ctrl/Cmd + J），点击：编辑 > 变换 > 水平翻转。命名新的图层为right triangle，并把它移动到飘带的右边
Now we will add some shadows and highlights to the ribbon. Use the Rectangular Marquee Tool (M) to create a selection with the dimensions 10px by 44px over the left side of the rectangle (1).
现在我们要给飘带添加一些阴影和高亮。用矩形选框工具在矩形左边的上方创建一个选区，尺寸：10px*44px
Go to Layer > New Fill Layer > Gradient and use the settings from the image below. Name this layer "left highlight" and set its blend mode to Soft Light 70% (2).
点击：图层 > 新建填充图层 > 渐变，按照下图进行设置。命名该图层为left highlight，设置混合选项为柔光，不透明度为70%
Create a new selection with the dimensions 5px by 44px (3). Go to Layer > New Fill Layer > Gradient and use a #b5ae9d-to-transparent gradient (4). Name this layer "left shadow".
新建选区，尺寸：5px*44px。点击：图层 > 新建填充图层 > 渐变，用#b5ae9d—透明的渐变。命名该图层为left shadow
Duplicate these two layers and move them to the right side of the rectangle. Then change the gradient angle of these two layers to 180 degrees (5).
复制这两个图层并移动到矩形的右边。然后改变这两个图层的渐变角度为180度。
Now we will create a stitched ribbon effect using dashed lines. First, we will need to create a new pattern. Create a new document (Ctrl/Cmd + N) with the dimensions 10px by 1px.
现在，我们用虚线创建一个缝合的带状效果。首先，我们需要创建一个新的图案。新建文档（Ctrl/Cmd + N），尺寸：10px*1px
Zoom in and use the Rectangular Marquee Tool (M) to create a selection with the dimensions 6px by 1px, as you see in the image below. Create a new layer and fill the selection with black.
放大并用矩形选框工具创建一个选区，尺寸：6px*1px，如下图所示。新建图层，并用黑色填充
Hit Ctrl/Cmd + D to deselect. Hide the "Background" layer and go to Edit > Define Pattern. Save your pattern and then close this document.
按Ctrl/Cmd + D取消选择。隐藏Background图层，并点击：编辑 > 定义图案。保存你的图案，并关闭文档
Go back to your web design document and create a new group inside the "ribbon" group. Name this one "dashed lines".
回到你的设计文档，在ribbon组里新建组dashed lines
Use the Line Tool (U) to create a 1px horizontal line at the top of the ribbon’s rectangle (1). Set the Fill of this layer to 0%. Then apply the dashed line pattern that you created earlier (2).
用直线工具在飘带矩形的顶部创建一条水平直线（432，52，596，1）。设置填充为0%。然后添加之前创建的dashed line图案
Name this layer "1px dashed line", right-click on it and select Convert to Smart Object. Double-click on this layer to open the Layer Style window and apply a Color Overlay effect using the color #b1aa99 (3).
命名该图层为1px dashed line，右键选择转换为智能对象。双击该图层打开图层样式窗口，添加颜色叠加效果，颜色： #b1aa99
Now we will add a brighter dashed line to make the stitched effect look more sharp. Duplicate this layer (Ctrl/Cmd + J) and change its color to #e4ddcd. Use the Move Tool (V) to move this dashed line 1px beneath the first one (4).
现在我们要添加更亮的dashed line使缝合的飘带效果更加清晰。复制该图层（Ctrl/Cmd + J）更改它的颜色为 #e4ddcd。用移动工具移动该dashed line在第一条直线的下方1px处
Select the two dashed line layers and duplicate them. Then move the new lines at the bottom of the rectangle (5).
选择这两条dashed line图层并复制它们。然后移动新的直线到矩形的底部
Step 5 – Creating the ribbon background
步骤5：创建飘带的背景
Now we are going to create a background for the ribbon to make it look like it is wrapped around a wall.
现在，我们要创建一个飘带的背景，使其看起来就像是缠在墙上。
Create a new group, name it "ribbon bg" and put it beneath the "ribbon" group. Use the Rectangle Tool (U) to create a black rectangle underneath the ribbon. Make sure this rectangle is placed within the two ribbon triangles. Name this layer "ribbon bg" and set its blend mode to Soft Light 20%.
在组ribbon的下方创建新组ribbon bg。用矩形工具在飘带的下方创建一个黑色的矩形（435，0，590，150）。确保这个矩形摆放在两个三角形的中间。命名此图层为ribbon bg，设置其混合模式为柔光，不透明度为20%
Use the Rectangular Marquee Tool (M) to create a selection over the left side of the ribbon background (1).
用矩形选框工具在飘带背景的左边创建一个选区（435，0，25，150）
Go to Layer > New Fill Layer > Gradient and use the settings from the image below (2). Set the blend mode of this layer to Soft Light 40% (3).
点击：图层 > 新建填充图层 > 渐变，并按照下图进行设置。设置该图层的混合模式为柔光，不透明度40%
Use the Line Tool (U) with the color #b0a793 to create a 1px vertical line over the left edge of the ribbon background. Duplicate this line layer (Ctrl/Cmd + J), move the new one 1px to the right and change its color to #dbd5c6 (4).
用直线工具在飘带左边创建一条1px的垂直直线（435，0，1，150），颜色： #b0a793。复制该图层（Ctrl/Cmd + J），移动新的直线往右边1px，颜色改为： #dbd5c6。
Add the same gradient and lines to the right side of the ribbon background as well. Keep in mind that you need to set the gradient angle to 180 degrees and flip the two line layers horizontally (5).
在飘带背景的右侧添加同样的渐变和直线。请记住，你需要设置渐变角度为180度，水平翻转两直线图层
Add a mask to the "ribbon bg" group (Layer > Layer Mask > Reveal All). Then select a linear black-to-transparent gradient (G) and mask out the top and the bottom areas of this group. In the image below you can see how my mask looks like (if you hold down the Alt/Option and click on the thumbnail of the mask, you will be able to see it over the entire image).
给组ribbon bg添加蒙版（图层 > 图层蒙版 > 显示全部）。然后选择一个线性的黑—透明的渐变，给本组的顶部和底部添加蒙版。下图可以看出我的蒙版的样子（如果你按住Alt / Option键和点击的蒙版的缩略图，你将能够看到蒙版应用在整个图像）
也可以选择黑—透明—黑的渐变，这样只要添加一次蒙版就可以了。
Step 6 – Adding the navigation items
步骤6：添加导航栏的菜单
Now we will add the navigation menu items and some retro icons next to each one. Select the Type Tool (T) and write the name for your navigation items using the font Oswald with the size 16px and the color #7f7866. To indicate the active page, change the color of the first item to a darker brown (#615c4f).
现在我们要添加导航栏的菜单和一些retro icon在每个菜单的左侧。用文字工具书写你的导航菜单的名字，字体：Oswald，字号：16px，颜色： #7f7866。为了表示活动的项目，更改第一项的颜色为深棕色（#615c4f）
Download this set of retro icons and open the .AI file in Adobe Illustrator. Select each icon that you want to use and copy it (Ctrl/Cmd + C). Then go to Photoshop and paste each icon (Ctrl/Cmd + V) as a smart object. Use Free Transform (Ctrl/Cmd + T) to change the size of these layers.
下载retro icons并在Illustrator中打开.AI文件。选择每个你想用到的图标，复制它（Ctrl/Cmd + C）。然后回到PS并粘贴每个图标为智能对象（Ctrl/Cmd + V）。用自由变换（Ctrl/Cmd + T）改变这些图层的大小
Apply a Color Overlay effect to each icon using the same color that you used for the text layers. Then apply a Drop Shadow effect on all the text and icon layers using the settings from the image below.
给每个图标添加和对应文字图层相同颜色的颜色叠加。然后按照下图给所有的文字和图标图层添加投影效果。
Step 7 – Creating a "Contact us" sign
步骤7：创建Contact us标志
Instead of adding the contact link in the navigation bar, we will create a retro sign for it. We are going to break the proximity design principle, which states that related items should be grouped close together and have similar visual characteristics. The contact link is part of the navigation, but it will have a different style than the other navigation items to make it stand out. Keep in mind that whenever you want to break a design principle you must: a) know the principle and b) have a reason to break it.
替代在导航栏中添加联系人链接，我们将创建一个复古标志。我们将打破相近的设计原则，其中规定，相关的项目进行分组并拢，和类似的视觉特性。联系我们链接是导航栏的一部分，但它和其他导航项目有不同的风格，使它脱颖而出。请记住，只要你想打破原本的设计原则，你必须：a）知道原则和b）有充分的理由打破它。
Create a new group and name it "Contact". Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 130px by 180px and the color #c7c1b3.
创建新组Contact。选择圆角矩形工具，设置半径为4px，创建一个圆角矩形（873，122），尺寸：130px*80px，颜色： #c7c1b3
Name this layer "border", right-click on it and select Convert to Smart Object. Apply a noise filter using the settings from the image below. Double-click on this layer to open the Layer Style window and use the settings from the following image. For the Stroke effect I used the color #a9a396. The pattern that I used is from the Tileables Lines Pack.
命名该图层为border，右键选择转换为智能对象。按照下图的参数添加杂色滤镜。双击该图层打开图层样式窗口按照下图设置样式。描边的颜色： #a9a396。图案叠加的图案用的是Tileables Lines Pack中的
图案用2px*1px的图像，上面一个黑点，下面一个透明点
Select the Rounded Rectangle Tool (U), set the Radius to 2px and create a rounded rectangle with the dimensions 122px by 72px and the color #f3f0e8. Move this rectangle in the middle of the previous one.
选择圆角矩形工具，设置半径为2px，创建一个圆角矩形（877，126），尺寸：122px*72px，颜色： #f3f0e8。移动矩形到之前的矩形的中间。
Name this layer "contact bg", right-click on it and select Convert to Smart Object. Apply a noise filter using the settings from the image below. Double-click on this layer to open the Layer Style window and use the settings from the following image. For the Inner Shadow effect I used the color #a9a396 and for the Inner Glow effect I used the color #f5f2e9.
命名图层为Contact bg，右键选择转换为智能对象。按照下图的参数添加杂色滤镜。双击该图层打开图层样式窗口按照下图设置样式。内阴影的颜色： #a9a396，内发光的颜色： #f5f2e9
Now we will pide the sign into two parts, one for each text layer we will add later. Select the Rectangle Tool (U) and create a rectangle with the dimensions 120px by 32px and the color #eae5d9. Name this layer "top bg", right-click on it and select Convert to Smart Object. Move this rectangle at the top of the smaller rounded rectangle. Then right-click on this layer and select Create Clipping Mask.
现在我们要分割标志为两个部分，每个部分的文字图层晚点再添加。用矩形工具创建一个矩形（878，126），尺寸：120px*32px，颜色： #eae5d9。命名该图层为top bg，右键选择转换为智能对象。移动该矩形到小的圆角矩形的顶部。然后在该图层上右键，选择创建剪贴蒙版
Add a noise filter to this layer using the settings from the image below. Then add a Drop Shadow effect using the color #c3beb1 and the settings from the following image.
按照下图的参数添加杂色滤镜。按照下图添加投影的效果，颜色： #c3beb1
Now we will create a rounded rectangle with a dashed stroke. Since Photoshop does not offer the functionality for creating dashed line yet, we are going to use Illustrator.
现在我们要创建一个有着划线描边的圆角矩形。由于PS中不提供创建虚线的功能，我们将使用Illustrator。
Open a new document in Illustrator. Select the Rounded Rectangle Tool and click on your document to bring up the Rounded Rectangle window.
在Illustrator中新建文档。选择圆角矩形工具，在你的文档上单击，并弹出圆角矩形窗口
Set the width to 171px, the height to 71px and the Radius to 2px. Remove the fill of this shape and add a 1pt black stroke. Open the Stroke panel (Window > Stroke) and use the settings from the following image to create a dashed stroke.
设置宽度为171px，高度为71px，半径为2px。去掉该形状的填充并添加1px的黑色描边。打开描边面板（窗口 > 描边），按照下图设置创建一个划线的描边。
Select the rounded rectangle and copy it (Ctrl/Cmd + C). Go back to your Photoshop document and paste it as a smart object (Ctrl/Cmd + V). Name this layer "dashed line" and move it in the middle of the "contact bg" layer. Add a Color Overlay effect to the "dashed line" layer using the color #958f82.
选择该圆角矩形并复制它（Ctrl/Cmd + C）。回到你的PS文档并粘贴它为智能对象（Ctrl/Cmd + V）。命名此图层为dashed line，并移动到Contact bg图层的中间。给dashed line图层添加颜色叠加的样式，颜色： #958f82
PS在CS6之前的版本不提供虚线。但也可以采用一些变通的方法。新建6px*6px的文档，用铅笔工具如下填色，颜色： #958f82。定义图案。回到PS文档，对Contact bg图层添加描边样式。也能达到类似的效果
Select the Type Tool (T) and write the words "get a free quote" in the upper section of the sign. I used the font LeckerliOne with the size 14px and the color #948f84. I chose this font instead of Damion (which we used in the logo) because it is more legible at this size.
用文字工具书写文字get a free quote在标志的上半部分。我用的字体：LeckerliOne，字号：14px，颜色： #948f84。我用该字体替换Damion（Logo用的字体）是因为它在这个尺寸更清晰。
Use the Type Tool (T) to add the words "Contact us" in the lower area of the sign. I used the font Oswald with the size 19px and the color #948f84.
用文字工具书写文字Contact us在标志的下半部。我用的字体：Oswald，字号：19px，颜色：948f84。
Apply a Drop Shadow effect to these two text layers using the settings from the image below.
按照下图的参数给两个文字图层添加同样的投影样式
Copy one of the hand icons from the retro icons set you downloaded and paste it in Photoshop as a smart object. Name this layer "hand icon" and move it in the middle of the two sections of the sign.
复制一个你下载的retro icons中的一个手型的图标，在PS中粘贴为智能对象。命名该图层为hand icon，并移动到标志的两个部分的当中
Double-click on this layer to open the Layer Style window and use the settings from the following image. For the Color Overlay effect I used the color #969183.
双击该图层打开图层样式窗口，按照下图设置样式。颜色叠加的颜色： #969183
