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

約定：

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

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

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

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

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

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

Step 1 : Mockup

步驟1：樣板

Before we start designing, we need to plan out the requirements, looks and the functionality. Then we need to fit these ideas into a layout to execute them visually. Mockups and wire frames are greatly useful to create layouts with lot of flexibility. It is a best practice and highly encouraged in the Industry.

在開始設計之前，我們需要規劃需求，外觀和功能。然后，我們需要按照這些想法直觀地執行它們以完成布局。樣機和線框是非常有用的且具有很大靈活性的創建布局。這是一個行業中最佳實踐和高度鼓勵的事。

I put the below one together using only grey tones. That way we eliminate color from the scene at this point. So that we can concentrate on the layout as a whole and avoid messing up with colors. That gives much freedom to quickly alter and rearrange things. A mockup can be as detailed as you want. For this purpose I am going with the below one. Just briefly defining the layout and what goes where.

我把下圖擺放出來，只使用灰色色調。這樣，我們從場景在這一點上消除色彩。所以，我們可以專注于作為一個整體的布局和避免搞亂顏色。這給了我們很大的自由度，能夠快速改變和重新安排的事情。只要你想�？梢宰鲆粋�更加詳細的樣板。為了這個目的，我擺放了下面的這個。只是簡單定義的布局和我們需要做的。

Step 2 : Set up the Canvas

步驟2：設置畫布

So we have a blue print for our layout. Let’s actually put the design together! We are going to create a 960 pixel wide layout. Create a new document at 1200 x 1500.

因為我們有布局藍圖。讓我們真正依照藍圖設計！我們將創建一個960像素寬的布局。創建一個新的文件，在1200×1500。

This is a 960 pixel wide layout, so we need define the work area by adding guidelines. Press Ctrl+A to select the entire document.

這是一個寬960像素的網頁布局，所以我們需要通過添加參考線來定義工作區域。按Ctrl+A選擇整個文檔

Go to Select > Transform Selection. Shrink the selection down to 960 pixels wide. That is the work area of the layout.

點擊：選擇 > 變換選區。向內收縮至960像素寬。這就是網頁布局的工作區域。

Add guide lines to the selection.

按照選區添加參考線

We need to create some padding between the border and the content that we will add later! With the selection active again choose Transform Selection. Resize the selection to 920 pixels wide. That means 20 pixels of padding each side totaling 40 pixels of padding.

我們需要在邊和之后添加的內容之間創建一些留白，再次激活選區選擇變換選區。調整選區到920像素寬。這意味著每邊有20像素一共有40像素的留白。

Add guides to the selection.

按照選區添加參考線

Step 3 : Create the Header

步驟3：創建頭部區域

Let’s create the header of the layout! Make a selection that is 465 pixels in height.

讓我們創建網頁布局的頭部區域。新建一個高465像素的選區。

Fill the selection with a gray value first and later use the Layer Styles to add colors and gradients. Follow this throughout the design to maintain a visual hierarchy.

首先用灰色填充選區，之后會用圖層樣式添加顏色和簡便。這會貫穿整個設計，保持視覺上的層次。

Add Gradient to the header. Double click on the layer thumbnail. Select Gradient Overlay. Create the below 2 color gradient. Use the settings.

給頭部區域添加漸變。雙擊圖層縮略圖。選擇漸變疊加。創建下面2個顏色（#0f201c和#002931）的漸變，并按照下圖設置。

It should look like this.

看起來就像下圖所示

Next need to add a highlight to the header. Create a new layer by pressing Ctrl+Alt+Shift+N. Pick a soft brush with a diameter of 600px. Pick #19535a for brush color. Just click once on the center of the header.

接下來需要在頭部區域添加一個高光。按Ctrl+Alt+Shift+N新建一個圖層。選取一個大小為600px的軟刷。設置軟刷的顏色為 #19535a。在頭部區域的當中點擊一次

Make a selection from the top that is 110 pixels in height.

在頂部創建一個高110px的選區

Hit Delete key to delete the selected portion. That looks like below.

按Delete鍵刪除選擇的部分�？雌饋砣缦滤�示

Shrink it vertically by pressing Ctrl+T.

