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

做爲編碼者，美工基礎是偏弱的。咱們能夠參考一些成熟的網頁PS教程，提升自身的設計能力。套用一句話，「熟讀唐詩三百首，不會做詩也會吟」。

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

約定：

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

二、原教程的截圖是英文的，本人在從新制做的基礎上，從新截了中文版的圖

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

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

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

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

 

 

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

 

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.

如今結束教程。看看最終的效果圖片

 

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