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 tr​​y to create a business template.

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

 

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

打開建立新的文件（Ctrl+N）（尺寸：1020px*1120px），背景顏色： #edebe6

 

Step 1- Creating the logo and search a片🜥 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 selectSearchtangle Tool and I will create a shape and I willwill appape selectSearcher Iool the I will. :

在Logo的右邊建立搜尋表單，用長方形工具建立一個長方形

（755，70，160，25）

，用一個矩形工具建立一個矩形（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 尺寸矩形的右邊建立一個小的矩形🎜（915，70，32，25）🎜，對這個矩形添加如下的圖層樣式：🎜

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

描邊的顏色： #fde0ce

描邊的顏色： #fde0ce

文字如下圖的文字。

 

Step 2 – Creating the Navigation and Featured Area

First, select Rectangle Tool and create a green shape, as a colorFirst, select Rectangle Tool and create a green shape, as a colorFirst, select Rectangle Tool and create a green shape, as a color, Ius edtangle, Ius 創建 -

首先，用長方形工具建立一個綠色的長方形

（0，188，1020，60）

，顏色： #aed1c4

 

With color Tool create Rectangle Tool create sape. . This shape has the following dimensions:  918 by 62px

用矩形工具建立另一個矩形

（51，156）

，為了示範我用紅色。這個長方形的尺寸是918px*62px

 

Then apply some layer styles:

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

內陰影的顏色： # #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 tr​​iangle over the Home link and I will apply willlayerstyle

用鋼筆工具在Home連結的上方建立一個小的三角形，加上以下的圖層樣式：

投影的顏色： #5a7169

Š

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

 

Then I'll make sure that selectlines 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

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

用文字工具加入一些文字

大標題文字，加號

🎜🎜段落文字的顏色： #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 和 Freesat, is集 Frees unmm is 筆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) 和 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 5008 for Feather Radius.

羽化的半徑設定為50px

 

Next right click again over the selection but this time I will choose Select In Instoplepmentp In「接下來點擊」選擇反向”

按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 textwill. To do that Igle selectn thattand and Ilectn dotan will se do that Igle selectn dom this layer styles:接下來要在特色區域增加一個按鈕（在文字的底部）。用長方形工具建立一個長方形

（392，425，92，28）

並加入如下的樣式：

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

描邊的顏色： #ffe0ce

 

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

 

My output

我的樣張

 

toahowal yekhoo do​​lman to mile fake as do​​l. 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 dragit a little bit down然後用滑鼠輕輕的往下拖曳一點點（

往下拖曳14px

）

I will do the same for the right side

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

Once you have finished press ENTER

當你做完按ENTER鍵確定

My result

我的結果

. commh

我的結果 For That I select Ellipse Tool and I will create this shape

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

 

Next I will go to Filter>Blur> for ussose 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” – willpse way” – that to Eool the rush

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 medow . ），半徑設定為12px

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

 

Step 3 – Creating the Content Area

This one is really create the Content Area

This one is really create sy fsy 片面 Tool screate tos s is :

步驟3 - 建立內容區域

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

 

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

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

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

 

Then with type tool I will add

 

Then with type tool I will add some some text用文字工具添加一些文本，標題文字的顏色： #4a5340

 

在標題和內容之間，用直線工具添加白色的水平分割尺寸

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

 

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.

- 頁腳容易製作因為和特色區一模一樣。我要用和特色區域相同的技術去製作它

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

 With Type Tool I will add some text and with Rectangle Tool I will create some forms for “Newsletter”。 me when I have created Featured Area you will be able to create the Footer also.

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

 

頁腳區域：

標題文字：顏色： #98a289

標題文字：顏色： #98a289

標題文字：顏色： #98a289

標題文字：顏色： #98a289

標題文字：顏色： #98a289

標題畫出矩形，圖層樣式直接複製頭部區域文字框的圖層樣式

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

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

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

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

 

 

下面是我最終的結果：

的特徵，完成摺紙特效 

 更多PS網頁設計教學V－如何在Photoshop中建立商業網站版面 相關文章請追蹤PHP中文網！

 

 

 

 

🎜🎜🎜