作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁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，如需轉載請自行聯系原作者