Step 21

We’ll start working on our lower content area, by dragging a new guide after 50px.

步驟21

現在要建立低位的內容區域，在之前參考線的下方50px處拖動一條新的水平參考線

 

Add a title with these character settings:

• Font Family: Rockwell
• Font size: 30px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color
  : #81aa48

 

按照下面的設定新增標題：

• 字型： Rockwell
• 字型大小： 30px
• 字型樣式： Regular
• 消除鋸齒樣式：平滑
• 顏色： #81aa48

 

Drag two new horizontal guides according to the following image.

按照下圖新建兩條水平參考線（一條下方20px處，另一條再下方70px處）

 

Write some text with these character settings:

• Font Family: Arial
• Font size: 14px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #505150

 

按照下面的設定新增文字：

• 字型： Arial
• 字型大小： 14px
• 字型樣式： Regular
• 消除鋸齒樣式：無
• 顏色： #505150

 

Drag a new guide after 160px as a lower border for the content area.

在之前下方的160px處新建一條水平參考線作為內容區域的底邊

 

Step 22

Write another title and text using the same character settings we’ve used in the previous step.

步驟22

用和前一步驟相同的惡設定新增另一個標題和文字。（如下圖，先要在倒數第二根水平參考線的下方50px處新建一條水平參考線）

 

Type a quotation mark on your keyboard, with these character settings:

• Font Family: Arial
• Font size: 200px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #505150

And reduce its layer’s Opacity to 50%

 

按鍵盤上的引號輸入一個雙引號，按照下面的設定：

• 字型： Arial
• 字型大小： 200px
• 字型樣式： Regular
• 消除鋸齒樣式：平滑
• 顏色： #505150

調整該圖層的不透明度為50%

 

Write a word of wise or quote of yours with these character settings:

• Font Family: Arial
• Font size: 14px
• Font weight: Italic
• Anti-aliasing setting: Smooth
• Color: #81aa48

輸入一些心得或名言引用，按照下面的設定：

• 字型： Arial
• 字型大小： 14px
• 字型樣式： Italic
• 消除鋸齒樣式：平滑
• 顏色： #81aa48

 

Step 23

In order to create a vertical separating line, create two vertical lines next to each other, and fill them with these values: #ffffff – #b3b3b3.

步驟23

建立豎直的分隔符，建立兩條緊挨著的豎直的直線（（509，940，1，215）和（510，940，1，215）），顏色分別是#ffffff和#b3b3b3（#b3b3b3在#ffffff的左側）

 

Make sure to keep your layer organized, Here’s how I organized them.

確保你的圖層組織分明，這是我的圖層分組

 

Step 24

Write yet another title like the ones on the left (Try writing something that represents the team, for example I’ve written “Our Team”).

步驟24

在右側書寫和左側一樣的標題和文字（試著書寫點什麼代表團隊，舉例來說，這兒寫Our Team）

 

Using the Rectangle Tool (U) create a 90x90px rectangle, and fill it with any color. call this layer “photo1_holder” 
This will work as a holder for a photo of a team member. Now give it a Stroke. Use the image below for reference.

用矩形工具建立一個90px*90px的矩形（546，1011），顏色任意。命名此圖層為photo1_holder

這將是團隊成員照片的圖片塊。現在按照下圖給它新增描邊圖層樣式

漸變編輯器的顏色： #4d4d4d，#3b3b3b

 

 

Place a photo of a member and call its layer “photo1″. Make sure that the layer “photo1″ is right above “photo1_holder” layer. then right-click on “photo1″ layer and choose Create clipping mask. You should come up with something like below!

置入一張成員的照片，命名此圖層為photo1。確保photo1圖層在photo1_holder圖層的正上方。在photo1圖層上右鍵選擇建立剪貼蒙版。你的作品就應該如下所示

 

Step 25

步驟25

 

Write some text about the member, using these character settings:

• Font Family: Arial
• Font size: 14px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #7ba344

輸入成員的資訊文字，按照下面的設定：

• 字型： Arial
• 字型大小： 14px
• 字型樣式： Regular
• 消除鋸齒樣式：平滑
• 顏色： #7ba344

 

We’ll create the social media icons ourselves! let’s start with Twitter, Type “t” letter with these character settings:

• Font Family: Pico-Black (get it from here)
• Font size: 30px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #2fcfff

Then Give it a Stroke according to the following image.

我們自己建立一些社會媒體圖示！從Twitter開始，按照下面的設定輸入t字母：

• 字型： Pico-Black (從這獲得)
• 字型大小： 30px
• 字型樣式： Regular
• 消除鋸齒樣式：平滑
• 顏色： #2fcfff

然後按照下圖給它新增描邊

 

 

