PS網頁設計教程XII——在PS中創建專業的web2.0的網頁布局

本文轉載自查看原文 2012-09-05 19:51 6853 PS網頁設計

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

本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。

約定：

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

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

3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數

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

例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定

4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。

In this Photoshop tutorial we’re going to learn how to create a web 2.0 layout, As we go through the tutorial we’ll deal with so many Photoshop techniques. Seems kind of long? that’s because it’s very detailed. I assure you’ll find easy to follow and to get done, just give it a try!

在本PS教程中，我們將學習如何創建web 2.0的布局，隨着我們通過本教程我們會學習很多PS技巧。似乎太長了嗎？這是因為它非常詳細。我保證你照着做會發現很容易，試試看！

Step 1

To keep everything aligned we’re going to use 960s Grid System (Get it from here) once downloaded open up the file “960_grid_24_col.psd”.
We’ll start by creating layer from background, right-click on the layer “Background”, then choose Layer From Background. and call it “bg”.

步驟1

為了對齊元素，我們打算用960s Grid System（從這獲得），下載后打開960_grid_24_col.psd文件

一開始從背景創建圖層，在Background上右鍵，選擇背景圖層，命名為bg

由於本翻譯不使用960s Grid System，故本步改為新建文檔，尺寸：1020px*1800px

Step 2

As we’ll use guides so much, we need to view our Rulers. In order to do that go to View > Rulers.

步驟2

我們需要參考線，我們需要顯示我們的標尺。為此，點擊：視圖 > 標尺

Step 3

We need to set lower borders for the header area, therefore we’ll drag a new horizontal guide after 100px. go to View > New Guide, Position: 100.

步驟3

我們需要設定頭部區域的邊框，為此在100px的位置拖動一條水平的參考線。點擊：視圖 > 新建參考線，位置：100

Step 4

Let’s create our header. we’ll start by creating a selection of 1020x100px. then click Shift+Backspace to fill it (with any color just for now).

步驟4

現在創建頭部區域。我們首先創建一個1020px*100px的選區。然后按Shift+Backspace填充（用當前的前景色填充）

建議：不太常見的做法，一般用矩形工具創建一個矩形（0，0，1020，100），區別是矩形工具會新建一個圖層

Give it a Gradient Overlay according to the following image:

按照下圖設置矩形的漸變疊加的圖層樣式

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

Now call this layer: “header_bg”.

命名此圖層為header_bg

Step 5

Write your Web site title with these settings:

Font Family: Rockwell (get it from here)
Font size: 30px
Font weight: Regular
Anti-aliasing setting: Smooth
Color: Won’t matter, cause we’re gonna give it a Gradient Overlay

步驟5

按照下面的設置，用文字工具添加網站的標題

字體：Rockwell
字體大小：30px
字體樣式：Regular
消除鋸齒方式：平滑
Color: 不需設置，因為我們要添加漸變疊加

Now add a Gradient Overlay to your text with the following settings:

現在按照下面的設置對你的文字添加漸變疊加

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

To align your Web site title with the header background; Select your title layer and “header_bg” layer then click on Align vertical centers.

為了對齊網站的標題在頭部的背景，選擇你的標題圖層和header_bg圖層，然后點擊垂直居中對齊（點擊：圖層 > 對齊 > 垂直居中）

Step 6

Write your navigation text with these settings:

Font Family: Arial
Font size: 20px
Font weight: Regular
Anti-aliasing setting: Smooth
Color: #ffffff

步驟6

按照下面的設置添加導航文字：

字體： Arial
字體大小： 20px
字體樣式： Regular
消除鋸齒樣式：平滑
顏色： #ffffff

Create a rounded rectangle which will represent a hovered link. it should be about 65x35px size – 5px radius, (fill it with any color for now).

對懸停的鏈接添加一個圓角矩形（551，33）。尺寸：65px*35px，半徑5px，（填充任意顏色）

Give it a Stroke and Gradient Overlay according to the following image:

按照下圖對圓角矩形設置描邊和漸變疊加的圖層樣式：

描邊的顏色： #9dca5d

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

Before we move to the next step, just make sure to keep your layers well-organized, Here’s how mine looks!

在做下一步之前，要確保圖層的組織嚴密（將這些圖層歸並到header組），這里是我做的樣子！

Step 7

It’s time to create the featured designs area. we’ll start by setting our lower borders by adding a new horizontal guide after 430px.

步驟7

該創建特色區域了。為了設置邊框，在之前的水平參考線下方的430px處添加一條水平參考線。

Create a selection of 1020x430px as a background for the featured designs area. and fill it with any color.