通過按Ctrl+ T垂直收縮。可能由于版本的原因（或者是操作原因），按Ctrl+T后，區域和原圖不一樣，要先把中心點移到110px處，然后按住Alt鍵，拖動底邊垂直收縮

We need to make sure that the highlight spot is perfectly centered to the header. Select layers, header and highlight and press “V” to switch to Move Tool. On the Options Panel select Align Horizontal Centers button.

我們要保證高亮在頭部區域的中間。選擇層，頭部區域和高亮，按V鍵切換到移動工具。在選項面板中選擇水平居中對齊按鈕。

Create a new layer, draw a one pixel highlight line using the Pencil Tool with color #01bfd2.

新建圖層，用鉛筆工具畫一個像素寬的亮直線，顏色： #01bfd2。用直線工具畫一條直線比較方便

Hide the edges smoothly using a gradient mask. Pick the Gradient Tool, create the below gradient in the Options Panel.

使用漸變遮罩使邊緣平穩地消失。選擇漸變工具，在選項面板中創建下面的漸變。

Apply the above gradient.

應用上述的漸變。

如果是用直線工具畫線，先添加蒙版，再添加漸變工具

添加漸變的位置在左右外側參考線之間

Step 4 : Create Texture Pattern

步驟4：創建紋理圖案

Now create a simple checker pattern and apply to the header. Pick the Pencil Tool, set the brush size to 2 pixels and add two dots that are touching each others corners. Turn off the background and select the dots. Choose Edit > Define Pattern.

現在創建一個簡單的棋盤格圖案，適用于頭部區域。選擇鉛筆工具，設置畫筆大小為2個像素，并增加兩個點，觸及每個角落。關閉的背景并選擇點。點擊：編輯 > 定義圖案。

更加合適的做法是，新建4px*4px的文檔，背景透明。用鉛筆工具創建如下的圖案。點擊：編輯 > 定義圖案，然后關閉該新建文檔

Create a new layer and place it below the highlight layer. Select the area we want to apply the pattern. Press Shift+F5 to load the Fill dialogue box. Choose the pattern that is just created. And OK.

新建圖層并擺放到高亮圖層的下方。選擇我們要添加圖案的區域。按Shift+F5打開填充對話框。選擇之前創建的圖案。并按確定

The selection is filled with the pattern. Take a closer look.

選區會被圖案填充。來看個仔細

Blend the pattern smoothly into the header. Add a Layer Mask to the pattern layer. Pick a soft brush and paint with a large soft brush. Pick #ffffff for brush color. Reduce the brush Opacity to about 60% and paint. If you find it too strong then adjust the layer opacity inpidually.

要讓圖案在頭部區域更光滑的揉合起來。給圖案層添加圖層蒙版。選擇一個柔軟的畫筆和用大軟刷噴涂。設置畫筆顏色為#ffffff。畫筆的不透明度降低到約60%并噴涂。如果你覺得它太強烈，可以單獨調整圖層的不透明度。

Nicely blended.

很好的揉合效果。

Step 5 : Adding the Logotype

步驟5：添加文字LOGO

The background is pretty much completed. Now add the logo type. Before adding the type add a highlight that stays behind the logo. Pick a soft brush with #19535a. Add a spot.

背景完成得很完美。現在，添加文字LOGO。在添加文字前先在LOGO的后面添加一個高亮點。選擇柔軟的刷子，顏色： #19535a。添加一個點。

Add the Type. The font face I used is “Bebas”. Download it for free.

添加文字。我用的字體是Bebas。在這里免費下載

Apply subtle effects to the logo.

給LOGO添加細微的效果

漸變編輯器的顏色： #c9c0bb和#ffffff

Step 6 : Navigation

步驟6：導航欄

Add the navigation links.

添加導航欄鏈接

文字的顏色，Home的顏色： #00ffff，其余文字的顏色： #1eafb5

Create the navigation button. Use Rectangular Marquee Tool. Fill any color. Then Lower the Fill Opacity to zero.

創建導航欄按鈕。用矩形選框工具創建矩形選區（615，40，67，40）。填充任意顏色。然后將填充改為0

Double click on the layer thumbnail, select Gradient Overlay. Use these settings.

