作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁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. See of torial we'll deal with so many Photoshop techniques. See of torial we'll deal with so many Photoshop techniques. See s.m. 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 files 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 orderuse guides so much, weso view
to view much s.
步驟2
我們需要參考線，我們需要顯示我們的標尺。為此，請點擊：視圖> 標尺
Step 3
We need to set lower borders for the header area, therefore we'll dView a new horizontal guide after 100, we'll dView a new horizontal guide 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:
依照下圖設定矩形的漸層疊加的圖層樣式
依照下圖設定矩形的漸層疊加的圖層樣式
依下圖設定矩形的漸層疊疊的圖層樣式
🎜16020126012601260125，102601260120125，501602012125，變字#131313🎜
Now call this layer: “header_bg”.
命名此圖層為header_bg
title with these settings:
Font Family
: Rockwell (get it from here)
Font size: 30px
- : Won't matter, cause we're gonna give it a Gradient Overlay
-
步驟5
按照下面的設定，用文字工具加入網站的標題字 -
字體大小：
30px
字體樣式：Regular
.變疊加
現在按照下面的設定對你的文字添加漸變疊加
-
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
Font Family
: Arial
Font size
: 20px
Font weight
: Regulare
:
Color: #ffffff
步驟6
依照下面的設定加入導覽文字：
Give it a Stroke and Gradient Overlay according to the following image:依照下圖對圓角矩形設定的描邊和樣式漸層：
描邊的顏色： #9dca5d
-
漸變編輯器的顏色：#528037，#84ac49
Before we move to the next step, just make sadhehe justoool we move to the next step.
在做下一步之前，要確保圖層的組織嚴密（將這些圖層歸併到header群組），這裡是我做的樣子！
Step 7
It's time to create the featured designs area。 步驟7
該創建特色區域了。為了設定邊框，在先前的水平參考線下方的430px處新增一條水平參考線。
Create a selection of 1020x430px as a background for the featured designs area. and fill it with any color.為特色區域增加背景，建立一個1020px*430px*430px的選區。用任意顏色填滿。
建議：用長方形工具新建一個長方形（0，100，1020，430）
Then give it a Gradient Overlay
Then give it a Gradient Overlay
Then give it a Gradient Overlay 
漸變編輯器的顏色：#528037，#84ac49
. 0px, fill it with any color.
現在創建亮釉效果！建立一個選取範圍1020px*120px，用任意顏色填滿。 
建議：用長方形工具新長方形（0，410，1020，120）
dient Overlay.
.And then add a Gradient Overlay.
.And then add a Gradient Overlay.
below
🎜漸變編輯器的顏色： #81aa48，#84ac49🎜🎜🎜🎜🎜 🎜🎜Now reduce this layer opa🎜 🎜🎜Now reduce this layer opag🎜 🎜🎜Now reduce this layer opag🎜 🎜🎜Now reduce this layer opapercity to 40%🎜🎜Now reduce to
Step 8
Let’s add some touches! with the Single Row Marquee Tool create a 1px selection and align it like the follo Marquee Tool create a 1px selection and align it like the folloe！用單行選擇工具建立一個1px的選區，如下對齊
Set your foreground color to #acd86e then click on Shift+Backspace to fill it; make sure to use foreground color as a filling op.景色為#acd86e，然後按Shift+Backspace填滿選取範圍；確保填滿模式是前景色。
建議：用直線工具建立一條直線（0，100，1020，1），顏色： #acd86e。
I guarantee you'll have perfect pixel details
我保證你會有完美的單像素元件
寫 f. names , organize them, and group them together.我們完成背景元素。一定要給他們理想的名稱，組織他們，把他們歸併成一組。
Step 9
Let us be more accurate! drag two new guides according to the following image
-
的步驟！如下圖拖曳兩條參考線（分別在先前的兩條參考線的內側50px處）
-
- Font size
: 40px
- Font weight
: Regular
為了完美的解決此步，用文字工具分別寫出Here's our brand new work.和Oops和Welcome!，然後對Welcome!添加漸變疊加的圖層樣式
： #2f3032，#2f3336
Now drag twowoides holloorizon
Now drag two new holloorizon 
Now drag two new holloorizon
Now drag two new holloorizon對齊，另一條在先前的參考線下方50px處），
透過計算兩條參考線的位置大致是220px和270px
Before we say goodbye to this step, just make sure to organize your text layers.
在和本步驟說拜拜之前，組織你的文字圖層（並歸回步驟 10
Start by creating a selection of 250x150px (fill it with any color), this will be our image holder.Call this layer “pic_holdholder” and 寫 ign
步驟10
建立一個選區，尺寸：250px*150px（任意色填充），這將是我們的圖片區塊
命名此圖層為pic_holder，按照下圖移到合適的位置，並按照下圖移動圖加入描邊
建議：用長方形工具新建一個長方形（100，299），並依照下圖加入描邊的圖層樣式
描邊的顏色：#496d23
描邊的顏色：#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 -click on “pic” layer and choose Create Clipping Mask.
在特色區域添加一張圖片，為此，點擊：檔案> 置入，選擇一個檔案。命名此圖層為pic，確保pic圖層在pic_holder圖層的上方。 右鍵pic圖層，並選擇建立剪貼蒙版
Step 11
To create our shadowStep 11
豐田While having the two duplicated layers selected, go to Edit > Free Transform, and adjust the height to: -100.0%
步驟11
創建圖片層好的兩個圖層選取的時候，點選：編輯> 自由變換，調整高度為-100%
While we're still selecting the two duplicated layers right-click on them to choose Convert 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)層圖版在圖層面板的底部）
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 195000x25 月 190x25px, ft. background .
步驟12
需要為圖片加上一個說明文字。所以我們要創建一個選區，尺寸：240px*25px，用顏色： #1a1919填充，這作為說明文字的背景。
用長方形工具新建一個長方形（105，419）替代此步驟，顏色：#1a1919
Family
Font size: 15px
Font weight: Regular
-
字體： Arial-
字體大小： 15px
顏色： #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. the fWe'wing ollo five Wellso.ive color。 reference
我們在中間添加一個大的圖片，創建一個大的選區，尺寸：340px*200px，按照下圖擺放，用任意顏色填充
給它按照下圖添加一個描邊。
用長方形工具建立一個矩形（340，270），顏色任意。並依照下圖加入描邊樣式，替代此步驟
描邊的顏色： #3d6013
塊
塊 And here's what we've got!這是目前的效果
Make sure to organize your layers and to group them. IersonMake sure to organize your layers and to group them. Ierson, have created ally.層，並合理的歸併為組。我將三張圖片的各個圖層分別歸併為3個組
Step 14
Let's create our sliding button! we'll start by creating an Ellipse of 500) 505050 月） 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
With the Custom Shape Tool (U) create an arrow and give it the following layer styles
用自訂形狀工具建立一個箭頭，並依照下圖加入圖層樣式
內陰影的顏色： #3c3c3c
漸變編輯器顏色： #619145，#8cb352
) toi fo
too p
Step 15
Let's work on the content area. start by creating a selection of 1020x815px
Click Shift+Backspace to fill your selection
Click Shift+Backspace to fill yourour selection 838585% 接下來要創建內容區域。先建立一個選取範圍，尺寸：1020*815按Click+Backspace用顏色#e8e8e8填滿選取範圍
經後面的步驟測算，此處應該是1020*810
長方形（0，530，1020，810），顏色： #e8e8e8
With the Single Row Marquee Tool (M) create a 1px selection, place the Single Row Marquee Tool (M) create a 1px selection, place placell. #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: Basolloic Set – Pixel Mixer and
Download this Icon set: Basolloic Set – Pixel Mixer and place ofplace the. 我們需要設定內容區域的邊界。我們要在之前的水平參考線之下50px拖曳一個新的水平參考線
下載圖示：Basic Set – Pixel Mixer，並按圖片擺放
bottom of the icon, leave 20px then drag a new one.
在圖示的底部拖曳一條水平的參考線，往下20px再拖曳一條水平參考線
.
settings:
Font Family- : Rockwell
Font size- : 29px
sing setting- : Sharp
Color - : #81aa48
- 按照下面的設定添加頭部文字：
字體：
Rockwell
Font weight
: Regular
Anti-aliasing setting
: None
:535 依照下面的設定加入文字：
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 colors. 該是創建read more按鈕的時候了。用圓角矩形工具建立一個圓角矩形（100，790），尺寸：100px*30px，半徑為5px，用任意顏色填滿-
Give this rectangle some layer styles. use the image below for reference.
按照下圖為這個圓角矩形添加圖層樣式
斜面和浮雕中的高
漸變編輯器的顏色： #66923e，#76a150
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.
用橢圓形尺寸對齊，選擇該圖層和圓角矩形的圖層，然後點選垂直居中對齊（
點選：圖層> 對齊> 垂直居中）
點擊：圖層> 對齊> 垂直居中）
點 Type “+”, fill it with white (#it ffffff) and place it like this
輸入+，用白色顏色填充，按圖片擺放
Write the word “read more” with the following character Fontsettings: Font : Tahoma
Font size
: 12px
-
Font weight: Reg Color
: #ffffff
-
依照下面的設定加入文字read more：
-
字體：
Tahoma
-
字體大小：
12px
- 樣式：
無
顏色： #ffffff
Give it a drop shadow. use the image below for reference給文字投影。依照下圖設定投影，投影的顏色： #7c7c7c
-
Step 18
-
Step 18 號s 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
按圖排列你的直線
an hehemm
!別忘組織你的圖層。就像我一樣。
Step 19
Make three copies of what we’ve created in the previous two steps. and have something like this!
。完成如下圖
Step 20
Let's create our separator.
建立水平分隔符號在先前的水平參考線下方50px處新建一條水平參考線
With the Elliptical Marquee Tool (M) create a selection like the one below.
selection. call this layer “separator_bg”.
如下圖，用橢圓選擇工具建立一個橢圓選取範圍
設定你的前景色為黑色（#000000），然後按Shift+Backspace填滿你的選取範圍。命名此圖層為separator_bg
建議：用橢圓工具建立一個橢圓（30，870，960，10），顏色： #000000
Fil > Gaussian Blur – radius: 3px.
要看起來模糊一點，點擊：濾鏡> 模糊> 高斯模糊，半徑：3px
, Whhse
5 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.
用直線工具創建兩條水平直線和（33 ，960，1）），在剛才的那個分隔符的正上方
填充他們的顏色分別是#b3b3b3和#ffffff，並添加和分隔符同樣的圖層蒙版
Step 21
We'll start working on our lower content area, by dragging a new guide after 50px.
步驟21
現在要創建低位的內容一條新的水平參考線
Add a title with these character settings:
Font，
字體樣式：
Regular
Font weight
: Regular
Color: #505150
按照下面的設定添加文字：
字體：- Arial
字體大小：- 14pxx
字體大小：
- 消除鋸齒樣式：
無
- 顏色：
#505150
-
Drag a new guide after 160p一條水平參考線作為內容區域的底邊
Step 22
Write another title and text using the same character settings we've used in the previous step.
。文字. （如下圖，先要在倒數第二根水平參考線的下方50px處新建一條水平參考線）
Type a quotation mark on your keyboard, with thes Font Family
: Arial
字體樣式： Regular
: Smooth
Color: #81aa48
輸入一些心得或名言引用，按照下面的設定：-
字體大小： 14px
字體樣式： Italic
消除鋸齒樣式：平滑
-
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.確保你的圖層組織分明，這是我的圖層分組 yet another title like the ones on the left (Try writing something that represents the team, for example I've written “Our Team”).
-
在右側書寫和文字一樣的標題和文字一樣的標題
（試著寫點什麼代表團隊，舉例來說，這兒寫Our Team）
-
用矩形工具創建一個90px*90px的矩形（546，1011）創建一個90px*90px的矩形（546，1011）
，顏色任意。命名此圖層為photo1_holder
這將是團隊成員照片的圖片塊。現在請依照下圖為它加上描邊圖層樣式
漸層編輯器的顏色： #4d4d4d，#3b3b3b
🜎 er “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
＠
步驟25
Font Family: Arial
Font size: 14px
Font weight: Regular
- ： Color
: #7ba344
輸入成員的資訊文字，依照下面的設定：-
字體： Arial-
字體大小： 14px
Font weight: Regular S
Color
Font Family: Myriad Pro (get it from here)-
size🜎
-
Anti-aliasing setting
: Smooth
-
Color
: #0081ac
我們創建LinkedIn！依照下面的設定輸入in字母：
字體： Myriad Pro (從這裡取得)
字體大小： 30px
-
字體大小： 消除鋸齒樣式：
平滑
-
顏色：
#0081ac
Facebook!? Typef” ika (get it from here )
Font size
: 30px
-
Font weight
: Bold
: Color: #395796
- Facebook！ ？依照下面的設定輸入f字母：
字體：- Klavika (從這裡取得)
字體大小：- 消除鋸齒樣式：
平滑
顏色： #395796
So obvious the memberwill not
So obvious the memberwill notlook gray nen not's not falk notlnonot notlook notlnonot not not notl%'n notlook's not fal notlnonot not fal not falo notlat not not notl%'s not fal notlnonot not not not fal notlnoft Make two copies and align them this way
很明顯的，當滑鼠沒有移到成員上方時灰色的
用同樣的方法創建另兩個副本
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 y wellrag woy 死. 7 在開始製作社群媒體區域前，我們需要設定一些邊界，所以我們按照下新動作兩條水平參考線（一條往下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 s. call this layer “tw_bg 」
新建一個長方形
（36，1236），尺寸：70px*45px。依照下圖擺放，並依照下圖新增圖層樣式。命名此圖為tw_bg
漸變編輯器顏色：
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
: -39
Call this layer “effect” and make “tw_bg” layer visible again.
隱藏tw_bg圖層以便更自由的工作
創建另一個矩形，尺寸：10x43px，然後點擊編輯：編輯。按照下面的數字調整工具欄上的參數：
命名此圖層effect並使tw_bg再次可見
Copy layer style from “tw_bg” layer and paste it into the layer “effect”.
複製圖層tw_bg的圖層樣式到圖層effect- ): s
-
Font Family
: Pico-Black (get it from here)
Font size
: 35pxight
Font size
: 35px 
Anti-aliasing setting
: Smooth
Color- : Won't matter cause we're gonna add a Gradient Overlay
Also give it some 1按照下面的設定輸入t字母：
字體： Pico-Black (從這裡獲得)
字體大小： 35px
字體大小： 35px
- 字體大小：
35px
字體大小：- 35px
字體大小： 35px
字體大小：
35px
字體大小：
消除鋸齒樣式：
平滑
顏色：
不必關心，因為我們要添加漸變疊加
然後按照下圖設定圖層樣式。
外發光的顏色： #83ab48
漸層編輯
Step 28
Repeat step 20 to create another separator or even copy it. then place it this way:
步驟28
重複步驟20建立另一個分隔符號甚至複製一份。然後移到下圖位置：
這裡重複一下步驟，用橢圓工具新建一個橢圓，並添加高斯模糊，半徑為3px，調整合適的位置和大小
to cut theWe need 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 tanglegle, set toour for resground, 片語 (rectanglee, 片語 for詩. #000000) then click Shift+Backspace to fill it.
我們需要切除矩形的右半部分，嗯！ ？為此選擇tw_bg圖層並點擊添加圖層蒙版新建一個選區在矩形的右側（我們要切除的部分），設定你的前景色為黑色（#000000），然後按Shift+Backspace去填充它
-
Step 29
-
🜥
步驟er settings:
-
Font Family
: Arial
-
Font size
: 15px
bar layer selected, click on Align vertical centers.
為了完美的對齊文字，當文字圖層和綠色條圖層選取的時候，點選垂直居中對齊（
點選：圖層> 對齊> 垂直居中）
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%.
。並建立一個矩形，顏色：#334814，並設定不透明度為40%
先用矩形工具新建一個矩形（701，1213，46，46），然後建立右側的三角陰影（方法有很多，這裡就不列舉了），再新建一個長方形（710，1220，42，44），顏色： #334814，不透明度改為40%，合理的調整圖層順序，效果如下
the big rectangle some layer styles according to the following image給大的長方形按照下圖加入圖層樣式
Now fill the skewed rectangle with a darker color of this value: #2a6788
給斜切的矩形（三角形陰影）
一個深色的顏色： #2a6788
these character settings:
Font Family: Pico-Black
Font size: 35px
Anti-aliasing setting: Smooth
Color
: #2fcfff
And give it a Stroke. use the image below for reference.
-
字體大小：
35px
-
字體樣式：
Regular
-
消除鋸齒樣式
然後按照下圖為它添加描邊
-
Step 31
Make another copy of the Twitter icon, change the Color Overlay (for the big rectangle) to: #0080ab, fill the Color Overlay (for the big rectangle) to: #0080ab, fill the Color Overlay (for the big rectangle) to: #0080ab, fill the Color Overlay (for the big rectangle) to: #0080ab, fid the Color Overlay (for the big rectangle) to: #0080ab, fid the Color Over
步驟31
建立另一個Twitter圖示的副本，更改顏色疊加的顏色（大矩形）為： #0080ab，填入斜切矩形（三角形陰影）的顏色為： #00526d
的顏色為： #00526d
-
Write the word “in” with these character settings:-
Font Family : Myriad Pro
-
Anti- aliasing setting : Smooth-
Color : #ffffff依照下面的設定輸入in字母：
- 35px
字體樣式：- Bold
消除鋸齒樣式：
平滑
third copy of the Twitter 或 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:
字體大小：
35px
Font size: 35px
Font weight: B
Color
: f: #0079d2 – r: #ff3093
按照下面的設定輸入fr字母：
-
字體：
Frutiger Black
字體樣式： Bold
消除鋸齒樣式：平滑
顏色： fff
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.🜎只剩下頁腳部分了。建立一個矩形選取範圍，尺寸：1020px*460px，並用任意色填滿
建議：用矩形工具建立一個矩形（0，1340，1020，460），用任意
Gradient Overlay to it. use the image below for reference.
給它按照下圖添加漸變疊加
漸變編輯器的顏色：#202020，#202020，
漸變編輯器的顏色：#202020，#202020，#11111 ould have a nice shadow!你將獲得一個漂亮的投影
with the Single Row Marquee Tool (M) create a 1px selection and fill ffffit with whiteffool (M) 如何選擇單行工具f建立1px的選區，然後用白色填滿
建議：用直線工具建立一條白色水平直線（0，1340，1020，1）
ides according to the following image.
步驟33
按照下圖拖曳兩條新的水平參考線（一條在之前的參考線往下50px，另一條
Write a title with these character settings:
Font Family: Rockwell
Font size: 330p7pwe
Anti-aliasing setting: Sharp
- Color
: #7ea547
-
依照下面的設定加標題：
px
-
字體樣式：
Regular
-
消除鋸齒樣式：
銳利
-
顏色：
#7ea547
er settings:
Font Family : Arial
Font size: 15px
Font weight: Regular
: #d3d3d3
按照下面的設定新增子標題文字：
字體： Arial
Step 34
Step 34
.
步驟34
按照下圖拖曳兩條新的水平參考線（一條在之前的參考線往下25px，另一條再往下230px）
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，並依照下圖新增內投影的樣式
side tf character settings:
Font Family: Arial
Font size: 15px
Font size
顏色： #7ea547-
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 image
（37，1533） ，高度為：110px。並且用同樣的文字設定在裡面加入文字複製步驟17中所建立的按鈕。依照下圖擺放到適當的位置
-
Step 35
- Write another title like the one on the left.
步驟35
再加上另一個標題，就像左邊一樣
Write some text.
Step 36
Fill the right part with a third title and some text.
步驟36填充右邊的第三部分的標題和文字
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 – #181218 – #1812182f32f著的水平線，並使用這些顏色值：#181818（上）–#2f2f2f（下）。
Write some copyright text with these character settings:
Font 
Font weight: Regular
Anti-aliasing setting
: None
Color- : (#ffffff) – #82aa48
- 文字
文字文字
字體大小： 15px
字體樣式： Regular
消除鋸齒樣式：無ff
消除鋸齒樣式：無ff
- Conclusion
There we have it! we've created a professional-looking web 2.0 layout. As you can see the getniques see the getere smpleee the getn smple.
結論 我們擁有它！ 我們創建具有專業外觀的web 2.0佈局。 你可以看到這裡使用的是簡單的的技術。 但是他們得到好的結果。
-
後記：
這是我翻譯的最詳細的一篇教程了，詳細到每一個小步驟，本教程非常適合初學者臨摹學習。
- 本教學的亮點有兩個
1、特色區域的圖片滑動塊的製作，有種清新透徹的感覺
2、社交媒體圖標的製作，純手工製作，絕無導入圖片的過程
更多PS網頁設計教學XII－在PS中建立專業的web2.0的網頁版面相關文章請關注PHP中文網！