給特色區域添加背景，創建一個1020px*430px的選區。用任意顏色填充。

建議：用矩形工具新建一個矩形（0，100，1020，430）

Then give it a Gradient Overlay with the following settings:

然后按照下圖設置漸變疊加：

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

Now let’s create the glaze effect! create a selection of 1020x120px, fill it with any color.

現在創建亮釉效果！創建一個選區1020px*120px，用任意顏色填充。

建議：用矩形工具新建矩形（0，410，1020，120）

And then add a Gradient Overlay. use the image below for reference.

然后按照下圖設置漸變疊加

漸變編輯器的顏色： #81aa48，#84ac49

Now reduce this layer opacity to 40%

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

Step 8

Let’s add some touches! with the Single Row Marquee Tool create a 1px selection and align it like the following:

現在添加一些潤色！用單行選擇工具創建一個1px的選區，如下對齊

Set your foreground color to #acd86e then click on Shift+Backspace to fill it; make sure to use foreground color as a filling option.

設置你的前景色為#acd86e，然后按Shift+Backspace填充選區；確保填充模式是前景色。

建議：用直線工具創建一條直線（0，100，1020，1），顏色： #acd86e。

I guarantee you’ll have perfect pixel details

我保證你會有完美的單像素元件

We’re done creating the background elements. so make sure to give them ideal names, organize them, and group them together.

我們完成背景元素。一定要給他們理想的名稱，組織他們，把他們歸並到一組。

Step 9

Let us be more accurate! drag two new guides according to the following image

步驟9

為了更精確的定位！如下圖拖動兩條參考線（分別在之前的兩條參考線的內側50px處）

Write some welcoming words with these settings:

Font Family: Rockwell
Font size: 40px
Font weight: Regular
Anti-aliasing setting: Sharp
Color: #f4f4f4

按照下面的設置添加歡迎文字：

字體： Rockwell
字體大小： 40px
字體樣式： Regular
消除鋸齒樣式：銳利
顏色： #f4f4f4

I personally have written: “Here’s our brand new work. Oops Welcome!” ;) but we need to emphasize the word “Welcome!” in somehow. so basically we’ll give it a Gradient Overlay. follow up with the image

我們寫好：Here’s our brand new work. Oops Welcome!。;)。但我們需要以某種方式強調Welcome一詞。因此，我們會按照下圖給它添加漸變疊加。

為了完美的解決此步，用文字工具分別寫出Here’s our brand new work.和Oops和Welcome!，然后對Welcome!添加漸變疊加的圖層樣式

漸變編輯器的顏色： #2f3032，#2f3336

Now drag two new horizontal guides according to the following image

現在按照下圖拖動兩條新的水平參考線（一條和文字的底部對齊，另一條在之前的參考線下方50px處），通過計算兩條參考線的位置大致是220px和270px

Before we say goodbye to this step, just make sure to organize your text layers.

在和本步驟說拜拜之前，組織你的文字圖層（歸並到一組）

Step 10

Start by creating a selection of 250x150px (fill it with any color), this will be our image holder.

Call this layer “pic_holder” and try aligning it like the image above.And give it a Stroke

步驟10

創建一個選區，尺寸：250px*150px（任意色填充），這將是我們的圖片塊

命名此圖層為pic_holder，按照下圖移到合適的位置，並按照下圖添加描邊

建議：用矩形工具新建一個矩形（100，299），並按照下圖添加描邊的圖層樣式

描邊的顏色：#496d23

Let’s add an image of a featured design, to do so go to File > Place and select an image. call its layer “pic”, and make sure to put it right above the layer “pic_holder”.

Right-click on “pic” layer and choose Create Clipping Mask.

在特色區域添加一個圖片，為此，點擊：文件 > 置入，選擇一個文件。命名此圖層為pic，確保pic圖層在pic_holder圖層的上方。

右鍵pic圖層，並選擇創建剪貼蒙版

Step 11

To create our shadow, we’ll start by duplicating the two layers “pic” and “pic_holder”.

While having the two duplicated layers selected, go to Edit > Free Transform, and adjust the height to: -100.0%

步驟11

創建圖片陰影，我們首先復制pic和pic_holder兩個圖層

當復制好的兩個圖層選中的時候，點擊：編輯 > 自由變換，調整高度為-100%

While we’re still selecting the two duplicated layers right-click on them and choose Convert to Smart Object; call this layer “shadow”. and make sure to place it at the bottom.

在復制的兩個圖層上右鍵選擇轉換為智能對象，命名為shadow。然后移動圖層到原圖片的下方

