PS網頁設計教程V——如何在Photoshop中創建一個商業網站佈局

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

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

約定：

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

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

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

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

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

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

 

Hello. Today I will create another web layout  (template) in Photoshop and this time I will try to create a business template.

大家好。今天在這兒要發佈一個新的PS教程（模版），如何在PS中創建一個商業網站佈局

 

Open Photoshop and create a new document (Ctrl + N), as a background choose #edebe6

打開PS創建一個新的文檔（Ctrl+N）（尺寸：1020px*1120px），背景色： #edebe6

 

Step 1- Creating the logo and search area

First, I will select Rectangle Tool and I will add a black shape on the top of the document then with Type Tool I will add the logo (font used: Tahoma).

步驟1 - 創建Logo和搜索框

首先，用矩形工具在文檔的頂部創建一個黑色的矩形（0，0，1020，12），顏色： #403c33，然後用文字工具添加Logo（字體：Tahoma，（74，62），大小：30px）。

 

O the right side of the logo I will create a search form, that’s why I will select Rectangle Tool and I will create a shape and I will apply this layer styles, then with Type Tool I will write Search:

在Logo的右邊創建搜索表單，用矩形工具創建一個矩形（755，70，160，25），添加如下的圖層樣式，然後用文字工具添加文本Search

 

Having Rectangle Tool selected I will create a small shape in the right side of the shape created on previous step, for this one I will apply this layer styles:

繼續用矩形工具在剛纔的矩形的右邊創建一個小的矩形（915，70，32，25），對這個矩形添加如下的圖層樣式：

顏色漸變的顏色爲： #b85a36， #fa7b46

描邊的顏色： #fde0ce

用文字工具添加文字GO，添加如下的圖層樣式

 

Step 2 – Creating the Navigation and Featured Area

First, select Rectangle Tool and create a green shape, as a color, I have used #aed1c4

步驟2 - 創建導航欄和特色區域

首先，用矩形工具創建一個綠色的矩形（0，188，1020，60），顏色： #aed1c4

 

With Rectangle Tool create another shape. I have used a red color for demonstration proposes. This shape has the following dimensions:  918 by 62px

用矩形工具創建另一個矩形（51，156），爲了示範我用紅色。這個矩形的尺寸爲918px*62px

 

Then apply some layer styles:

然後添加如下的圖層樣式：

內陰影的顏色： #bac4a9

顏色疊加的顏色： #96c6b6

 

Next I will add the links. For each of them I have applied this layer styles:

接下來要添加一些鏈接。對每個鏈接添加如下的樣式：

 

With Pen Tool (P) I will create a small triangle over the Home link and I will apply this layer styles:

用鋼筆工具在Home鏈接的上方創建一個小的三角形，添加如下的圖層樣式：

投影的顏色： #5a7169

 

Then using Line Tool I will create some separators between links. To create this you will need to set the weight for the line tool to 1px

然後用直線工具在鏈接之間創建一些分割線。直線工具的粗細設置爲1px