雙擊圖層縮略圖，選擇漸變疊加。按照下圖進行設置

漸變編輯器的顏色： #066685和#19c2c8，左側的不透明度為50%

Step 7 : Content Slider

步驟7：內容區域的滑動欄

Make selection that is 580 x 295 pixels. Fill the selection with a grey tone. Bring in the image you want to use. Clip it to the base layer we created above.

創建一個580*295的選區。用灰色填充選區。置入你想使用的圖片。以上面圖層為范圍進行剪切。

更合適的做法是用矩形工具創建一個矩形（4810，137，580，297），置入圖片在矩形的上方，在圖片圖層上右鍵選擇創建剪貼蒙版

Now add shadow effect to the slider. Create a new layer. Select the Brush Tool, set the diameter to 400 pixels. Open the Brushes palette, decrease the roundness. Use the below settings.

現在給滑動塊添加陰影效果。新建圖層。選擇畫筆工具，設置直徑為400像素。打開畫筆面板，減少圓度。使用下面的設置。

Set the brush color to #000000 and add spot.

設置畫筆的顏色為#000000，并添加一個點

Apply some Gaussian Blur to soften the edges.

給它添加高斯模糊以柔化邊緣

Select the bottom half of the shadow and delete it.

選擇陰影的下半部并刪除它

Reposition the shadow just above the slider.

移動陰影到圖片滑動欄的上方

I shrunk it vertically. Next align it centered to the slider. Select both layers and on the Options Panel click on the Align Horizontal Centers button.

我垂直縮小一下。接下來中心對齊滑動欄。選取兩個層，在選項面板上單擊“水平居中對齊”按鈕。實際上把陰影的寬度和左位置改成和圖片的一樣。

Duplicate the shadow and rotate it vertically. Place it on the bottom edge of the slider.

復制陰影圖層并垂直翻轉一下。把它擺放到滑動欄的底邊

Create slider control buttons using Rectangular Marqee Tool. Fill #000000.

用矩形選框工具創建滑動欄的控制按鈕（480，260，39，52）和（1021，260，39，52）。填充#000000

Lower the buttons Opacity to 50%

設置按鈕的不透明度為50%

Open the auto shapes from the Options Panel and select this arrow. Add it to the buttons.

打開選項面板上自定義形狀窗口選擇下面的箭頭。把它添加到按鈕上

Add a strip. Fill with #000000.

在底部添加條形（480，355，580，79）。用#000000填充

Lower the Opacity to 50%.

設置不透明度為50%

Here we can add description about the project.

這里我們添加一些說明文字，顏色： #e0e9cc

Step 8 : Add some Welcome Lines

步驟8：添加一些歡迎的文字

A welcome and some description about the website goes here.

在這兒添加歡迎和網頁的說明文字

第一行文字的字體如下，顏色： #eef0f0

第二行文字的字體如下，顏色： #eef0f0

第三段文字的字體如下，顏色： #1eafb5

給第一行和第二行文字添加如下的圖層樣式

Step 9 : Finishing up the Header

步驟9：完成頭部區域

We almost finished the header. Let’s add a subtle shadow effect to the finish things off! Create a shadow just as we created earlier using the brush tool.

我們幾乎完成了頭部區域。讓我們添加一個微妙的陰影效果來完成頭部區域！就像我們在前面創建使用畫筆工具創建一個陰影。

Leave 1px gap between the header and the shadow.

在頭部區域和陰影之間有1px的間距

Step 10 : Apply Gradient to the Background

步驟10：給背景添加漸變

Create a light grey to white gradient.

創建一個亮灰色到白色的漸變，漸變編輯器的顏色： #cfcfcf和#ffffff

Create a new layer below the header and apply the gradient.

在頭部區域的下方新建圖層并添加之前的漸變，從圖片的中部到白色的部分，圖片部分的高度和白色的高度差不多

Step 11 : Add Slider Rotation Controls

步驟11：添加滑動塊的控制旋鈕

Create rotation controls.

創建控制旋鈕，用橢圓工具創建5個圓（702，483）、（733，483）、（764，483）、（795，483）、（826，483）。大小為13px*13px，顏色： #ababab

Apply Inner Shadow to one control to indicate the current active item in the slider.

