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 Adob​​​​e 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 guenenever .

.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/C.

我們要建立一個網頁背景的圖案。新文件（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 willuse stead we willuse 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 websign document 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 horizo​​ntal 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 grentent " 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-bot

複製該漸層圖層，並移動到頭部區域的頂部。命名該圖層為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 follo wingimage (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 this 4 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 the following image for the following image for the following image for the following image for the following image for the following image for the following image for 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 (Vool. ) 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 Adob​​​​e 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 Shadow layer style Shadow layer style Shadow layer style 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 ections , 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 the first group the fside fin. 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 appter > No. 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 follo layer to open the Layer Style window and use the settings from the follo wingimage (3). The The wingimage (3). The wingimage Stroke color that I used is #9d9684.

右鍵該圖層並選擇轉換為智慧型物件。依照下圖的參數添加雜色濾鏡。雙擊該圖層開啟圖層樣式視窗按照下圖設定樣式。描邊的顏色： #9d9684

 

Duplicate the "left end" layer (Ctrl/Cmd + J) and go to Edit > Transform > Flip Horizo​​​​ntal. 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 ible.

用鋼筆工具在矩形的邊形狀的角落創建一個三角形，顏色： #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 Horizo​​​​ntal. 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 horizo​​​​ntal 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 apply a Color Overlayectect 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 its color to #e4ddcd. Use the Move Tool (V) to move this thised line 1pddcd. 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 withdin the t . 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 1px 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 horizo​​ntally (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 #7fate the . 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 Adob​​​​e 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 sender gether 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 bave a design principle you must: a) know the principle and bave a reason 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 來自 Double-click on this layer to open the Layer Style window and use the ollot and from fwingsettings the f from 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 from the slick on this layer to open the Layer Style window and from the singsettings 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 4 , 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 move 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 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

Now we need to add a rope to hold the sign. Create a new group, name it "rope" and move it at the bottom of the "Contact" group. Then use the Ellipse Tool (U) to create a nail. Select the Line Tool (U), set the Weight to 1px and create two oblique lines, as you see in the image below. Use the color #7f7866 for all these shapes.

現在，我們需要增加一條掛繩掛住標誌。建立新組rope，並移動到Contact組的底部。然後使用橢圓工具建立一個釘子。選擇直線工具，粗細設定為1px，並建立兩條斜線，如下圖所示。並給這些形狀使用顏色： #7f7866。

 

Step 8 – Creating the "Services" area

步驟8：建立Services區域

 

For the "Services" area we will need a hexagon shape that we will use as background for the three content columns. We will create this shape using Adob​​​​e Illustrator.

在Services區域中，我們需要六角形形狀作為內容列的背景。我們將使用Illustrator來建立這個形狀。

Open a new document in Illustrator and select the Polygon Tool. Click on your image to open the Polygon window, where we can set the characteristics of the shape. Set the Radius to 70px and the Sides to 6. Click OK to create the shape.

在Illustrator中新建文檔，選擇多邊形工具。在你的文件上點擊開啟多邊形窗口，可以使我們設定形狀的特徵。設定半徑為70px，邊數設定為6。按一下OK以建立形狀

Set the Fill color of the polygon to #8E8E8E. Then add a 20px Stroke using the same color. Open the Stroke panel (Window > Stroke) and set the Corner to Round Join. Then right-click on this shape, go to Transform > Rotate, set the Angle to 90 degrees and click OK.

設定多邊形的填滿顏色為#8e8e8e，然後加入同樣顏色的20px的描邊。開啟描邊面板（視窗 > 描邊）設定連接角為圓角。然後在該形狀上右鍵，點選：變換 > 旋轉，設定角度為90度，然後點選OK

From the option bar above your image set the width of this shape to 140px and its height to 162px.

在圖片上方的選項欄中設定形狀的寬度為140px，高度為162px

Use the Selection Tool (V) to select the hexagon shape and copy it (Ctrl/Cmd + C). Go back to your Photoshop document and paste it as a smart object (Ctrl/Cmd + V). Go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key and scale this layer up until its width is 300px, or four 960 grid columns (you can see the dimensions of the shape that your are transforming in the .

用選取工具選取六邊形形狀並複製它（Ctrl/Cmd + C）。回到PS文檔，貼上為智慧型物件（Ctrl/Cmd + V）。點選：編輯> 自由變換（Ctrl/Cmd + T），按住Shift鍵，縮放這個圖層直到寬度為300px，或是960網格的4列（在變換的時候，你可以在資訊面板看到形狀的尺寸）

 

以上的步驟都是在Illustrator中完成的，但同樣在PS中也能完成的非常出色，故以下的補充步驟都是在PS中的完成步驟。這很重要，因為下面很多都要用到這個步驟。給它取名為六邊形步驟

 

用多邊形工具，設定邊數為6，按住Shift鍵，建立正六邊形（280，388），半徑為150px，並加入20px的描邊

在該圖層上右鍵選擇轉換為智慧型物件

複製該圖層，並在圖層面板中隱藏該圖層，以備後面的步驟需要時使用

 

Set the Fill of this layer to 0%. Then double-click on it and apply the "Dot Grid 2" pattern from the Tileables Shapes Pack. Name this layer "halftone pattern". Add this layer inside agroup (Cthis layer "halftone pattern". Add this layer inside agroup (Ctrl/Cmd + G) and name it "Web Design". Then create a new parent group and name it "Services".

設定這個圖層的填滿為0%。然後雙擊它添加Tileables Shapes Pack中的Dot Grid 2圖案。命名該圖層為halftone pattern。把該層加入到一個群組Web Design（Ctrl/Cmd + G）。然後建立一個新的父群組，命名為Services

 

Right-click on the "halftone pattern" layer and select Convert to Smart Object. Then apply a Color Overlay effect to this layer using the color #a7c5bd.

在halftone pattern圖層上右鍵選擇轉換為智慧型物件。然後給該圖層添加顏色疊加樣式，顏色： #a7c5bd

Copy again the hexagon shape from Illustrator and paste it in your Photoshop document as a smart object. Go to Edit > Free Transform (Ctrl/Cmd + T) and set the horizo​​ntal and vertical scale to 175% from the option bar above scale to 175% from the option bar above scale to 175% from the option bar above 1).

再次從Illustrator複製六邊形，在你的PS文件中貼上為智慧型物件。點選：編輯 > 自由變換（Ctrl/Cmd + T），並在影像上方的選項欄中設定水平垂直方向的175%的縮放

 

Name this layer "border" and move it to the center of the first hexagon shape. In order to align these two layers properly, make sure that you have the Smart Guides activated (View > Show > Smart Guides). Move this layer over the first hexagon shape and you will see some pink lines that indicate how the two layers are aligned.

命名該圖層為border並移動到第一個六邊形的中間。為了完美對齊兩層，請確保您啟動智慧參考線（視圖 > 顯示 > 智慧參考線）。移動該層到第一個六邊形，你會看到一些粉紅色的線，表示兩層是如何排列的。

 

Add a Color Overlay effect to the "border" layer using the color #a7c5bd (2).

為border層添加顏色疊加的樣式，顏色： #a7c5bd

複製在六邊形步驟中的圖層，點選：編輯 > 自由變換（Ctrl/Cmd + T），並在影像上方的選項欄中設定水平垂直方向的94%的縮放。命名該圖層為border，並加入顏色疊加的樣式，顏色： #a7c5bd

 

We need to apply a noise filter to this layer. However, the Color Overlay effect will go over the noise filter. To solve this issue we will need to convert this layer into a smart object. Right-click on the "border" layer into a smart object. Right-click on the "border" layer and select Convert to Smart Object. Then go to Filter > Noise > Add Noise and use the settings from the image below (3).

我們要給該層添加雜色的濾鏡。然而，顏色疊加效果會在雜色濾鏡的上方。為了解決這個問題，我們需要將其轉換為智慧型物件。在border層選擇轉換為智慧型物件。點選：濾鏡 > 雜色 > 新增雜色，並依照下圖進行設置

 

Double-click on this layer to open the Layer Style window and use the settings from the following image for Outer Glow. The color that I used is #89b9ac (3).

雙擊該圖層開啟圖層樣式窗口，並按照下圖設定外發光樣式。顏色： #89b9ac

 

Copy the hexagon shape one more time from Illustrator and paste it in Photoshop as a smart object. Go to Edit > Free Transform (Ctrl/Cmd + T) and set the horizo​​ntal and vertical scale to 170%. Name this layer "column bg" and move it to the center of the other two hexagon shapes.

再次從Illustrator複製六邊形的形狀並在PS中貼上為智慧型物件。點選：編輯 > 自由變換（Ctrl/Cmd + T），並水平垂直縮放170%。命名該圖層為column bg並移動到其他兩個六邊形形狀的中間

複製在六邊形步驟中的圖層，點選：編輯 > 自由變換（Ctrl/Cmd + T），並在影像上方的選項欄中設定水平垂直方向的90%的縮放。命名該圖層為column bg

 

Add a Color Overlay effect to this layer using the color #f5f2ea. Right-click on it and select Convert to Smart Object. Then apply a noise filter using the settings from the image below. Double-click on this layer to open the Layle the La window and use the settings from the following image. For the Stroke effect use the color #83a098.

請為該圖層新增顏色疊加樣式，樣式： #f5f2ea。在圖層上右鍵選擇轉換為智慧型物件。並依照下圖添加雜色濾鏡。雙擊該圖層開啟圖層樣式窗口，並依照下圖設定樣式。描邊的顏色： #83a098

圖案疊加的圖案是6px*6px的，左上角有2px*2px的黑色色塊

 

 

 

 

Step 9 – Adding the "Services" area content

步驟9：新增Services區域的內容

 

Select the Type Tool (T) and write the headline "Web Design" using the font Muncie with the size 48px and the color #7b9d94. Then add a white Drop Shadow effect using the settings from the image below.

用文字工具書寫標題Web Design，字體：Muncie，字號：48px，顏色： #7b9d94。然後按照下圖設定白色的投影樣式

 

Use the Type Tool (T) to create a text box 230px wide (you can see the width of your text box as you are creating it in the Info panel). Add a paragraph of text in this box using with font Opens Lightgraph of text in this box using with font the color #5c574f and the size 15px.

用文字工具建立一個文字區塊，230px寬（在你建立文字區塊的時候，你可以在資訊面板中看到文字區塊的寬度。）。在其中加入一段文字，字體：Open Sans Light，字號：15px，顏色： #5c574f

 

To make the text more legible we will set the line height to 1.6em. Our font size is 15px. If we multiply 15 by 1.6 we get 24. That is the pixel value of the line heighting and the line height 到leading to 24px.

為了讓文字更容易閱讀，我們要設定行高為1.6倍。我們的字號為15px，15*1.6=24。這就是行高的像素數。點選字元面板，設定字元間距為24px

 

Now we will add a "View Portfolio" button for this column. Later on we will create the "portfolio" area and we want the user to be able to select one of the services offered and get the portfolio items for that service right underne area.

現在我們要為該列新增View Portfolio按鈕。後面我們會建立Portfolio區域，希望使用者能選擇一個所提供的服務，並且得到下面Portfolio方面的項目。

 

Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 120px by 30px and the color #a7c5bd. Name this layer "button", right-click on it and select Convert to Smart Object.

選擇圓角矩形工具建立一個圓角矩形（220，470），尺寸：120px*30px，顏色： #a7c5bd。命名該圖層為button，在該圖層上右鍵選擇轉換為智慧型物件

 

Go to Filter > Noise > Add Noise and use the settings from the image below (1). Then double-click on this layer to open the Layer Style window and use the settings from the following image (1).

點選：濾鏡 > 雜色 > 新增雜色，並依照下圖進行設定。然後雙擊該圖層開啟圖層樣式視窗並按照下圖進行設定樣式。 描邊的顏色： #83a098

 

Select the Type Tool (T) and write the words "See Portfolio" using the font Oswald with the size 17px and the color #f9f9f9. Put this text layer in the middle of your button. Then add a Drop Shadow layeffect to this button. Then add a Drop Shadow layeffect to this button。 the settings from the image below (2). The color that I used is #83a098.

選擇文字工具書寫文字See Portfolio，字體：Oswald，字號：17px，顏色： #f9f9f9。把該文字圖層放在你的按鈕的中間。然後按照下圖加入投影的圖層樣式，顏色： #83a098

 

Add these two layers inside a group and name it "button".

把這兩個圖層歸併到一組button

 

Use the Line Tool (U) with the color #cbc5b7 to create two horizo​​​​ntal lines underneath the headline of this column. The top line is 200px wide, the second one is 240px wide and they hapave a 9x, the second one is 240px wide and they hapave 9mx. 1px line".

用直線工具為本列的標題的下方創建兩條水平直線，顏色： #cbc5b7。上面的直線（180，300）寬度為200px，第二條直線（160，310）寬度為240px，兩條直線之間的空距為9px。命名這些圖層為1px line

 

Duplicate the two line layers and move the new ones 1px down. Change the color of the new lines to white and set their opacity to 40%.

複製這些圖層並移動新圖層往下1px。改變新線的顏色為白色，並設定不透明度為40%

 

Group all these line layers and name the group "lines". Use the Rectangular Marquee Tool (M) to create a selection over the area where the lines intersect with the text. Make sure that the "lines" group is active and go to Layer > Layer Mask > Hide Selection.

把這些直線的圖層歸併到一組lines。用矩形選框工具建立一個直線穿過文字的部分的選取範圍。確保lines組是啟動的，然後點選：圖層 > 圖層蒙版 > 隱藏選區

Create two more columns for the "Services" area just like you created the "Web Design" column. All the settings are the same, except for the colors, which you can get from the following image.

在Services區域建立另兩個列，就像你建立的Web Design列。所有的設定都是一樣的，除了顏色以外，就像下圖所示一樣

 

 

提示：

首先，能想到的是複製Web Design群組，然後修改群組內圖層的顏色值。很遺憾，直接做是不行的。因為組內許多圖層都是智慧對象，修改一個智慧對象的顏色值，則其他同源智慧對象的顏色值也會同時改變（這就是智慧對象的優勢，一處修改，處處改變）。例如，中間的六邊形改成紅色，則左邊的六邊形也同時會變成紅色。

 

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

 

比較好的做法是，先把Web Design組轉換為智慧對象，然後在圖層上右鍵選擇透過拷貝新建智慧對象。這樣，新複製圖層中的智慧型對象和原圖層中的智慧型對象就不是同源了，修改新的智慧型對象，原智能對像也不會改變。

 

顏色值設定如下：

color：顏色

Sharp color：形狀的顏色

Stroke：描邊

Color Overlay：顏色疊加

Outer Glow：外發光

 

 

 

We finished the "Services" area. Here we applied the proximity and repetition design principles. We repeated the shape of each column and the fonts to indicate that the three columns are related and have similar functionalities and . three columns are related and have similar functionalities and . three  我們完成了Services區域。在這裡，我們採用了接近和重複的設計原則。我們重複相關的三個列的每一列和字體的形狀，並具有相似的功能和內容。

 

Font choices

字體選擇

 

So far we used five fonts in this design. We can exclude the script fonts, which were used only once for different purposes and talk about the other three: Muncie, Oswald and Open Sans.

到目前為止，我們在本設計中使用五種字體。我們可以排除腳本字體——這是為了不同的目的只使用了一次——談論其它三種字體：Muncie，Oswald和Open Sans。

 

I chose the font Muncie because it is a beautifully designed condensed typeface which matches the style I wanted to create. We used this font for the logo and the "Services" area headlines. This font is not legible enough for small. navigation bar), so I added Oswald to the mix. These two fonts go well together because they share a characteristic: they are both condensed typefaces.

我選擇的字體Muncie，因為它是一個設計精美的簡明字體相匹配的風格符合我創造的文字。我們用這種字體包含Logo和Services區域的頭條。此字體在足夠小的尺寸時不清晰（例如導航列的），所以我使用了Oswald的。這兩種字體可以融洽相處，因為它們共享一個特點：他們都是簡潔的字體。

 

For the blocks of text I chose the Open Sans font family because it comes in 10 different styles to chose from. The Light version of this font, which we will use the most, creates a nice contrast with the other fonts used.   對於文字區塊，我選擇了Open Sans字體族，因為它有10個不同風格的選擇。字體的簡易版本，我們用得最多，與使用其他字體有更好的對比。

 

Step 10 – Creating the "Portfolio" area

步驟10：建立Portfolio區域

 

The "Portfolio" area will be linked to the services area. Since we are creating a one-page website, we need the functionality of selecting a portfolio category and get a list of the portfolio items from that category.

Portfolio區域從Services區域連結過來。自從我們要建立一個單頁網頁，我們需要的選擇類別的功能和從該類別中獲得項目的清單的功能。

 

We are going to use the three services as categories. In order to indicate which category is selected, we will use the same color scheme that we use for the "Services" area.

我們打算使用3個服務的類別。為了表明所選的類別，我們將使用相同和Services區域相同的配色方案。

 

When a user clicks on say, the "Branding" service, the portfolio section underneath will have a red stroke, the highlight color and headline color will also be red and there will be a red bar connecting the "Branding" column with there will be a red bar connecting the "Branding" column with . These three visual indicators will be enough for the user to quickly understand how the portfolio section works.

當使用者點擊Branding服務，下面的部分將有一個紅色的描邊，突出顯示的顏色和標題的顏色是紅色的，會有一個紅色的桿連接的Branding一列和portfolio方塊。這三種視覺指標，將足以使用戶快速了解Portfolio區域是如何運作的。

 

Let’s start designing the "Portfolio" area. Create a new group and name it "Portfolio". Create another group inside this one and name it "portfolio bg".

讓我們開始設計Portfolio區域。建立新組Portfolio。在其中創建另一個新組Portfolio bg

 

Select the Rectangle Tool (U) and create a rectangle with the dimensions 960px by 310px and the color #89b9ac. Name this layer "first border" and set its opacity to 20%.this Then select the Mthis ool V) 60px underneath the "Services" area.

選擇矩形工具建立一個矩形（120，620），尺寸：960px*310px，顏色： #89b9ac。命名此圖層為first border，設定不透明度為20%。然後選擇移動工具，移動到Services區域下方60px處

 

Create a new rectangle with the dimensions 950px by 300px and the color #a7c5bd. Name this layer "second border" and move it in the middle of the first rectangle. Double-click on this layer to open the this this. from the following image. The color that I used for the Inner Shadow and Stroke effects is #83a098.

建立新的矩形（125，625），尺寸：950px*300px，顏色： #a7c5bd。命名此圖層為second border，並移動到第一個矩形的中間。雙擊該圖層開啟圖層樣式視窗按照下圖設定樣式。內陰影和描邊的顏色： #83a098

Create a new rectangle with the dimensions 940px by 290px and the color #f5f2ea. Name this layer "portfolio bg". Double-click on this layer to open the Layer Style window and color the sett from ollo layer to open the Layer Style window and color the sett in the follo color color color color color the swing. used is #f9f8f5.

建立新的矩形（130，630），尺寸：940px*290px，顏色： #f5f2ea。命名此圖層為Portfolio bg。雙擊該圖層開啟圖層樣式視窗並按照下圖進行設定。描邊的顏色： #f9f8f5

 

The "Portfolio" area will be ped into two columns. The left one will display a list of thumbnails. When a user clicks on a thumbnail, the right column will display more information about that portfolio item.

Portfolio區域會被分成兩個欄位。左邊的一列會顯示一組縮圖。當使用者點擊縮圖的時候，右邊的一列會顯示該項目的更詳細的資訊。

 

Now we will create the background for the right column. Select the Rectangle Tool (U) and create a rectangle with the dimensions 640px by 290px and the color #ece8df. Name this layer "active item bg", right-clectse Convert to Smart Object.

現在我們要建立右邊一列的背景。選擇矩形工具建立一個矩形（430，630），尺寸：640px*290px，顏色： #ece8df。命名此圖層為active item bg，在圖層上右鍵選擇轉換為智慧型物件

 

Add a noise filter using the settings from the image below. Then double-click on this layer to open the Layer Style window and use the settings from the following image. The Inner Glow color that I used is #9d9180.

請依照下圖添加雜色濾鏡。然後雙擊開啟圖層樣式視窗並按照下圖設定樣式。內發光的顏色： #9d9180

 

Create two vertical lines with the weight 1px over the left edge of the "active portfolio bg" rectangle. For the dark one use the color #c3b9ab and for the light one use the color #f9f8f5.

在active portfolio bg矩形的左邊創建兩條垂直直線，粗細1px。深色的一條直線（430，630，1，290）顏色： #c3b9ab；淺色的一條直線（429，630，1，290）顏色： #f9f8f5

 

Then select the Rectangle Tool (U) and create a rectangle with the dimensions 4px by 80px that connects the bottom of the "Web Design" column with the "Portfolio" area border. Set the color of this layer to #a7c5bd and name and itd and connector".

然後選擇矩形工具建立一個矩形（278，545），尺寸：4px*80px，連接Web Design列的底部和Portfolio區域的邊。設定此圖層的顏色： #a7c5bd，命名為connector

 

Step 11 – Adding the portfolio items

步驟11：新增Portfolio項目

 

Create a new group and name it "portfolio items". Copy the hexagon shape from Illustrator and paste it in Photoshop as smart object. We are repeating the hexagon shape to maintain the same visual style throughout the entire designsign.

新建組Portfolio items。從Illustrator複製六邊形形狀並在PS中貼上為智慧型物件。我們重複六邊形形狀，以在整個設計中保持相同的視覺風格。

 

Go to Edit > Free Transform (Ctrl/Cmd + T) and set the horizo​​ntal and vertical scale to 50%. Add a Color Overlay effect to this layer using the color #f4eee7 and a 1px inside Stroke effect using the color #c39ab. this layer "border".

點選：編輯 > 自由變換（Ctrl/Cmd + T）並在水平垂直方向縮放50%。為這個圖層加入顏色疊加樣式，顏色： #f4eee7，和1px的內描邊樣式，顏色： #c3b9ab。命名該圖層為border

參照之前的六邊形步驟，用多邊形工具創建六邊形，半徑為40，添加10px的居中描邊，轉換為智能對象，移動到（138，649）。這樣的六邊形就會有圓角效果。為這個圖層加入顏色疊加樣式，顏色： #f4eee7，和1px的內描邊樣式，顏色： #c3b9ab。命名該圖層為border。

 

Duplicate the "border" layer (Ctrl/Cmd + J), right-click on it and select Clear Layer Style. Then go to Edit > Free Transform (Ctrl/Cmd + T) and set the horizo​​ntal and vertical scale to 42%. Name this layer "image_holder" and make sure it is in the middle of the "border" layer.

複製border圖層（Ctrl/Cmd + J），在圖層上右鍵選擇清除圖層樣式。然後點選：編輯 > 自由變換（Ctrl/Cmd + T）。在水平垂直方向縮放84%。命名此圖層為image_holder，並保證它在border圖層的中間

 

Open an image that you want to feature in the "Portfolio" area and move it over the "image_holder" layer. Name this layer "image", right-click on it and select Create Clip Mask. Your image sh now be ible ouldon the "image_holder" hexagon shape.

打開你想顯示在Portfolio區域的圖片並移動到image_holder圖層的上方。命名該圖層為image，在圖層上右鍵選擇建立剪貼蒙版。你的圖片僅在image_holder六邊形的中間的部分才顯示。

 

Put all the three layer inside a group and name it "item #1".

把這些組都歸併到一個新組item #1。

Duplicate the "item #1" group 7 times and arrange your portfolio items in a coronene shape.

複製item #1組7次，並排列你的Portfolio項目成一個六角形蜂窩狀。

 

The fourth portfolio item has a different border color to indicate that it is selected. Simply change the Color Overlay to #a7c5bd and the Stroke color to #83a098 for that "border" layer.

第四個Portfolio項目有不同的邊框顏色，以表示它被選取。簡單地改變那個border圖層顏色疊加的顏色： #a7c5bd和描邊顏色： #83a098。

Now we will add the content for the active portfolio item (the one we highlighted earlier). Create a new group and name it "active item". Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded tangle Tool (U), set the Radius to 4px and create a rounded tanate with the dimensions 220px by 250px and the color #f5f2ea. Name this layer "border" and add a 1px inside Stroke to it using the color #c3b9ab.

現在我們要為活動的Portfolio項目添加內容（之前高亮的那個）。新建群組active item。選擇圓角矩形工具，設定半徑為4px，建立一個圓角矩形（450，650），尺寸：220px*250px，顏色： #f5f2ea。命名此圖層為border，並加入1px的內描邊的圖層樣式，顏色： #c3b9ab。

 

Select the Rectangle Tool (U) and create a rectangle with the dimensions 200px by 230px in the middle of the rounded rectangle.

選擇矩形工具建立一個矩形（460，660），尺寸：200px*230px，在之前的圓角矩形的中間。

 

Open an image that you want to feature in this area, move it over the "image_holder" layer. Name this layer "image", right-click on it and select Create Clipping Mask. Now your image is visible on side thes vis .

打開你想顯示在本區域的圖片並移動到image_holder圖層的上方。命名該圖層為image，在圖層上右鍵選擇建立剪貼蒙版。你的圖片僅僅在矩形的中間的部分才顯示。

Select the Type Tool (T) and write the name for your portfolio item using the font Oswald with the size 24px and the color #7b9d94. Move this text layer 20px to the right from the left edge of the imeffect edge a the image Add edge of the imeffect edge of the image。 to this headline using the settings from the image below.

用文字工具書寫你的Portfolio項目的名字，字體：Oswald，字號：24px，顏色： #7b9d94。移動文字到圖片的右側20px處。按照下圖為本標題文字添加投影樣式

 

Use the Line Tool (U) to create a horizo​​ntal line with the dimensions 370px by 1px and the color #c3b9ab. Move this line 10px beneath the headline. Duplicate this layer (Ctrl/Cmd + J of the change the color layer (Ctrl/Cmd + J of the man the color. to #faf9f8 and move it 1px down.

用直線工具建立一條水平線（690，680），尺寸：370px*1px，顏色： #c3b9ab。移動直線到頭條文字下方10px處。複製這個圖層（Ctrl/Cmd + J），把新線的顏色改為 #faf9f8，並且往下移動1px。

 

Select the Type Tool (T) and create a text box with the width 370px. Add a paragraph of text using the font Open Sans Light with the size 15px and the color #5c574f. Also, go to the Character leael and set the leading 24px, like we did for the "Services" area paragraphs.

用文字工具建立一個文字區塊，寬度為370px。新增一段文字，字體：Open Sans Light，字號：15px，顏色： #5c574f。並點擊到字元面板，設定行間距為24px，就像我們之前Services區域的段落。

 

Step 12 – Creating the "About" area

步驟12：建立About區域

 

The "About" area will contain two columns with the photo, name and description of two persons. We will continue using the hexagon shape for the photos, in order to keep the web design consistent.

About區域有2列，包含照片、姓名、2個人的說明文字。我們繼續用六邊形來顯示照片，為了保持一致的網頁設計。

 

Create a new group and name it "About". Copy the hexagon shape from Illustrator and paste it in Photoshop as a smart object. Go to Edit > Free Transform (Ctrl/Cmd + T) and scale down this layer until it is as wideit is as wideit as two grid columns. Name this layer "border", double-click on it to open the Layer Style window and use the settings from the following image. For the Color Overlay effect I used the color #d0cbc0 and for the Stroke Color Overlay effect I used the color #d0cbc0 and for the Stroke effect #958f82.

新建組About。從Illustrator複製六邊形形狀，並在PS中貼上為智慧型物件。點選：編輯 > 自由變換（Ctrl/Cmd + T），並縮放圖層到寬度為2網格列。命名圖層為border，雙擊該圖層開啟圖層樣式視窗並依照下圖設定樣式。顏色疊加的顏色： #d0cbc0，描邊的顏色： #958f82。

新建組About。依照六邊形步驟製作六邊形，半徑70px，居中描邊20px，轉換為智慧對象，移動到（127，987）。命名圖層為border，雙擊該圖層開啟圖層樣式視窗並依照下圖設定樣式。顏色疊加的顏色： #d0cbc0，描邊的顏色： #958f82。

 

Duplicate the "border" layer (Ctrl/Cmd + J), right-click on the new one and select Clear Layer Style. Then use Free Transform (Ctrl/Cmd + T) to scale down this shape. Name this layer "image_holder" .

複製border圖層（Ctrl/Cmd + J），在新的圖層上右鍵選擇清除圖層樣式。然後用自由變換（Ctrl/Cmd + T），縮放這個形狀90%。 ，命名該圖層為Image_holder

 

Open in Photoshop the image you want to display in this area and move it over the "image_holder" layer. Right-click on your image layer and select Create Clipping Mask.

在PS中開啟你想顯示在本區域的圖片並移動到Image_holder圖層的上方。在圖片圖層上右鍵選擇建立剪貼蒙版。

Select the Type Tool (T) and add some content next to the image. For the headline I used the font Oswald with the size 24px and the color #a39f94. For the block of text I used the font Open Sans Light with the size 15px and the color #5c574f. I also set the leading to 24px.

選擇文字工具在圖片的右側添加一些內容。標題文字，字體：Oswald，字號：24px，顏色： #a39f94。對於文字區塊，字體：Open Sans Light，字號：15px，顏色： #5c574f。我也設定行間距為24px

 

Use the Line Tool (U) to create a horizo​​ntal separator between the headline and the block of text. For the first line use the color #bebbb1 and for the second one use #ffffff.

用直線工具在標題和文字區塊之間建立水平的分隔符號。第一條直線（290，1023，300，1）顏色：#bebbb1，第二條直線（290，1024，300，1）的顏色：#ffffff

 

Repeat this step to add the second column for the "About" area.

重複此程序為About區域新增第二列

 

Step 13 – Creating the contact form background

步驟13：建立聯絡表單的背景

 

The "Contact" area will have two columns: one for the contact form and the other one for the Twitter feed. We will apply the contrast design principle to differentiate the two columns.

Contact區域包含2欄位：一列是聯絡表單，另一列是Twitter feed。我們將利用對比的設計原則，區分這兩個列。

 

The contact form will be wider that the Twitter feed column because it is more important and it needs to attract more attention. To accomplish this goal, we are also going to create a different background to the contact form. Lnow

聯絡表單會比Twitter feed列寬一點，因為它是更重要的，它需要以吸引更多的關注。為了實現這一目標，我們還要建立一個不同背景的聯絡表單。讓我們開始工作。

 

Create a new group and name it "Contact". Create another group inside this one and name it "contact bg". Select the Rounded Rectangle Tool (U) and create a rounded rectangle with the dimensions 620px by 360px and the color #. Name this layer "border", right-click on it and select Convert to Smart Object.

新建組Contact。在其中建立另一個群組Contact bg。選擇圓角矩形工具，半徑6px，建立一個圓角矩形（130，1210），尺寸：620px*360px，顏色： #d0cbc1。命名該圖層為border，在該圖層上右鍵選擇轉換為智慧型物件。

​

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 use the settings from the following image. The Stroke color that I used is #958f82.

Click: Filter > Noise > Add Noise and set it up as shown below. Double-click the layer to open the Layer Style window and set the style as shown below. Stroke style color: #958f82.

Select the Rounded Rectangle Tool (U) and set the Radius to 4px. Then create a rounded rectangle with the dimensions 610px by 350px and the color #f5f2ea. Move this layer in the middle of the dark rounded rectangle.

Select the Rounded Rectangle Tool and set the Radius to 4px. Then create a rounded rectangle (135, 1215) , size: 610px*350px, color: #f5f2ea. Move this layer to the middle of the dark rounded rectangle

​

Name this layer "contact bg", right-click on it and select Convert to Smart Object. Add 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. The color that I used for the Stroke effect is #f9f8f5.

Name this layer Contact bg, right-click on the layer and select Convert to Smart Object. Add the Noise filter as shown below. Double-click the layer to open the layer style window and set the layer style as shown below. Stroke style color: #f9f8f5

​

​

Step 14 – Creating the contact form

Step 14: Create Contact Form

​

Use the Rectangle Tool (U) with the color #faf9f8 to create three input fields and one text area for the contact form. The width of these rectangles should be 350px. We need some space in the right side of this area to add a short paragraph of text and more contact details.

Using the Rectangle Tool, color: #faf9f8, create 3 text boxes and a text area in the contact form. The width of these rectangles is 350px. We need some space on the right to add a short paragraph of text and more contact details

These rectangles are (160, 1240, 360, 35), (160, 1286, 360, 35), (160, 1332, 360, 35), (160, 1378, 360, 130)

​

For each of these rectangles apply the following layer styles. The color that I used for the Stroke effect is #d1cec7.

Add the following layer styles to each rectangle. Stroke style color: #d1cec7

​

Add some placeholder text inside each input field. I used the font Open Sans Light with the size 13px and the color #847f76. Then add a "Send" button with the color #aea89c and the border #8a857a. Copy the other settings from a previous button you created for this web design.

Add some text to each text box. The font I used: Open Sans Light, size: 13px, color: #847f76. Then add a Send button, color: #aea89c, border color: #8a857a. Copy the style of the button you created earlier to this button.

Select the Type Tool (T) and create a text box next to the contact form with the width 190px. Then add a short block of text inside this box. I used the font Open Sans Light, with the size 15px, the color #5c574f and set the leading to 24px.

Select the Text Tool and create a text block next to the contact form with a width of 190px. Then add a paragraph of text in it. I used font: Open Sans Light, font size: 15px, color: #5c574f, line height: 24px.

​

Select the Line Tool (U) and create a horizontal line with the dimensions 190px by 1px and the color #c8c4bb. Name this layer "1px line".

Select the Line Tool to create a horizontal line (530, 1378), size: 190px*1px, color: #c8c4bb. Name this layer 1px line

​

Duplicate this layer (Ctrl/Cmd + J) and move the new line 2px down. Then duplicate both of these lines and move the two new layers 1px down. Change the color of the new lines to #fcfaf6. Group all these layers together and name the group "lines".

Duplicate this layer (Ctrl/Cmd + J) and move the new line down 2px. Then duplicate these two straight lines and move the new line 1px downward. Change the color of the new line to #fcfaf6. Combine these straight lines into a set of lines.

Copy the hand icon from the retro icons set you downloaded and paste it in Photoshop as a smart object. Use Free Transform (Ctrl/Cmd + T) to scale it down and flip it horizontally, so it points to the contact form. This way we will direct the user's eyes towards the contact form.

Copy the hand icon from the retro icons you downloaded and paste it as a smart object in PS. Scale it with Free Transform (Ctrl/Cmd + T) and flip it horizontally, so now it points to the contact form. This is where we point the user’s attention to the contact form

​

Move the hand icon in the middle of the lines. Then use the Rectangular Marquee Tool (M) to select the area where the lines intersect with the icon. Make sure that the "lines" group is active and go to Layer > Layer Mask > Reveal All.

Move the hand icon to the middle of the line. Then use the Rectangular Marquee Tool to create a selection with a straight line going through the icon. Make sure the lines group is activated, click: Layer > Layer Mask > Hide Selection.

​

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 #837e70.

Double-click the layer to open the Layer Style window and set the layer style as shown below. Color for color overlay: #837e70

​

​

Use the Type Tool (T) to add another block of text beneath the lines with more contact information, such as email, phone and Skype username. For this block of text I used the fonts Oswald Italic and Semibold Italic with the size 14px, the color #5c574f and one line break between each line of text.

Use the Type Tool to add another text block below the line to display more contact information, such as email, phone, and Skype username. Fonts for this text: Oswald Italic and Semibold Italic, size: 14px, color: #5c574f. Each line has a newline.

​

Step 15 – Adding the Twitter feed

Step 15: Add Twitter feed

​

Create a new group and name it "Twitter". Then use the Type Tool (T) to add a headline with the font Oswald, the size 24px and the color #a39f94.

Create a new group Twitter. Then use the text tool to add a title, font: Oswald, font size: 24px, color: #a39f94

​

Select the Line Tool (U) and add two horizontal lines beneath the headline. For the first line use the color #bebbb1 and for the second one use #ffffff.

Select the Line Tool and add two horizontal lines (770, 1242, 300, 1) and (770, 1243, 300, 1) below the title. Color of first line: #bebbb1 and color of second line: #ffffff

​

Then add a couple of text boxes that represent the latest tweets. Use the font Oswald Italic with the size 14px and the color #5c574f.

Then add a pair of text representing the latest Tweets. Font: Oswald Italic, Size: 14px, Color: #5c574f.

​

Create a "Follow us" button with the fill color #a7c5bd and the border color #83a098. The other settings for this button are the same ones you applied to the previous buttons.

Create a Follow us button with fill color: #a7c5bd, and border color: #83a098. The other settings for this button are the same as the previous buttons.

​

Step 16 – Adding headlines on the side of the web design

Step 16: Add headlines to the side of the web design

​

Since this is a one-page website, I thought I would add a headline next to each section to give users a feedback on which section is currently visible, in addition to the navigation bar feedback.

Since this is a single page design, I thought I would add a title to each section to give the user a feedback on which section is currently visible, in addition to the feedback in the navigation bar.

​

Create a new group and name it "Headlines". Then select the Line Tool (U) and create a vertical line from the top of the "Services" area to the bottom of the "Contact" area. Move this line 20px to the left from the left edge of the website. Name this layer "1px line".

Create a new group Headlines. Then select the Line Tool and create a vertical straight line (100, 218, 1, 1352) with color: #b5b2ac. From the top of the Services area to the bottom of the Contact area. Move this line to 20px from the left side of the page. Name the layer 1px line

​

Duplicate this layer (Ctrl/Cmd + J) and move the new line 1px to the left. Then set its color to #fbfbfa.

Duplicate this layer (Ctrl/Cmd + J) and move the new line 1px to the left. Then set the color to #fbfbfa

​

Select the Type Tool (T) and write the name of each section of the website next to it. Take a look at the following image for reference. I used the font Muncie with the size 36px and the color #b5b2ac. Apply a Drop Shadow effect to the text layers using the settings from the image below.

Select the Type Tool and write the name of each section to the left of each section. Refer to the picture below. The font I used: Muncie, size: 36px, color: #b5b2ac. Add a drop shadow layer style to the text layer as shown below.

Create a new group and name it "Copyright". Then select the Type Tool (T) and add a copyright statement at the bottom of the website. I used the font Open Sans Regular with the size 12px and the color #837f79.

Create a new group Copyright. Then select the text tool to add a copyright text at the bottom of the page. The font I use: Open Sans Regular, font size: 12px, color: #837f79

​

Conclusion

Conclusion

​

In this tutorial we aplied the four basic design principles: contrast, repetition, alignment and proximity to create a clean retro web design. I hope you enjoyed ir. Click on the following image to see the full-size version of the design.

In this tutorial, we give you four basic principles of design: contrast, repetition, positioning and proximity to create a clean retro web design. I hope you like it. Click on the image below to see a full size version of the design.

​

Postscript: This tutorial is known as the recommended tutorial in 2012. The entire page is concise and clean. The main techniques of this tutorial are: 1. Production of rounded hexagons. Make full use of the stroke effect to complete the production of rounded hexagons. 2. Use custom simple patterns to achieve various textures, the effect is like the effect of coated paper. 1. Cleverly use the overlay of layers to achieve a special outer glow effect.

For more PS web design tutorial XXII - Creating a single-page retro web layout in PS related articles, please pay attention to the PHP Chinese websitephotoshop image processing tutorial!