作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁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.
讓我們開始教程
Open Photoshop and create a new document 1020 by 1550px
打開Photoshop，新建一個文檔，尺寸：1020*1550px
Step 1
Select Paint Bucket Tool, set the foreground color to #76b8b9 and click one time on your document.
步驟1
選擇油漆桶工具，設置前景色為 #76b8b9。單擊一次，對您的文檔設置背景色。
Step 2
Select Ellipse Tool, make sure that the foreground color is set to white and create this white shapes:
步驟2
選擇橢圓工具，前景顏色設置為白色，創建下圖的兩個白色的橢圓：
For each of this shape I will apply a Gaussian Blur of about 50 – 60px. To apply a Gaussian Blur go to Filter>Blur>Gaussian Blur.
You may lower the opacity if it’s needed.
Here is my result (a nice fading light):
對每個橢圓，我用 50 — — 60px 的高斯模糊。應用高斯模糊：濾鏡 > 模糊 > 高斯模糊。（在做高斯模糊前，會提示柵格化形狀，確定即可）
如果感覺需要，您可以降低不透明度。（基本上不需要再降低不透明度了）
這是我的結果 (漂亮的漸隱光效)：
Step 3
Now I will select Line Tool and I will create those 2 lines. Please see the screenshot. For the first line I have used this color: #669495 and for the second one, this color: #9cd8d9
步驟3
參考樣張，選擇直線工具創建2條直線。第一條直線，顏色： #669495 ，第二條直線，顏色： #9cd8d9
Step 4
I will select Type Tool and I will add my logo. I will write: “healthy tips”.
For healthy I will apply this layer styles:
步驟4
用文字工具，添加我的徽標。寫上文字："healthy" 和 "tips"。
對healthy應用圖層樣式：顏色： # 698c8e
healthy的字體設置如下：原教程中的字體沒有找到，只能找了一個比較接近的字體
tips的字體設置如下：也是找了一個接近的字體替換原教程的字體，字體的顏色： # fcf30b
Here’s my result
這是我做的效果
Step 5
Having Type Tool selected I will add the links for navigation. I have use the same layer styles and the same font used for the word “healthy” from the logo.
步驟5
用文本工具添加導航鏈接。用和healthy相同的圖層樣式和相同的字體。實際上，我用的是Brush Script MT字體。
Step 6
I will select Rectangle Tool and I will create this shape. Color used: #edec62
步驟6
用矩形工具創建矩形（46，162，439，50）。顏色： #edec62
Step 7
I will select Direct Selection Tool, and I will drag a little bit from the bottom – right corner of the shape
步驟7
用直接選擇工具選中黃色的矩形，拖動右下角的點往右下角的方向拖動一點
雖然原文沒有說明，個人覺得這里還是要加上投影
效果如下：
Step 8
With Type Tool I will add some text over this shape. I have applied the following layer styles:
步驟8
用文字工具在黃色的區域上添加一些文字。並添加如下的圖層樣式：
顏色疊加的顏色：# b3b303
My result:
結果如下：
Step 9
With Type Tool I will continue to add some more text
步驟9
繼續用文本工具添加一些文字
Step 10
I will create a button, using again Rectangle Tool and Direct Selection Tool. For the text over the button I have applied the layer styles from step 8. My result
步驟10
用和步驟8相同的方法創建一個按鈕（（347，415，140，20），顏色： #ffde00 ），按鈕的文字是see more …
Step 11
On this step I will use some icons from Premium Files section. I will go to Health/Fitness Vector Icons, I will download them and I will choose an icons showing an apple and I will place it on my document. I will play a little bit with Free Transform Tool (Ctrl +T) till I have something that I like. Here is my result:
步驟11
在此步驟中，我會從Premium Files下載一些圖標。我將去Health/Fitness Vector Icons，下載並會選擇一個蘋果圖標顯示在我的頁面上。我會使用自由變換工具 (Ctrl + T)做一些微調，直到我滿意為止。這里是我的結果：
Step 12
Here I will repeat Step 6, 7 and 8 and I will create this shapes.
步驟12
現在，將重復步驟6、7、8，創建如下的形狀：
（45，490，926，47），顏色： #f1c96a
（590，502，140，20），顏色： #f3f2d6，圖層樣式用內陰影
復制上面的形狀，旋轉180度，然后平移到合適位置，顏色： #f3f2d6，圖層樣式用內陰影，內陰影的參數設置如下：
（900，494，50，20），顏色： #fedd02
（56，637，257，32），顏色： #ffde00
Step 13
With Type Tool I will add the text over them
步驟13
用文字工具在上面添加一些文本
For “Looking for more healthy tips? Subscribe now!” I have used “Adventure” font with the following layer styles:
對文字Looking for more healthy tips? Subscribe now!，我用Adventure字體（實際使用Brush Script STD），並且采用下面的圖層樣式：
顏色疊加的顏色：# b3b303
For “Latest Articles” I have applied this layer styles:
對文字Latest Articles采用下面的圖層樣式
顏色： #45989c
做好如下：
用文本工具添加一些文本
Step 14
With Rectangle Tool I will create this white shape
步驟14
用矩形工具創建如下的白色矩形：（48，693，298，194）
Step 15
With Pen Tool I will create this 2 black triangles and I will apply a Gaussian Blur of about 14px. Here’s my result
步驟15
用鋼筆工具添加兩個黑色的三角。
對黑色的三角形添加高斯模糊，參數是14px（這個參數還是要斟酌一番，我用的是20px）
Step 16
Next using some images I will create another 5 thumbnails
步驟16
接下來重復創建另外5個，並且添加一些圖片的縮略圖
Step 17
I will repeat again the steps 6, 7, 8 and I will create this shape:
步驟17
我將重復步驟6、7、8創建下面的形狀：（57，1145，258，32），顏色： #ffde00
Step 18
With Type Tool I will add some dummy text
步驟18
用文字工具添加一些文本
Step 19
From our Premium Files – Food Vector Icons and Health/Fitness Vector Icons I will add some vector icons
在 Premium Files – Food Vector Icons 和 Health/Fitness Vector Icons 上找到一些圖標並添加之
我最終的結果如下：
心得：
如何在PS中畫出純色的直線？
一般在PS中畫直線，用的是直線工具。可是直線工具和矩形工具一樣，默認是以形狀圖層的形式出現的。形狀圖層的優點是抗鋸齒，會通過插值計算出陰影的顏色，這樣就不會有鋸齒的感覺。而且形狀圖層在縮放時，也能達到很好的抗鋸齒的效果。不過，抗鋸齒的效果用在水平線和垂直線上就沒有意義了（因為根本沒有鋸齒），PS在畫水平線（或垂直線）時，在直線的旁邊添加了一條陰影，這個就有點畫蛇添足，有點搗亂了。如下圖：
有人提到，可以在PS中關閉抗鋸齒的選項，我沒有找到，如有哪位網友知道，不妨告知。
在咨詢了一些人之后，給出了一個不錯的解決方法
新建圖層》用鋼筆工具畫一條水平線》對鋼筆工具的水平線進行描邊，如圖：
在本教程中，步驟3中的兩條直線，如果用直線工具，感覺就是比較模糊。用鋼筆工具加描邊，感覺就是比較銳利。