PS網頁設計教程XX——在Photoshop中建立一個七彩糖果店網站布局

作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁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、剩下的就現在是添加一些文本和頁尾和您的最終結果的任何表徵圖看起來如下所示：

 

最終的作品：

 

後記：

這是一篇風格迥異的教程。該教程中的這幾個方面是個特色：一是風輪效果，原教程中是用網上下載的畫刷，我改成自己製作；二是獨特的圖案疊加效果；三是有趣的糖遮效果