Select “shadow” layer then click on Add layer mask (at the bottom of the layers panel)

選擇shadow圖層然后點擊添加圖層蒙版（在圖層面板的底部）

Choose the Gradient Tool (G) and with a black, white linear gradient drag from down to top.

選擇漸變工具，選擇黑-白線性漸變，從下往上拖動（下圖中紅線所示，從下往上拖動）

You should have something like this!

效果如下：

Step 12

We need to add a description to our image. so we’ll create a selection of 240x25px, and fill it with this color value: #1a1919, This will work as the description background.

步驟12

需要給圖片添加一個說明文字。所以我們要創建一個選區，尺寸：240px*25px，用顏色： #1a1919填充，這作為說明文字的背景。

用矩形工具新建一個矩形（105，419）替代本步驟，顏色： #1a1919

Write some description with these character settings:

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

按照下面的設置添加說明文字：

字體： Arial
字體大小： 15px
字體樣式： Regular
消除鋸齒樣式：無
顏色： #82aa48

Make sure to keep your document tidy!

請務必保持您的文檔整潔！

Step 13

Make another copy of the featured design image and align it to the right.

步驟13

在特色區域的右側重復的添加另一張圖片

We’ll make the center image a bit bigger, so make a selection of 340x200px, align it like the following, and fill it with any color.

We’ll also give it a Stroke. use the following image for reference

我們在中間添加一個大的圖片，創建一個大的選區，尺寸：340px*200px，按照下圖擺放，用任意顏色填充

給它按照下圖添加一個描邊。

用矩形工具創建一個矩形（340，270），顏色任意。並按照下圖添加描邊樣式，替代本步驟

描邊的顏色： #3d6013

給當中的圖片塊添加圖片和陰影

And here’s what we’ve got!

這是目前的效果

Make sure to organize your layers and to group them. I personally have created three separate groups. here’s how they look

組織你的圖層，並合理的歸並為組。我把三張圖片的各個圖層分別歸並為3個組

Step 14

Let’s create our sliding button! we’ll start by creating an Ellipse of 50x50px using the Elliptical Marquee Tool (M), and filling it with any color.

Now give it some layer styles according to the following image

步驟14

要創建滑動按鈕！用橢圓選擇工具創建一個橢圓選區，尺寸：50px*50px，用任意色填充

直接用橢圓工具創建一個橢圓（28，220），尺寸：50px*50px，顏色任意。

按照下圖給該圖層添加圖層樣式

描邊的顏色： #6f9941

漸變編輯器的顏色： #ffffff，#f3f3f3

With the Custom Shape Tool (U) create an arrow and give it the following layer styles

用自定義形狀工具創建一個箭頭，並按照下圖添加圖層樣式

內陰影的顏色： #3c3c3c

漸變編輯器顏色： #619145，#8cb352

Make another copy of the arrow and align it to the right

在右邊復制一個箭頭

Step 15

Let’s work on the content area. start by creating a selection of 1020x815px

Click Shift+Backspace to fill your selection with this color: #e8e8e8

步驟15

接下來要創建內容區域。首先創建一個選區，尺寸：1020*815

按Click+Backspace用顏色#e8e8e8填充選區

經后面的步驟測算，此處應該是1020*810

建議：直接用矩形工具創建一個矩形（0，530，1020，810），顏色： #e8e8e8

