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、剩下的就現在是添加一些文本和頁腳和您的最終結果的任何圖標看起來如下所示：

 

最終的作品：

 

後記：

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

    本文轉自萬倉一黍博客園博客，原文鏈接：http://www.cnblogs.com/grenet/archive/2012/11/28/2744661.html，如需轉載請自行聯繫原作者