PS網頁設計教程XXII——在PS中創建單頁復古網頁布局

作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。

本系列的教程來源于網上的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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com