With the Single Row Marquee Tool (M) create a 1px selection, place it like the following image, and fill it with white (#ffffff).

Now you’re having perfect pixel details!

用單行選擇工具創建一個1px的選區，按照下圖擺放，用白色填充

現在你獲得完美的單像素元件

建議：用直線工具畫一條水平直線（0，530，1020，1）比較簡單，顏色： #ffffff

Step 16

We need to set upper borders to our content area. therefore we’re going to drag a new horizontal guide after 50px.
Download this Icon set: Basic Set – Pixel Mixer and place of them like the following.

步驟16

我們需要設置內容區域的邊界。我們要在之前的水平參考線之下50px拖動一個新的水平參考線

下載圖標：Basic Set – Pixel Mixer，並按下圖擺放

Drag a new horizontal guide at the bottom of the icon, leave 20px then drag a new one.

在圖標的底部拖動一條水平的參考線，往下20px再拖動一條水平參考線

Now Write some heading with these settings:

Font Family: Rockwell
Font size: 29px
Font weight: Regular
Anti-aliasing setting: Sharp
Color: #81aa48

按照下面的設置添加頭部文字：

字體： Rockwell
字體大小： 29px
字體樣式： Regular
消除鋸齒樣式：銳利
顏色： #81aa48

Drag yet another two guides according to the following image

按照下圖拖動另兩條新的水平參考線（一條在文字的底部，一條再往下20px）

Write some text with these settings:

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

按照下面的設置添加文字：

字體： Arial
字體大小： 15px
字體樣式： Regular
消除鋸齒樣式：無
顏色： #2f3235

Drag more three guides according to the following image

按照下圖拖動3條水平參考線（一條在文字的底部，一條往下20px，一條再往下30px）

Step 17

It’s time to create our “read more” button. With the Rounded Rectangle Tool (U) create a rectangle of 100x30px and 5px radius. and fill it with any color just for now.

步驟17

該是創建read more按鈕的時候了。用圓角矩形工具創建一個圓角矩形（100，790），尺寸：100px*30px，半徑為5px，用任意顏色填充

Give this rectangle some layer styles. use the image below for reference.

按照下圖給這個圓角矩形添加圖層樣式

斜面和浮雕中的高光模式的顏色： #7da841

漸變編輯器的顏色： #66923e，#76a150

With the Ellipse Tool (U) create an ellipse of 15x15px and fill it with this color value: #4d4d4d.
To align it correctly select its layer and the rectangle’s layer then click Align vertical centers while having both layers selected.

用橢圓工具創建一個橢圓，尺寸：15px*15px，顏色： #4d4d4d

為了精確的對齊，選擇該圖層和圓角矩形的圖層，然后點擊垂直居中對齊（點擊：圖層 > 對齊 > 垂直居中）

Type “+”, fill it with white (#ffffff) and place it like this

輸入+，用白色顏色填充，按下圖擺放

Write the word “read more” with the following character settings:

Font Family: Tahoma
Font size: 12px
Font weight: Regular
Anti-aliasing setting: None
Color: #ffffff

按照下面的設置添加文字read more：

字體： Tahoma
字體大小： 12px
字體樣式： Regular
消除鋸齒樣式：無
顏色： #ffffff

Give it a drop shadow. use the image below for reference

給文字添加投影。按照下圖設置投影，投影的顏色： #7c7c7c

Step 18

To create a vertical separating line, With the Line Tool (U) create two vertical lines next to each. and fill them with these values: #ffffff – #b3b3b3.

步驟18

創建豎直分割線，用直線工具創建兩條緊挨着的豎直直線（（270，600，1，200）和（271，600，1，200））。顏色分別是：#ffffff和#b3b3b3

Align your line like the following image

按下圖排列你的直線

Don’t forget to organize your layers. take a look at mine!

別忘組織你的圖層。就像我一樣。

Step 19

Make three copies of what we’ve created in the previous two steps. and have something like this!

步驟19

復制上面兩個步驟的3次。完成如下圖

Step 20

Let’s create our separator.
Drag a new horizontal guide after 50px

步驟20

創建水平分隔符

在之前的水平參考線下方50px處新建一條水平參考線

With the Elliptical Marquee Tool (M) create a selection like the one below.

Set your foreground color to black (#000000) then click Shift+Backspace to fill your selection. call this layer “separator_bg”.

如下圖，用橢圓選擇工具創建一個橢圓選區

設置你的前景色為黑色（#000000），然后按Shift+Backspace填充你的選區。命名此圖層為separator_bg

建議：用橢圓工具創建一個橢圓（30，870，960，10），顏色： #000000

To make it looks blurry, go to Filter > Blur > Gaussian Blur – radius: 3px.

要看起來模糊一點，點擊：濾鏡 > 模糊 > 高斯模糊，半徑：3px

While selecting “separator_bg” layer selected, create a selection like the one below then hit delete.

當separator_bg層被選中的時候，按下圖創建一個選區，並按delete。按Ctrl+D取消選區

Click on Add layer mask icon. and set your gradient editor to black, white, black.

點擊添加圖層蒙板圖標。並設置你的漸變編輯器為：黑-白-黑

With the Gradient Tool (G) drag with a linear gradient according to the following image.

按照下圖用漸變工具拖動一個線性漸變（從右向左水平拖動，拖動的時候按Shift）

Reduce the layer Opacity to 50%

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

With the Line Tool (U) create two horizontal lines on top of each other and place them right above the separator.
Fill them with #b3b3b3 – #ffffff and add the same layer mask to them.

用直線工具創建兩條水平直線（（30，868，960，1）和（30，869，960，1）），在剛才的那個分隔符的正上方

填充他們的顏色分別是#b3b3b3和#ffffff，並添加和分隔符同樣的圖層蒙版

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中創建的按鈕。按照下圖擺放到合適的位置