Let’s create the LinkedIn one! Type “in” word with these character settings:

• Font Family: Myriad Pro (get it from here)
• Font size: 30px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #0081ac

我們建立LinkedIn！按照下面的設定輸入in字母：

• 字型： Myriad Pro (從這獲得)
• 字型大小： 30px
• 字型樣式： Bold
• 消除鋸齒樣式：平滑
• 顏色： #0081ac

Facebook!? Type “f” letter with these character settings:

• Font Family: Klavika (get it from here)
• Font size: 30px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #395796

Facebook！？按照下面的設定輸入f字母：

• 字型： Klavika (從這獲得)
• 字型大小： 30px
• 字型樣式： Bold
• 消除鋸齒樣式：平滑
• 顏色： #395796

 

Step 26

Create another copy of the member photo. while selecting the photo layer, go to Layer > New Adjustment Layer > Black & White. 
Make sure to check “Use Previous Layer to Create Clipping Mask”

步驟26

建立另一個成員照片的副本。當該副本的photo圖層選中的時候，點選：圖層 > 新建調整圖層 > 黑白。

確保勾選使用前一圖層建立剪貼蒙版

 

Type the same text, social media letters we’ve written before using the same character settings, but give them all this color value: #505150.

輸入相同的文字，用之前的設定配置社會媒體圖示的文字設定，只是給他們相同的顏色： #505150

 

So obviously the member will look gray when it’s not hovered!

Make two copies and align them this way

很明顯的，當滑鼠沒有移到成員上方時灰色的

用同樣的方法建立另兩個副本

 

To make sure they’re well-aligned, make four separate groups each one of them contains a member’s content, and click on Distribute left edges in the control bar while having the four groups selected.

若要確保他們是定向的，使用四個單獨的組，每一個組都包含成員的內容，單擊圖層組的左邊的控制按鈕選定的每個組。

 

I’ve organized my layers, you?

我是這樣組織圖層的，你呢？

 

Step 27

Before we start working on the social media links area, we need to set some borders, that’s why we’ll drag two new guides according to the following image!

步驟27

在開始製作社會媒體區域前，我們需要設定一些邊界，所以我們按照下新建動兩條水平參考線（一條往下50px，一條再往下70px），再在內容區域的底部新建一條水平參考線

 

Create a selection of about 940x70px and align it like the image below.

Fill it with any color, and then give it a Gradient Overlay. use the image below for reference.

按照下圖建立一個矩形選區，尺寸：940px*70px

用任意色填充，並按照下圖新增一個漸變疊加

建議：用矩形工具建立一個矩形（46，1220，940，70），按下圖新增漸變疊加

漸變編輯器的顏色： #71953b，#7ea547

 

 

Create a rectangle of 70x45px. use the image below to align it and to give it some layer styles. call this layer “tw_bg”

新建一個矩形（36，1236），尺寸：70px*45px。按照下圖擺放，並按照下圖新增圖層樣式。命名此圖層為tw_bg

漸變編輯器顏色： #202020，#323232

 

 

Hide the layer “tw_bg” to work freely.

Create another rectangle of 10x43px, and go to Edit > Transform Path > Skew. adjust these options in the control bar:

• X: 40px
• Y: 1253px
• V: -39

Call this layer “effect” and make “tw_bg” layer visible again.

 

隱藏tw_bg圖層以便更自由的工作

建立另一個矩形，尺寸：10x43px，然後點選：編輯 > 變換路徑 > 斜切。按照下面的數字調整工具欄上的引數：

• X: 40px
• Y: 1253px
• V: -39

命名此圖層effect並使tw_bg再次可見

 

Copy layer style from “tw_bg” layer and paste it into the layer “effect”.

複製圖層tw_bg的圖層樣式到圖層effect

 

Write “t” letter with these character settings:

• Font Family: Pico-Black (get it from here)
• Font size: 35px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: Won’t matter cause we’re gonna add a Gradient Overlay

Also give it some layer styles according to the following image.

按照下面的設定輸入t字母：

• 字型： Pico-Black (從這獲得)
• 字型大小： 35px
• 字型樣式： Regular
• 消除鋸齒樣式：平滑
• 顏色： 不必關心，因為我們要新增漸變疊加

然後按照下圖設定圖層樣式。

外發光的顏色： #83ab48

漸變編輯器的顏色： #71963c，#84ac49

 

 

Step 28

Repeat step 20 to create another separator or even copy it. then place it this way:

步驟28

重複步驟20建立另一個分隔符甚至複製一份。然後移到下圖位置：

這裡重複一下步驟，用橢圓工具新建一個橢圓，並新增高斯模糊，半徑為3px，調整合適的位置和大小

 