給一個控制旋鈕應用內陰影，指示滑動欄當前的活動項目。

Step 12 : Create Content pider

步驟12：創建內容的分割線

Select the Pencil Tool and draw 1 pixel line. Pick light gray (#aaaaaa).

用鉛筆工具畫一條直線（140，511，920，1）。選用亮灰色，#aaaaaa

Hide the edges smoothly using gradient mask.

使用漸變遮罩使邊緣平穩地消失

Step 13 : Adding the Main Content

步驟13：添加主內容

It is time to get into the actual content part. This is a 3 column layout. We need to create 3 equal columns with some padding between them. I did a simple calculation and pided the available space into 3 equal width boxes with 25 pixels padding between them.

現在是時候制作實際的內容部分。這是一個3欄布局。我們需要創建3等寬列和一些空白填充它們之間。我做了一個簡單的計算和把可用空間劃分成3等寬的矩形，并有25像素填充它們之間的空白。灰色的矩形寬290培訓，之間間距25px

Add guide lines to the boxes. Then remove the boxes. And these are the columns.

在矩形的周邊添加參考線。然后刪除這些矩形。這些就是主內容的列

Add some featured services. Drop in the icons from the Function icon set. Maintain distance between objects uniformally.

添加一些功能服務。拖動一些Function icon set的圖標。保持對象之間的統一的間距

標題的字體如下，顏色： #666666

段落文字的字體如下，顏色： #9a9a9a

Let’s create a simple “Read More” button. Select the Rounded Rectangle Tool to draw the shape. Make sure it is a Shape Layer.

讓我們創建簡單的Read More按鈕。選擇圓角矩形工具畫一個圓角矩形（140，752，100，28），半徑20px，確保是形狀圖層

Apply Gradient Overlay and Stroke to the button.

給按鈕添加漸變疊加和描邊

漸變編輯器，顏色： #efefef和#ffffff

描邊的顏色： #cdcdcd

Duplicate the button.

復制按鈕。并給按鈕添加Read More文字，字體如下，顏色： #666666

We will add some recent work items. I drew three image holder boxes and applied 3 pixel stroke .

我們要添加近期列表。我畫了三個矩形（（140，862）、（455，862）、（770，862），尺寸：290*129）并添加了3px的描邊。描邊的顏色： #cbcbcb

Clip the images to the boxes.

在矩形中放置剪切的圖片

I created shadow like we did earlier and placed it below the boxes.

我要創建和之前一樣的陰影并擺放到每個矩形的下方

Add some project description.

添加一些項目的說明文字。標題、段落字體和顏色和上面的顏色一致，按鈕的大小和樣式也和上面的一致

并和步驟12一樣創建兩條水平分割直線（140，820，920，1）和（140，1264，920，1）

Let’s create the Twitter Feed. Drop in the Twitter bird icon.

讓我們創建Twitter Feed。拖進Twitter bird圖標

Added a Twitter announcement.

添加一個Twitter公告，字體如下。第一行文字的顏色： #9a9a9a，第二行文字的顏色： #666666

Create a button for More Tweets.

為More Tweets創建一個矩形（864，1302，194，58）

Apply these styles.

添加下面的樣式

漸變編輯器的顏色： #efefef和#ffffff

描邊的顏色： #cdcdcd

Add text.

添加文字，字體如下。顏色： #000000

Step 14 : Creating Footer and Finishing

步驟14：創建頁腳并完成布局

Make a selection for the footer and fill it with a grey value.

為頁腳創建一個選區（0，1397，1200，103），并填充灰色

Apply Color Overlay.

添加顏色疊加，顏色： #162623

Finally add footer navigation and copyright info.

最后添加頁腳導航欄和版權信息。字體如下。顏色： #1eafb5

And that concludes the session. Take a look at the final image.

現在結束教程。看看最終的效果圖片

后記：本網頁布局是一個偏暗色系的布局。該教程整體上中規中矩。亮點是該教程中多次利用蒙版的效果來實現高亮和平滑直線的邊緣。也利用高對比的直線實現強烈對比的分塊。

更多PS網頁設計教程XXVI——如何在PS中創建一個專業的網頁布局 相關文章請關注php中文網photoshop圖片處理教程欄目