I will add first a darker line (#8fafa4)，then a whiter one (#aad4c6)。

我首先添加一條深色的直線（顏色： #8fafa4）,然後添加一條淺色的直線（顏色： #aad4c6）

 

Then I’ll make sure that both of the lines are selected on my layer palette and I will click Ctrl + E (to merge them). I will duplicate this layer several times (to have a separator for each link)

然後在圖層面板選中剛纔的兩條直線的圖層，Ctrl + E（合併圖層），複製幾次合併後的圖層（在每兩個鏈接之間都有一個分隔符）

 

Next using Rectangle Tool I will create another shape. As a color I have used #d6e1c7 and I have applied this layer styles:

接下來用矩形工具創建另一個矩形（72，218，876，254），顏色： #d6e1c7。對它添加如下的圖層樣式：

描邊的顏色： #e4f1d3

 

To create a nice 3d effect for navigation, using Pen Tool (P) I will create this Grey shape:

I will create another one on the right side, and here is my outcome:

給導航欄添加漂亮的3d效果，用鋼筆工具創建灰色（顏色： #eaebe3）的三角。

同樣的在右邊創建另一個三角，這是我做到效果圖

個人的建議，如果不能熟練的運用鋼筆工具，可以通過複製矩形，調整大小，旋轉角度，調整圖層順序來達到同樣的效果。

 

With Type Tool(T) I will add some text

用文本工具添加一些文本

大標題文字，字體：Tahoma，大小：30px，添加如下的圖層樣式

段落文字的顏色： #7f7f7f

 

Then from my stock images I will search for a business image. Please note that when you add an image in Photoshop, usually the resolution is pretty high. All you have to do is to resize it, using Free Transform which can be activated by pressing Ctrl + T from your keyboard.

從我收藏的圖片中搜索一個關於商業的圖片。要注意的是當你在PS中添加圖片的時候，常常分辨率是非常高的，你要做的就是重新調整它的大小，在鍵盤上用Ctrl+T激活自由變形工具。

在PS CS5中通過置入的方式打開圖片的話，爲了後續的操作，還必須在該圖層上右鍵選擇「柵格化圖層」

 

Here is my image

這是我添加的圖片

 

Now I will select Rectangular Marque Tool (M) and I will make this selection over my picture:

用矩形選擇工具在圖片的上方設置矩形選區

 

I will right click on my picture (having Rectangular Marquee Tool selected) and I will choose Feather

在圖片上方右鍵鼠標（在用矩形選擇工具選擇的範圍內），選擇「羽化」

and I will use 50px for Feather Radius.

羽化的半徑設置爲50px

 

Next right click again over the selection but this time I will choose Select Inverse

接下來再次鼠標右鍵點擊選中區域，這次是選擇「選擇反向」

按delete鍵幾次，刪除圖片邊緣的區域，達到羽化的效果。不同的圖片次數不是固定的，本文中的圖片是4次。

I will set Blending Mode to Luminosity and I will lower the Opacity to 60%

圖層的混合模式選擇「明度」，不透明度設置爲不超過60%

結果如下：

 

Next I will add a button on Featured Area (at the bottom of the text). To do that I will select Rectangle Tool and I will create a shape then I will add this layer styles:

接下來要在特色區域添加一個按鈕（在文本的底部）。用矩形工具創建一個矩形（392，425，92，28）並添加如下的樣式：

漸變疊加的顏色： #ba5c38，#f97c44

描邊的顏色： #ffe0ce

 

給按鈕添加文字Click here。並複製之前搜索欄那塊的GO文字的圖層樣式

 

My output

我的樣張

 

Now I would like to make this Featured Area more visible. To do that I will select in my layer pallete the main shape used to create Featured Area, and I will apply a Free Transform (Ctrl + T), then I will push this button to go in 「Wrap Mode」

現在要對特色區域增加一些變化。在圖層面板選擇特色區域的主要矩形，然後進行自由變換（Ctrl + T），然後點擊「在自由變換和變形模式切換」按鈕

When you will be in 「Wrap Mode」 a grid will show up.

這樣會進入自定變形模式，會顯示一個控制變形的網格

 

Here select this corner, and with your mouse gently drag it a little bit down

選擇左下角的控制點，然後用鼠標輕輕的往下拖動一點點（往下拖動14px）

I will do the same for the right side

選擇右下角的控制點，做同樣的步驟

Once you have finished press ENTER

當你做完按ENTER鍵確定

My result

我的結果

 

The final step for Featured Area will be to create some shadows. For That I select Ellipse Tool and I will create this shape

最後要對特色區域添加一些陰影，用橢圓工具添加一個橢圓

 

Next I will go to Filter>Blur>Gaussian Blur and I will choose for radius 10px, then I will select Rectangular Marque Tool and I will make this selection

接下來點擊：濾鏡 > 模糊 > 高斯模糊，設置半徑爲10px，然後用矩形選擇工具選取如下的矩形

 

Hit DELETE Button on your keyboard then press Ctrl + D to unload the selection

按鍵盤上的DELETE鍵刪除選區的內容，然後Ctrl+D取消選區

Here’s my result:

這是我的結果：

 

Next I would like to add a shadow at the bottom of the curved shape. Unfortunately I can’t create a nice shadow using the 「standard way」 – ellipse tool, that’s why I will use the Brush Tool.

All you have to do is to create a new layer on your Layer Palette (Ctrl + Alt + Shift + N) chose a rounded brush, a black color and follow the edge of your shape.

接下來，我想在彎曲形狀的底部添加一個陰影。不幸的是我不太會使用"標準方法"——橢圓工具，去創建一個好看的陰影。因此我會使用畫筆工具去畫陰影。

創建一個新圖層在你的圖層面板 (Ctrl + Alt + Shift + N)上，選擇圓角的畫筆，黑色，沿着彎曲形狀的邊緣畫一條黑線。

 

Now apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 12px

My result – a nice and soft shadow.

現在添加高斯模糊（濾鏡 > 模糊 > 高斯模糊），半徑設置爲12px

我的結果 - 一個漂亮柔和的陰影

 

Step 3 – Creating the Content Area

This one is really easy to create. First with Rectangle Tool I will create this shape:

步驟3 - 創建內容區域

這部分非常容易。首先用矩形工具創建一個矩形（47，416，926，464），顏色： #d6e1c7

 

接下來，用矩形工具在左側新建一個灰色的矩形（47，416，25，70），顏色： #acb69e

用直接選擇工具選擇矩形的左下角，按DELETE鍵刪除左下角的控制點，使之成爲一個陰影三角形

同同樣的方法在右側新建矩形（948，416，25，70），刪除右下角控制點，成爲另一邊的陰影三角形

 

Then with type tool I will add some text

然後用文字工具添加一些文本，標題文字的顏色： #4a5340

 

在標題和內容之間，用直線工具添加白色的水平分割線，不透明度設置爲50%

在兩欄之間添加陰影分隔符，和特色區域文字和圖片之間的分割符做法類似

 

Content area is finished now.

內容區域就完成了

 

Step 4 – The Footer

This one, again is quite easy to create because is a replica of the Featured Area. I have used the same techniques used to create Featured Area.

步驟4 - 頁腳

這部分，非常容易製作因爲和特色區域一模一樣。我要用和特色區域相同的技術去製作它

因爲是類似，就直接複製特色區域的相關圖層，移到合適的位置，點擊：編輯 > 變換 > 垂直翻轉，再進行合適的微調。

 

With Type Tool I will add some text and with Rectangle Tool I will create some forms for 「Newsletter」. The orange buttons are using the same layer styles like the button from Featured Area. If you have followed me when I have created Featured Area you will be able to create the Footer also.

用文字工具添加一些文本，用矩形工具添加一些Newsletter的文本框，桔黃色按鈕是用和特色區域的按鈕的同樣的圖層樣式。如果你是一直跟着我做完特色區域，那你一定也能完成頁腳區域

 

頁腳區域：

標題文字：顏色： #98a289

文本框：用矩形工具畫矩形，圖層樣式直接複製頭部區域文本框的圖層樣式

文本框文字：直接複製頭部區域文本框文字，修改文字後，移到合適的位置

按鈕：用矩形工具畫矩形，圖層樣式直接複製頭部區域按鈕的圖層樣式

按鈕文字：直接複製頭部區域按鈕文字，修改文字後，移到合適的位置

陰影分割符：直接複製內容區域的陰影分隔符，移到合適的位置

 

 

下面是我最終的結果：

 

心得：

本教程的特色是利用變形模式，完成摺紙特效

 

 

 

 

 

     本文轉自萬倉一黍博客園博客，原文鏈接：http://www.cnblogs.com/grenet/archive/2012/07/01/2563892.html，如需轉載請自行聯繫原作者