作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟體是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出引數。本人在反覆測試的情況下測定了一些引數，以紅色的文字顯示。有些錯誤的引數，直接以紅色文字顯示正確的引數
例如：（90，22，231，77），表示矩形的左上角的座標是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的座標是（90，22），矩形的其他兩個引數教程裡已經指定
4、在教程的最後會附上本人的心得。有些是對教程中的一些步驟的優化等。
Step 1
步驟1
Create a new document (900X900px).
新建文件（900*900px）
Create a new layer called ‘orange header’. Make a selection that’s 900X450px and fill it with an orange gradient:
新建圖層orange header。建立一個900*450px選區，並給它填充一個桔色漸變。用矩形工具建立矩形（0，0，900，450）比較方便，並按照下圖新增漸變疊加圖層樣式
漸變編輯器的顏色： #e37c60、#a42e00
Step 2
步驟2
With your header selection in place create a new layer called ‘header clouds’. Go to filter>render>clouds to fill your header area with clouds. Then change your layer mode to ‘color dodge’ and reduce your opacity to 10%.
利用你頭部區域的選區新建圖層header clouds。（如果之前是用矩形工具建立矩形，那麼這裡還得按住Ctrl鍵單擊一下圖層皮膚上的矩形縮圖）點選：濾鏡 > 渲染 > 雲彩，用雲彩填充你的頭部區域。然後把你的圖層混合模式改為顏色減淡並調整不透明度為10%。
Step 3
步驟3
Now download this great texture set from PSDFAN:Texture Thursday: Damage
現在在PSDFAN上下載下面的紋理
Paste one of the textures into your header selection. Call this layer ‘header texture’.
把其中的一個紋理貼上到你的頭部選區。命名該圖層為header texture
Then reduce this layer’s opacity to 20% and change the layer’s blend mode to ‘overlay’.
然後調整該圖層的不透明度為20%並改變圖層的混合選項為疊加。
Step 4
步驟4
Now use your radial gradient tool to create a white to transparent radial gradient in the right area of your header.
現在在你的頭部區域的右邊用徑向漸變工具建立一個白色到透明的徑向漸變。也可以用橢圓工具建立一個橢圓（450，0，450，450），填充改為0，如下圖新增徑向漸變疊加
Then reduce the opacity of this layer to 20% and the layer blend mode to: ‘color dodge’.
然後調整該圖層的不透明度為20%，並改圖層混合選項為顏色減淡。
Step 5
步驟5
Create a new layer called ‘lighting 1′. Use your lasso tool to create a triangular shard like selection in your header. Fill this selection with a white to transparent gradient.
新建圖層lighting1。在你的頭部區域用套索工具建立一個三角形選區。用白色到透明的漸變填充這個選區
也可用多邊形工具，按照Shift，畫一個正三角形，填充改為0，按Ctrl+T自由變換，轉化為如下圖的三角形，並給它新增白色到透明的漸變疊加的圖層樣式
在該圖層上，右鍵選擇“轉換為智慧物件”，再次右鍵選擇“柵格化圖層”。
Then reduce the opacity of this layer to 5% and the layer blend mode to: ‘color dodge’.
然後調整該圖層不透明度為5%，並設定圖層混合選項為顏色減淡，並調整到合適的位置
Step 6
步驟6
Repeat this technique to create a collection of light shards in your header.
在你的頭部區域重複這個技術建立一系列的光影陣列。可以直接複製步驟5的圖層，調整到合適的位置和大小即可
Step 7
步驟7
Create a new layer called ‘menu’. Create a 60px high selection at the top of your canvas. Fill it with black, and reduce the opacity of this layer to 40%.
新建圖層menu。在你的畫布的頂部建立一個高60px的選區（0，0，900，60）。用黑色填充，並調整該圖層的不透明度為40%
Then, to create a 1px white line under your menu apply a drop shadow (settings below):
然後，建立一條1px寬的白線（0，60，900，1）（不透明度為40%）在你的選單的下方，按照下圖新增投影。
Step 8
步驟8
Add some menu text, as well as some 1px dividers between the menu items.
新增一些選單文字，在每兩個選單之間新增一個1px 的分割線（文字和分割線都用白色，文字的不透明度改為80%，分割線的不透明改為40%）
Step 9
步驟9
Download this Macbook Pro vector set
Paste in your Macbook Pro vector, and position it the right half of your header.
下載這個Macbook Pro vector set
貼上其中的Macbook Pro vector，並擺放到在你的頭部區域的右側
Then apply the following layer blending options to your Macbook Pro layer, including a color overlay, in order to make the laptop blend better with it’s background:
然後按照下圖給Macbook Pro圖層新增圖層樣式，包括一個顏色疊加，看起來和背景能更好的配合起來
顏色疊加的顏色： #cc4d00
Step 10
步驟10
Now create a new layer called ‘macbook shadow’. Create an oval selection beneath your Macbook Pro and fill it with black. Then apply a gaussian blur to your shape. This should give the impression of your laptop casting a downward shadow.
現在建立新的圖層macbook shadow。建立一個橢圓的選區在你的Macbook Pro的下方並用黑色填充。然後對其新增一個高斯模糊。這給你的膝上型電腦新增一個向下的陰影的感覺。
Step 11
步驟11
Write out some large header text (I used the free font Museo).
寫一些大的標題（我用的是免費的Museo）（Museo TT 700，字號：52pt，水平縮放85% ）
Then apply the blending options shown below:
然後按照下圖新增圖層樣式：
漸變編輯器顏色： #f0f0f0和#d4d4d4
Step 12
步驟12
Add some more text to your header, this time using Arial as your font, and select a color that is a darker version of your header background color.
在你的頭部區域新增一些文字，這次字型用的是Arial，顏色選擇你的頭部區域的深色版的背景色（#992d01）
Step 13
步驟13
Now work on creating a form in your header section. Create a rounded rectangle shape for your form input (radius 10px), and apply the blending options shown below. This should make your form look embedded in your header background.
在你的頭部區域建立一個表單。給你的表單建立一個圓角矩形（37，361，246，39）（半徑10px），然後按照下圖新增圖層樣式。這使你的表單看起來是嵌入到你的頭部區域的背景中。
漸變編輯器的顏色： #9a3100和#6b2118
Step 14
步驟14
Now create a button for your form:
在你的頭部區域建立一個按鈕。圓角矩形（298，361，185，39）（半徑10px），然後按照下圖新增圖層樣式。
漸變編輯器的顏色： #bf8453和#e6ad7e
Step 15
步驟15
Add some text for your form elements:
給你的表單元素新增一些文字，左邊的文字的顏色： #cbcbcb，右邊文字的顏色： #992d01
Step 16
步驟16
Add text to the white area beneath your header, I’ve just used filler text/images as an example:
新增一些文字在頭部區域下方的白色區域，我填了一些文字和影象，用作舉例
Step 17
步驟17
Create a new layer called ‘footer’. Create a selection at the bottom of your canvas and fill it with light gray.
新建圖層footer。在你的畫布的底部建立一個選區（0，800，900，100），並填充亮灰色（#d3d3d3）
Step 18
步驟18
Create a new layer and create a circle in the bottom middle of your canvas. Fill it with the same light gray color as your ‘footer’ layer. Then merge this layer down with your ‘footer’ layer. Apply a gradient overlay (settings below):
新建圖層並在你的畫布的底部中間的位置建立一個圓（405，770，90，90）。用footer圖層同樣的亮灰色填充。然後和footer圖層合併。按照下圖新增漸變疊加
Step 19
步驟19
To finish up, add some text to your footer, adding a subtle drop shadow:
快結束了，在你的頁尾區域新增一些文字，並新增一些投影
And We’re Done!
最終完成的作品
後記：
這個是一篇簡單的教程。但是利用一些紋理和小技巧，也實現了不錯的效果。整體配色偏亮橙色，是暖色系，給人一種舒服、溫暖的感覺。