作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁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圖層，並選擇建立剪貼蒙版