作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源于網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟體是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出參數。本人在反複測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正确的參數
例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他兩個參數教程裡已經指定
4、在教程的最後會附上本人的心得。有些是對教程中的一些步驟的優化等。
1. Open up Photoshop and create a new document with the dimensions of 1200×1000.
1、打開Photoshop，建立一個新文檔，尺寸：1200px*1000px。
2. The first area we will start with is our background. Using your Paint Bucket Tool (G), fill your background layer with #FD6E8A.
2、首先，我們将開始制作背景。使用油漆桶工具（G），填充背景層，顔色： #FD6E8A。
3. We want to create a polka dot pattern we can add to our background. To do this we need to create a new document with the dimensions of 45×53.
3、我們要建立一個波爾卡圓點圖案，可以加入到我們的背景。要做到這一點，我們需要建立一個新文檔，尺寸：45px*53px。
4. Create a new transparent layer and delete your background layer. Next add two circles in the following manner with your favorite Ellipse Tool. I used the Elliptical Marquee (M).
4、建立一個新的透明圖層，并删除你的背景層。接下來，用你最喜歡的橢圓工具添加兩個圓圈（（0，2，24，24）（20，27，24，24））。我用橢圓選框工具（M）。
5. Go to “Edit>Define Pattern” and then insert the name Polka Dot for your pattern name. You can then close out of this document and return to your template where we will be using our newly created pattern.
5、點選：編輯 > 定義圖案，然後輸入圓點圖案名稱。然後，您可以關閉此檔案，并傳回到您的布局，在這裡，我們将使用我們新建立的圖案。
6. In your layers palette create a new blank layer and name it dots. Using your Pattern Stamp (S), find your Polka Dot brush in the drop down menu. Then proceed to brush with a large soft brush until you have results that look similar to the following:
6、在圖層面闆中，建立一個新的空白圖層，并将其命名為dots。使用圖案圖章工具（S），在下拉菜單中找到你的圓點刷。用一個大的軟筆刷刷整個頁面，類似于以下的結果：
我設定的大小為800px
7. Then lower the opacity of your dots layer to about 2%. This will keep it very subtle in our background.
7、然後将dots點層的不透明度降低到2%左右。這将顯得它在我們的背景中很微妙。
8. Now using your Ellipse Tool, create a circle that looks like the following:
8、現在使用橢圓工具，建立一個圓（39，-7.5，585，585），看起來像下面這樣：
9. Then we want to use our Pen Tool (P) to create a shape on top of our circle that looks like the following:
然後，我們要使用鋼筆工具（P）建立一個形狀在我們圓的上面，看起來像下面的：
10. Once you are happen with your results, select both layers and then right click and choose Merge Layers to put them onto one layer. Lower the opacity of your layer to around 19%. We then want to duplicate this layer twice by hitting Command+J. Move your shapes in the following manner. Make your second copy 24% opacity, and then make your third 42%.
10、當你完成上面的步驟後，選擇這兩個層，然後右鍵單擊并選擇合并圖層，将它們放到一個層。把你的層的不透明度降低到19％左右。然後，我們按ctrl+ J，複制這個圖層兩次，按下圖所示，移動您的形狀。你的第二個副本的不透明度為24%，第三個的不透明度為42%。
3個形狀的位置（以左下角為基準點）分别是（39，578）、（153，554）、（59，484）
11. The last touch we will add to our background is by adding a Starburst Effect. We will use one of the brushes from this brush pack. With a foreground of #FD6E8A, place it in the following manner. I lowered the opacity to around 22%.
11、最後的步驟，我們将增加我們的背景，添加一個光芒四射的效果。我們将使用此畫刷。前景色： #FD6E8A，将其按照下圖放置，降低不透明度為22％左右。
注：這一步要用外置的畫刷。但是我們完全可以制作該圖形，下面就是該圖形的制作過程
建立一個PS文檔，尺寸：600px*600px，背景是透明色。從頂部到底部拉一個黑到透明的漸變
點選：濾鏡 > 扭曲 > 波浪。按照下圖設定參數
點選：濾鏡 > 扭曲 > 切變。按照下圖設定參數
點選：濾鏡 > 扭曲 > 極坐标，按照下圖設定參數
在圖層上右鍵選擇複制圖層，複制到我們的主文檔
移動該圖層到合适的位置，并設定填充為0%，并按照下圖設定漸變疊加的圖層樣式，不透明度設定為50%，調整大小為原來的225%
12. For the logo I have prepared a “Candy Cane Heart” by modifying a candy cane icon found here. Using the font Androgyne, place your logo text on two separate text layers.
12、在這兒，為LOGO，我準備了由糖果手杖圖示修改而成的Candy Cane Heart。使用的字型Androgyne，兩個單獨的文本層的标志文字。
13. On your “Rachel’s” layer, insert the following blending options:
13、在您的Rachel’s文字圖層，将下面的混合選項：
漸變編輯器的顔色： #AE1B3F和#F9255A
14. On your “Candyland” layer, use the same drop shadow you used on the “Rachel’s” text layer. You will have something that looks like this:
14、CANDYLAND的文字層，使用和Rachel’s文字圖層相同的投影。您的作品看起來像這樣：
15. Now we will move onto our user account bar that will float to the right. Using your Rounded Rectangle Tool (U) with a radius of 10px, and a foreground of #BC3D56, make a rectangle that is similar to the following:
15、現在，我們将移動到我們浮動到右側的的使用者的導航欄，。使用圓角矩形工具（U），半徑設定為10px，前景色設定為： #BC3D56，畫一個圓角矩形（570，75，437，36），它類似于下面的：
16. We want to add a highlight around our Rounded Rectangle next. To do so we want to Command+Click our thumbnail of our Rounded Rectangle in our Layers Palette to make it an active selection. Then go to “Select>Modify>Contract” and input 1 in the dialog box. Fill your selection with #FFFFFF on a new layer, and then contract it by 1 again and go to “Edit>Clear”. You will be left with a white line that looks like this:
16、我們要圍繞我們的圓角矩形添加一圈高光。要做到這一點，我們要在我們的圖層面闆上Ctrl+Click圓角矩形的縮略圖，獲得一個選區。然後點選：選擇 > 修改 > 收縮，在對話框輸入1。建立圖層，用#FFFFFF填充選區，然後再次收縮1，點選：編輯 > 清除。你将留下一條白線，看起來像這樣：
17. Change the blend mode to Soft Light on this layer, and then lower the opacity to around 38%. Now add the following blending options to your highlight layer:
17、在該圖層上混合模式更改為柔光，然後不透明度降低至約38%。現在向您高光圖層添加下列混合選項：
漸變編輯器的顔色： #FFFFFF和#C81243
18. Add some text to symbolize links with the color #FDDCE3, and you’ll have something that looks like this:
18、添加一些連結文本，顔色： #FDDCE3，你的作品看起來像這樣：
19. Now we need to create a search field. Using your Pen Tool, create a shape that looks like the following with a foreground of #72A0E5.
19、現在我們需要建立一個搜尋區域。使用鋼筆工具，建立一個如下所示的形狀，顔色：#72A0E5。
20. Use Command+J to duplicate your shape and then go to Edit>Transform>Flip Horizontal and align it in the following way. Once you have it like you want it, select both layers and right click. Choose Merge Layers from the drop down menu:
20、使用Ctrl + J 複制您的形狀，然後點選：編輯 > 變換 > 水準翻轉，按照下面的對齊方式對齊。選擇這兩個圖層，并右鍵單擊。在彈出菜單中選擇合并圖層：
由于不善于使用鋼筆工具，于是用下面的方法做出類似的效果
用圓角矩形工具，半徑設定為50px，建立一個圓角矩形（730，0，224，75），顔色： #72A0E5
用直接選擇工具選擇左下角的兩個點（選點的時候按Shift鍵），按Ctrl+T進行變換，選擇左下角的點為控制點，右鍵選擇水準翻轉
對右下角進行同樣的操作，使得結果如下：
按Ctrl+T進行自由變換，調整該形狀到合适的高度，并右鍵選擇透視，調整到合适的形狀
21. Now add the following blending options to your search box:
21、現在，将下列混合選項添加您的搜尋框中：
22. All that is left for the search box is to add an input field with your Rounded Rectangle Tool with a 5px radius. I then used a magnifying glass icon from the NIXUS icon pack.
22、搜尋框中，剩下的就是用圓角矩形工具，半徑為5px，添加一個輸入框（753，45，178，25）。然後，添加 NIXUS 圖示包中的放大鏡圖示。并輸入文字，文字的顔色： #acacac
23. The last area of our header is our main site navigation. Using your favorite Rectangle Tool, make a black rectangle that looks like the following for the back of your navigational menu. Our first link “Candy” is going to be #FFFFFF, while our non-active links will be #FDDCE3. The font used for the links is called “Chalkboard”.
23、我們頭部區域的最後一個是我們網站主導航。使用您喜愛的矩形工具，建立類似于下面的的導航菜單的背面的黑色矩形（120，154，960，48）。我們的第一個活動的連結Candy的顔色： #FFFFFF，而我們非活動連結的顔色： #FDDCE3。用于連結的字型被稱為Chalkboard，實際上是Chalkboard Bold字型，和Chalkboard字型差别還是很大的。
24. For our active tab, we want to make a Rectangle in a similar shape as the following. The color doesn’t matter as we will be adding a gradient to it later:
為我們的活動頁籤，添加一個矩形（128，145，138，57）。顔色并不重要，我們将在後面的步驟裡添加一個漸變
25. Now on your tab layer, add the following blending options to give it a nice gradient.
25、現在您頁籤圖層上添加以下的混合選項，給它一個漂亮的漸變。
漸變編輯器的顔色： #336FC1和#4E8DE3
26. To add a little extra detail to our tab, we want to cut out a little chunk on the top. Using your Polygonal Lasso Tool (L), make a selection similar to the following and then choose “Select>Inverse”. Then hit the layer mask icon in the layers palette with your tab layer selected.
要向我們頁籤添加一點額外的修飾，我們想要剪出一小塊的頂部。使用多邊形套索工具 (L)，畫出與下面類似的選區，然後點選：選擇 > 反相。然後選中你的您的頁籤圖層，點選圖層面闆中的添加圖層蒙版圖示。
27. The final touch will be to add a white highlight around the edge like we did for our account links section in step 16. We will then set it to Soft Light, and then lower the opacity to about 62%.
27、最後就像帳戶連結部分的步驟 16 一樣添加白色高光在邊緣周圍。我們然後将其設定為柔光，然後降低至約 62%的不透明度。
補充，先複制圖層，然後栅格化圖層、轉為智能圖層、栅格化圖層。再用步驟16的方法
28. The last step for our header is to add our Candy Cane effect under the navigation. Using your favorite Rectangle Tool again make a rectangle that looks like the following:
28、頭部區域的最後一步是添加導航下的我們糖蔗效果。使用您最喜歡的矩形工具再次建立矩形（120，202，960，9），如下所示：
29. Now add the following blending options to your layer:
29、現在将下面的混合選項添加到你的圖層：
漸變編輯器的顔色： #6692d4和#72a0e5
30. To achieve our candy cane lines, we want to create another pattern. So to do so we want to create a new document with the dimensions of 600×600. Create a new layer and delete your background layer so you are left with a transparent document. Then add a bunch of rectangles in the following manner (I made my background black so you can see better, but yours will be transparent):
30、為了實作我們的糖蔗線，我們想要建立另一個圖案。是以，我們想要用 600 × 600 的尺寸建立一個新文檔。建立一個新圖層，并删除您背景圖層，是以你還剩下一個透明的文檔。然後按以下方式添加一束矩形 （我使我的背景黑色，是以你可以看得更清楚，但你将使用透明的）：
31. Then go to “Edit>Define Pattern” and name it stripes. Close out of your stripes file, and then go back to your template now. Command+Click your Candy Canes background to make it an active selection, and then use your Pattern Stamp Tool to brush your newly created pattern on a layer above:
31、然後點選：編輯 > 定義圖案，并将其命名的條紋。關閉您的條紋的檔案，然後傳回到您的文檔。Command + Click您的矩形形成選區，然後使用您圖案圖章工具在圖層上重新整理，形成背景：
32. Change the blend mode to Overlay, and the lower the opacity to 28% and your completed header will look like the following:
更改混合模式為疊加和不透明度到28%和您已完成标頭将如下所示：
這一步的原教程中的說得簡單，嘗試了很久，又不容易成功，故改用另一種方法試試
建立文檔，尺寸：40px*9px，背景設定為透明。用矩形工具建立一個矩形（0，0，20，9）
按Ctrl+T自由變形，右鍵選擇斜切，調整矩形如下圖所示：
點選：編輯 > 定義圖案，并将其命名的條紋。
回到主文檔，按Ctrl+單擊之前的長條矩形，建立圖層，用任意色填充，把填充改為0%。并對該圖層添加如下的圖案疊加的圖層樣式
33. The content area will rely mostly on placement of images and text, and keep things simple. We will have a white background, and use the color #28140D for our body text, #AF3F55 for headings, and #5987CB for our links.
33、内容區将主要放置圖像和文本。我們将有一個白色的背景，正文的文字顔色： #28140D，标題文字用的顔色： #AF3F55，連結的顔色： #5987CB
34. The last step is adding a footer. Using your Rounded Rectangle Tool with a radius of 15px, make a shape that looks like the following under your content layers:
34、最後一步添加頁腳。使用15像素半徑的圓角矩形工具，建立一個圓角矩形（120，817，960，66），使您内容層下如下所示的形狀：
35. Now add the following blending options to your newly created Rounded Rectangle layer:
35、現在到新建立的圓角矩形圖層添加下列混合選項：
漸變編輯器的顔色： #EE3C66、#C81243
36. I then proceeded to use the same candy cane effect we used in the navigation to add stripes to our footer. I changed the blend mode to Soft Light, and lowered the opacity to 15% this time.
36、接着，使用我們在導航中使用相同的糖果甘蔗效果将添加到我們的頁腳的條紋。一改混合模式為柔光，和這次降至 15%的不透明度。
37. All that is left now is to add some text and any icons in your footer and your final result will look something like the following:
37、剩下的就現在是添加一些文本和頁腳和您的最終結果的任何圖示看起來如下所示：
最終的作品：
後記：
這是一篇風格迥異的教程。該教程中的這幾個方面是個特色：一是風輪效果，原教程中是用網上下載下傳的畫刷，我改成自己制作；二是獨特的圖案疊加效果；三是有趣的糖遮效果
本文轉自萬倉一黍部落格園部落格，原文連結：http://www.cnblogs.com/grenet/archive/2012/11/28/2744661.html，如需轉載請自行聯系原作者