PS網頁設計教程XXVI——如何在PS中建立一個專業的網頁佈局

萬倉一黍發表於2013-07-06

網頁

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

本系列的教程來源於網上的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 individually.

要讓圖案在頭部區域更光滑的揉合起來。給圖案層新增圖層蒙版。選擇一個柔軟的畫筆和用大軟刷噴塗。設定畫筆顏色為#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 Divider

步驟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 divided the available space into 3 equal width boxes with 25 pixels padding between them.

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