作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟件是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數
例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定
4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。
Let’s start the tutorial:
讓我們開始教程
Step 1
Open Photoshop, create a new document (Ctrl +N) and use the following dimensions 1020 by 1460.
步驟1
打開PS，新建文檔（Ctrl+N），按照下面的設定，尺寸：1020px*1460px
Set the foreground color to #bcb49d, then select Paint Bucket Tool and click one time on your document to change the color, then go to Filter>Texture>Grain. Here use the following settings:
設置前景色為#bcb49d，然后選擇油漆桶工具，在你的文檔上點擊一次改變顏色，然后點擊：濾鏡 > 紋理 > 顆粒。下面是我用的設置
Step 2
Select Rectangle Tool and create this shape on top. As a color I have used #61544a
步驟2
用矩形工具在頂部新建一個矩形（75，7，870，61），顏色： #61544a
With Pen Tool create this black shape:
用鋼筆工具新建一個黑色的三角形：
不熟悉鋼筆工具的，也可以用矩形工具新建一個黑色矩形，然后用直接選擇工具，選中矩形的左下角，然后按delete鍵刪除，變成一個黑色的三角形
Then go to Filter>Blur>Gaussian Blur and apply a Gaussian blur with a radius of about 6.5px. Proceed in the same way for the right side. You should have something like this now:
然后點擊：濾鏡 > 模糊 > 高斯模糊，添加一個高斯模糊，半徑為6.5px。在右側如法炮制。如下圖所示：
Step 3
Select Rectangle Tool and create this shape. For my shape I have used this color: #e5d2ac
步驟3
選擇矩形工具新建一個矩形（70，68，880，54），這個矩形的我選擇的顏色： #e5d2ac
Next with Pen Tool I will create this shapes:
接下來用鋼筆工具在左側創建如下的形狀：
由於筆者不習慣鋼筆工具，故本步改為
先用自定義形狀工具，選擇X型的圖形
用直接選擇工具，按住Shift鍵，選擇X型圖形的右側的幾個控制點
按delete鍵刪除選中的控制點
再用直接選擇工具，按住Shift鍵選中右側的兩個控制點，按住Shift鍵向右側拖動幾個像素，並改顏色為 #dfc9a0
在右側如法炮制
為了使當中的長條矩形看起來有陰影，給它增加外發光的樣式
Step 4
I will select Rectangle Tool and I will create this shape and I will apply this layer styles:
步驟4
用矩形工具新建一個矩形（286，74，625，42），並按照下圖添加圖層樣式
顏色疊加： #725746
Because this is a shape (a vector object) to apply the next step I will have to rasterize this shape first. To do that, locate the shape on your layer palette, right click on it and choose Rasterize Layer
Once the layer is rasterized, select Eraser Tool, with a brush of 7px and start erasing each corner of the shape.
因為這是一個形狀（矢量對象），在做下一步之前首先是要柵格化圖層。為此，在你的圖層面板上選中該形狀圖層，在上面鼠標右鍵然后選擇柵格化圖層
當圖層柵格化好以后，選擇橡皮擦工具，選擇半徑為7px（實際上，我感覺12px比較好，下圖是12px的效果圖）的圓畫筆，然后擦除矩形的四個角
We are doing this because we need to create a vintage style for our navigation. After you finish this, with type tool add the links for the navigation bar. Here is my result:
我們這樣做是因為我們需要創建一個復古樣式的導航欄。在你完成之后，用文字工具添加導航欄的鏈接（字體：Arial，字號：14px，顏色： #bcb49d，並添加如下的圖層樣式）。這是我的結果：
Step 5
On this step we will create featured area. With Rectangle Tool I will create this shape. Color used #e6e0d4:
步驟5
在本步，我們要創建特色區域。用矩形工具創建一個矩形（75，122，870，404），顏色： #e6e0d4
I will select Ellipse Tool and I will create this black shape
用橢圓工具創建一個黑色的橢圓
And I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur) of about 4px. My result:
然后添加高斯模糊（點擊：濾鏡 > 模糊 > 高斯模糊），半徑為4px
With Type Tool I will add some text:
用文字工具添加一些文本：
本步驟也是一句話略過，故在此將詳細的過程補充完整
用矩形工具畫兩個矩形（128，186，480，4）和（128，238，480，4），顏色： #61544a。（也可以用直線工具畫兩條粗細為4px的直線）
在兩條直線之間添加一些文本。字體：Baskerville Old Face，字號：18px，顏色：#725746
在下方添加一些段落文字，字體：Baskerville Old Face，字號：12px，顏色：#8d7464
用矩形工具在段落文字的下方創建一個矩形（477，483，70，17），顏色： #61544a
給矩形添加文字。字體：Times New Roman，字號：10px，顏色： #bcb49d。給文字添加圖層樣式：
用自定義形狀工具在按鈕的右側添加一個手型形狀。顏色： #61544a
On the right side I will select Pen Tool and I will create this shape.
在右側用鋼筆工具創建如下的形狀，顏色： #e5d1ac
筆者不擅長鋼筆工具，用矩形工具新建一個矩形（617，122，328，404），然后按Ctrl+T自由變形工具，右鍵選擇斜切，拖動左上角的點向右側移動，H的度數：-13.64。
I will go to Filter>Texture>Grain and I will use this settings:
點擊：濾鏡 > 紋理 > 顆粒，按照下圖設置：
Next from Vintage Photoshop (PSD) File I will select business man and I will add it on my document. All you have to do is to open the vintage Photoshop file and to drag and drop the business man on your document. Here is my result:
接下來從Vintage Photoshop (PSD) File中選擇business man，然后添加到我的文檔。你要做的就是打開vintage Photoshop file並拖動business man到我的文檔，添加顏色疊加： #725746。這是我的結果：
This area is finished now. Let’s head up to create the logo.
該區域已經完成。讓我們開始創建LOGO
Step 6
First I will select Ellipse Tool and I will create this circle. As a color I have used #8d7d5d
步驟6
首先用橢圓工具創建一個圓（106，25，144，144）。顏色設置為： #8d7d5d
Next I will use again Ellipse Tool but this time I will create a orange circle, smaller then the first one:
接下來再次用橢圓工具創建另一個圓（117，36，122，122），顏色： #ff7420，比前一個小一點：
Having Ellipse Tool still selected I will create a white ellipse on the top of the 2 circles.
繼續保持選擇橢圓工具，在2個圓的上方創建一個白色的橢圓
Once you have created this one, apply a Gaussian Blur for it (Filter>Blur>Gaussian Blur) with a radius of 20px. Set the blending mode to Overlay.
My result:
當你創建好這個橢圓后，添加高斯模糊（濾鏡 > 模糊 > 高斯模糊），半徑：20px（參數還是要斟酌一番，參數設置的大小和你的橢圓大小有關）。把混合模式設置為疊加
Next on the top of all this circles I would like to make a circle with dashes. You can easily do this on Illustrator, but Photoshop does not have a special tool to create it, that’s why we will have to improvise. First select Brush Tool (B), then open the brush palette. You can do that by pressing F5 on your keyboard or from Window>Brush. Once you have done this, apply the following settings to your brush palette:
接下來在頂部的圓內，我喜歡創建一個用划線的圓。在Illustrator中很容易做到這一點，不過在PS中並沒有一個普通的工具去創建它，這就是為什么我們需要即興發揮一下。首先選擇畫筆工具，然后打開畫筆面板。你可以按F5或者是點擊：窗口 > 畫筆去打開畫筆面板，按照下圖設置你的畫筆面板。
Now select Ellipse Tool, but this time make sure that you select paths, instead of shape layers (please see the screenshots)
現在選擇橢圓工具，不過這次是確保選擇是路徑，取代形狀圖層（請看屏幕截圖）
Once you have done this, Pres Ctrl+Shift +Alt+N to create a new layer the you can create another circle. As you can see this one is not filled. Right Click on it and choose Stroke Path. A window will pop-up, select Brush, hit OK,
當你完成一切時，按Ctrl+Shift +Alt+N創建一個新的圖層，你可以創建另一個圓。當你看見這個圓沒有填充。右鍵並且選擇描邊路徑。一個窗口會彈出，選擇畫筆，按確定。
then push Delete on your keyboard. You should have something like this now:
然后按Delete鍵。給這個圖層添加如下的圖層樣式，你的作品應該像下圖一樣：
Next with Type Tool I will write: Pfolio (font used Bauhaus 93) and I will apply this layer styles:
接下來用文字工具添加：Pfolio（字體：Bauhaus 93，字號：36px），並添加如下的圖層樣式：
顏色疊加的顏色： #e86f1e
The logo is finished, let’s move to the content area now…
LOGO已經完成，接下來開始制作內容區域部分
Step 7
I will select Line Tool and I will create this 2 lines, then with Type Tool I will write “Latest News From Blog” using Neues Bauen font. I have applied the following layer styles for the phrase “Latest News from the blog”:
步驟7
選擇直線工具創建2條直線（（75，583，230，2）和（720，583，230，2），顏色： #61544a），然后用文字工具書寫Latest News From Blog，字體：Neues Bauen，字號：22px。對文字圖層添加如下的圖層樣式：
顏色疊加的顏色： #a18778
Next, on the line from the left side of the text, I will add a Layer Mask (directly from Layer Panel), I will select Gradient Tool, I will make sure that the default palette is selected (black & white) and I will draw a line from left to the right.
接下來，在文字左側的直線，我要添加圖層蒙版（直接在圖層面板操作），我要選擇漸變工具，選擇默認的面板（黑白），然后從左拖到右
I will proceed in the same way for the line on the right.
Here is my result:
對右邊的直線同樣的操作
這是我的結果：
Next with Pen Tool I will create this 2 triangles
下一步，用鋼筆工具創建兩個三角形
建議：可以用矩形工具畫一個矩形，然后用直接選擇工具拖動一個點到合適的位置，再用直接選擇工具選擇另一個點，按Delete刪除，得到三角形
Then I will apply a Gaussian blur (Filter>Blur>Gaussian Blur) of about 10 px. My result:
然后添加高斯模糊（點擊：濾鏡 > 模糊 > 高斯模糊），半徑設置為10px。這是我的結果:
On the top of this 2 triangle, I will select Rectangle Tool I will create a shape and I will apply the following layer styles:
在2個三角形的上方，選擇矩形工具創建一個矩形（77，650，277，179），然后按照下圖添加圖層樣式：
Then using a stock image I will add it over my shape. Here is my result:
在矩形上添加一張圖片。這是我的結果：
將背景色改為#c5bba7，圖片的圖層的混合模式改為疊加：
I will select Rectangle Tool and I will create this shape. On the Layer Palette I will right clock on it’s layer and I will choose Rasterize Layer, then I will select Lasso Tool and I will make a selection on the left and on the right side of the shape. I will hit delete on my keyboard and I will proceed in the same way on the right side, then I will lower the opacity and I will apply this layer styles:
選擇矩形工具新建一個矩形。在圖層面板上右鍵選擇柵格化圖層，接着選擇套索工具，在矩形的左側建立選區（鋸齒狀）。接着按鍵盤上的delete鍵，在矩形的右側用同樣的方法，接着調低不透明度（66%），按照下圖添加圖層樣式：
顏色疊加的顏色：#f8f8f8
In the same way I will create 5 new thumbnails
用同樣的方法創建另外5個圖
Step 8
With Rectangle Tool I will create this shape:
步驟8
用矩形工具創建一個矩形（0，1113，1020，347），顏色： #62544b：
With Pen Tool I will create this shapes:
用鋼筆工具創建如下的形狀：
建議：用自定義形狀工具，選擇X型，用直接選擇工具將上下兩個控制點移到水平位置，再拖動右邊兩個控制點到合適的位置，填充的顏色： #e9e3d7，按照下圖添加樣式：
投影的顏色： #b49d91
並復制兩個到合適的位置：
用矩形工具添加一些矩形，並添加如下的樣式：
With Type Tool I will add the text
用文字工具添加一些文字：
復制之前的手型按鈕二次，修改文字為see more 和 subscribe，並移到合適的位置
至此，本教程全部完成
后記：
本教程是復古風格的，有點像上世紀初的西部風格。利用混合模式的疊加的效果，能使黑色的圖像合成到木紋色。整個頁面簡朴朴素，有一股清新的風格，讓人心曠神怡。