We need to cut the right part of the rectangle, eh!? to do that select “tw_bg” layer and click on Add layer mask. 
Make a selection over the right part (that we need to cut) of the rectangle, set your foreground color to black (#000000) then click Shift+Backspace to fill it.

我們需要切除矩形的右半部分，嗯！？為此選擇tw_bg圖層並點選新增圖層蒙版

新建一個選區在矩形的右側（我們要切除的部分），設定你的前景色為黑色（#000000），然後按Shift+Backspace去填充它

 

Step 29

步驟29

 

Write some text – which is actually should be a Tweet – with these character settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #222222

按照下面的設定輸入一些文字——看起來就像是Tweet：

• 字型： Arial
• 字型大小： 15px
• 字型樣式： Regular
• 消除鋸齒樣式：平滑
• 顏色： #222222

 

To align the text well, while having the text layer and the green bar layer selected, click on Align vertical centers.

為了完美的對齊文字，當文字圖層和綠色條圖層選中的時候，點選垂直居中對齊（點選：圖層 > 對齊 > 垂直居中）

 

Step 30

Repeat step 27 to create something like in the image below. Also create a rectangle, fill it with #334814 and reduce its layer Opacity to 40%.

步驟30

重複步驟27建立如下的圖形。並建立一個矩形，顏色：#334814，並設定不透明度為40%

先用矩形工具新建一個矩形（701，1213，46，46），然後建立右側的三角陰影（方法有很多，這裡就不列舉了），再新建一個矩形（710，1220，42，44），顏色： #334814，不透明度改為40%，合理的調整圖層順序，效果如下

 

Give the big rectangle some layer styles according to the following image

給大的矩形按照下圖新增圖層樣式

顏色疊加的顏色： #5296b9

 

 

Now fill the skewed rectangle with a darker color of this value: #2a6788

給斜切的矩形（三角形陰影）一個深色的顏色： #2a6788

 

Write “t” letter with these character settings:

• Font Family: Pico-Black
• Font size: 35px
• Font weight: Regular
• Anti-aliasing setting: Smooth
• Color: #2fcfff

And give it a Stroke. use the image below for reference.

按照下面的設定輸入t字母：

• 字型： Pico-Black 
• 字型大小： 35px
• 字型樣式： Regular
• 消除鋸齒樣式：平滑
• 顏色： #2fcfff

然後按照下圖給它新增描邊

 

 

Step 31

Make another copy of the Twitter icon, change the Color Overlay (for the big rectangle) to: #0080ab, and fill the skewed rectangle with this color value: #00526d.

步驟31

建立另一個Twitter圖示的副本，更改顏色疊加的顏色（大矩形）為： #0080ab，填充斜切矩形（三角形陰影）的顏色為： #00526d

 

Write the word “in” with these character settings:

• Font Family: Myriad Pro
• Font size: 35px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #ffffff

按照下面的設定輸入in字母：

• 字型： Myriad Pro
• 字型大小： 35px
• 字型樣式： Bold
• 消除鋸齒樣式：平滑
• 顏色： #ffffff

 

 

Create a third copy of the Twitter or LinkedIn icon, change the Color Overlay (for the big rectangle) to: #395796, and fill the skewed rectangle with this color value: #263e6f.

建立第三個Twitter或LinkedIn 圖示，更改顏色疊加的顏色（大矩形）為： #395796，填充斜切矩形（三角形陰影）的顏色為： #263e6f

 

Write “f” letter with these character settings:

• Font Family: Klavika
• Font size: 35px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: #ffffff

按照下面的設定輸入f字母：

• 字型： Klavika
• 字型大小： 35px
• 字型樣式： Bold
• 消除鋸齒樣式：平滑
• 顏色： #ffffff

 

Make a last copy, change the Color Overlay (for the big rectangle) to: #e8e8e8, and fill the skewed rectangle with this color value: #cdcdcd.

做最後一個副本，更改顏色疊加的顏色（大矩形）為： #e8e8e8，填充斜切矩形（三角形陰影）的顏色為： #cdcdcd

 

Write the word “fr” with these character settings:

• Font Family:Frutiger Black
• Font size: 35px
• Font weight: Bold
• Anti-aliasing setting: Smooth
• Color: f: #0079d2 – r: #ff3093

按照下面的設定輸入fr字母：

• 字型： Frutiger Black
• 字型大小： 35px
• 字型樣式： Bold
• 消除鋸齒樣式：平滑
• 顏色： f的顏色： #0079d2 和 r的顏色： #ff3093

 

Put each of the icons in a separate group, and while selection the four of them click on Distribute left edges

把每一個圖示都歸於一個個分開的組，並且選擇他們只要點選左側的控制按鈕就行了

 

Step 32

Keep it goin’! only the footer left. Create a selection of 1020x460px and fill it with any color for now.

步驟32

繼續！只剩下頁尾部分了。建立一個矩形選區，尺寸：1020px*460px，並用任意色填充

建議：用矩形工具建立一個矩形（0，1340，1020，460），用任意色填充

 

Apply a Gradient Overlay to it. use the image below for reference.

給它按照下圖新增漸變疊加

漸變編輯器的顏色：#202020，#202020，#111111

 

You should have a nice shadow!

你將獲得一個漂亮的投影

 

with the Single Row Marquee Tool (M) create a 1px selection and fill it with white (#ffffff).

用單行選擇工具建立1px的選區，然後用白色填充

建議：用直線工具建立一條白色水平直線（0，1340，1020，1）

 

Step 33

Drag two new horizontal guides according to the following image.

步驟33

按照下圖拖動兩條新的水平參考線（一條在之前的參考線往下50px，另一條再往下50px）

 

Write a title with these character settings:

• Font Family: Rockwell
• Font size: 30px
• Font weight: Regular
• Anti-aliasing setting: Sharp
• Color: #7ea547

 

按照下面的設定新增標題：

• 字型： Rockwell
• 字型大小： 30px
• 字型樣式： Regular
• 消除鋸齒樣式：銳利
• 顏色： #7ea547

 

Write a sub-title with these character settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #d3d3d3

 

按照下面的設定新增子標題文字：

• 字型： Arial
• 字型大小： 15px
• 字型樣式： Regular
• 消除鋸齒樣式：無
• 顏色： #d3d3d3

 

 

Using the Line Tool (U) create two horizontal lines on top of each other, and fill them with these color values: #151515 – #2f2f2f.

用直線工具在建立兩條彼此挨著的水平直線，分別用顏色： #151515（上）和#2f2f2f（下）

 

Step 34

Drag two new horizontal guides according to the following image.

步驟34

按照下圖拖動兩條新的水平參考線（一條在之前的參考線往下25px，另一條再往下230px）

 

With the Rounded Rectangle Tool (U) create two rectangles of 210x25px – 5px radius, fill them with: #141313 and give them an Inner Shadow.

用圓角矩形工具建立兩個圓角矩形（分別是（37，1460）和（37，1496）），尺寸：210px*25px，半徑為5px，顏色： #141313，並按照下圖新增內投影的樣式

 

Write some text inside the two rectangles with these character settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: #7ea547

 

按照下面的設定新增兩個圓角矩形內的文字：

• 字型： Arial
• 字型大小： 15px
• 字型樣式： Regular
• 消除鋸齒樣式：無
• 顏色： #7ea547

 

Create another rectangle like the ones above, but this time its height will be: 110px. Also write some text inside it with the same character settings above. 
Make a copy of the button we’ve created in step 17. and align it like the following image

建立和上面一樣的另一個圓角矩形（37，1533），高度為：110px。並且用同樣的文字設定在裡面新增文字

複製步驟17中建立的按鈕。按照下圖擺放到合適的位置

 

Step 35

Write another title like the one on the left.

步驟35

新增另一個標題，就像左邊一樣

 

Write some text. use the image below for reference.

按照下圖新增一些文字

 

Step 36

Fill the right part with a third title and some text.

步驟36

填充右邊的第三部分的標題和文字

 

Step 37

We’re almost there! drag a new horizontal guide after 50px.

步驟37

我們仍在那！拖動一條新的水平參考線，往下50px

 

Create two horizontal lines on top of each other, and fill them with these color values: #181818 – #2f2f2f.

建立兩條彼此挨著的水平線，並使用這些顏色值：#181818（上）–#2f2f2f（下）。

 

Write some copyright text with these character settings:

• Font Family: Arial
• Font size: 15px
• Font weight: Regular
• Anti-aliasing setting: None
• Color: (#ffffff) – #82aa48

 

按照下面的設定新增版權資訊文字：

• 字型： Arial
• 字型大小： 15px
• 字型樣式： Regular
• 消除鋸齒樣式：無
• 顏色： (#ffffff) – #82aa48

 

 

Conclusion

There we have it! we’ve created a professional-looking web 2.0 layout. As you can see the techniques used here are simple. but they get nice results.

結論

我們擁有它！ 我們建立具有專業外觀的web 2.0佈局。 你可以看到這裡使用的是簡單的的技術。 但是他們得到好的結果。

 

後記：

這是我翻譯的最詳細的一篇教程了，詳細到每一個小步驟，本教程非常適合初學者臨摹學習。

本教程的亮點有兩個

1、特色區域的圖片滑動塊的製作，有種清新透徹的感覺

2、社會媒體圖示的製作，純手工製作，絕無匯入圖片的過程