PS網頁設計教程在Photoshop中設計優(yōu)雅的網站布局設計

1、PS網頁設計教程III在Photoshop中設計優(yōu)雅的網站布局設計作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。本系列的教程來源于網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優(yōu)秀的教程。因為翻譯能力有限，翻譯的細節(jié)上還有待推敲，希望廣大網友不吝賜教。約定：1、本文的軟件是Photoshop CS5版本2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數

2、例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優(yōu)化等。Lets start the tutorial.Open Photoshop and create a new document 1020 by 1100px讓我們開始教程打開Photoshop，新建一個文檔，尺寸：1020*1100pxNext select Rectangle Tool and create a large rectangl

3、e over your document. I have used this color: #e5e4e4接下來用矩形工具創(chuàng)建一個覆蓋整個文檔的矩形，顏色： #e5e4e4這一步可以斟酌一下，個人覺得用油漆桶工具比較好Step 1I will select ellipse tool and I will create this white shape步驟1選擇橢圓工具創(chuàng)建如下的白色橢圓Step 2I will go to FilterBlurGaussian Blur and I will apply a radius of about 35px步驟2用濾鏡 模糊 高斯模糊，半徑設置為35px

4、Step 3FromPremium Files, available to ourPremium MembersI will useHand Drawn Vector Ornamentsand I will add an element on my document.I will lower the opacity to 4% also步驟3在Premium Files, 到達我們的Premium Members，我將用Hand Drawn Vector Ornaments里的圖案放在我的文檔里把它的不透明度調到4%Step 4Next I will select Rectangle Tool

5、 and I will create this 3 shapes at the top:步驟4接下來，用矩形工具在頂部創(chuàng)建3個矩形。3個矩形高度為6px，顏色分別為： #cdaeac、#ad8b8a、#a18280Step 5With Type Tool I will write “Elegant Website” and as a tagline I will use “a design by trendyTUTS”. The font used is Ariston, with 48pt in size.For “Elegant” I have applied this layer sty

6、les:步驟5用文字工具添加文字elegant website，對下面的標志行添加文字a design by trendyTUTS。字體用Ariston，48號字。對Elegant添加下面的圖層樣式：顏色疊加：顏色： #c7c1c1For “Website” this layer styles:對website添加如下的圖層樣式：顏色疊加：顏色： #d38475My result:結果如下：Step 6On this step Ill make use of ourPremium Filesagain. This time from Universal Vector Icons 2, Ill

7、select a badge icon and I will add it on my document.步驟6在這一步，我又要訪問Premium Files。這次用Universal Vector Icons 2，選擇badge icon添加到我的文檔中。I will apply the following layer styles to my badge:對剛才的圖標添加下面的圖層樣式：顏色疊加：顏色： #d2d2d2Here is my result:結果如下：Step 7With Type Tool I will add some text on the right side. I w

8、ill write “Call us 1-800-elegant”步驟7用文字工具在右邊添加call us 1-800-elegant。其中call us和之前的elegant圖層樣式一樣，1-800-elegant和之前的website圖層樣式一樣。Step 8I will use Rectangle Tool and I will create this black shape.步驟8用矩形工具添加如下的黑色矩形。（0，223，1020，65） 顏色： #636363Step 9Having Rectangle Tool selected I will create another sha

9、pe on the top of the shape created Step 6. I have used a red color just for demonstration proposes. When you create this shape you will need to use this color: # e5e4e4步驟9用矩形工具創(chuàng)建另一個矩形在剛才矩形的頂部。我為了示范建議用紅顏色。當您創(chuàng)建此矩形，您將需要使用顏色： #e5e4e4跟著教程走，也先用紅顏色，再改成#e5e4e4，矩形（70，223，882，40）Step10Make sure that the layer

10、 of the shape created on step 8 is selected on your layer palette,select Direct Selection Tool and drag a little bit from the bottom left corner of the shape. Please see the screenshot:Proceed in the same way for the right side. Here is my result:請確保剛才新建的矩形圖層被選中的狀態(tài)，用直接選擇工具拖動矩形的左下角，看屏幕快照：拖動的時候按住shift

11、，可以保持水平不動，結合信息面板上的提示，可以完美的拖動成45度角用同樣的方式，拖動矩形的右下角，再將顏色改回#e5e4e4，結果如下：Step 11With Rectangle Tool I will create this shape. Color used: # d67474步驟11用矩形工具創(chuàng)建一個矩形（76，187，870，76），顏色： #d67474Step 12With Ellipse Tool I will create this shape:步驟12用橢圓工具創(chuàng)建如下的橢圓：And I will apply a Gaussian Blur of about 34px. My

12、 result然后對橢圓添加高斯模糊，半徑設置為34px（個人覺得半徑8px比較合適，不知為什么，他的參數就基本上什么都看不到了），結果如下Step 13I will surround the navigation with this sign “”. To create a nice effect I will apply this layer styles:步驟13我將符號“-”圍繞著導航欄一圈，為了漂亮，添加如下的圖層樣式：用文字工具，調整字符間距，以達到虛線框的效果My result結果如下Step 14With Type Tool I will add the text for na

13、vigationI have used Ariston font with 24px in size步驟14用文字工具在導航欄上添加一些文本，字體Ariston，大小24px為了和樣張一樣，還對文字增加了投影的設置：Step 15With Pen Tool I will create this arrow wich it will act as an selector for navigation.步驟15用鋼筆工具創(chuàng)建導航欄上菜單被選中時的三角箭頭。用多邊形工具，將邊數改成3，創(chuàng)建三角形可能還更方便一點Step 16With rectangle Tool I will create this

14、 shape on the middle of the page. Make sure that the layer of the shape created is selected on your layer palette, select Direct Selection Tool and drag a little bit from the top left corner of the shape. Please see the screenshot:步驟16用矩形工具在頁面的中部創(chuàng)建矩形（36，552，950，50），確保矩形的圖層處于被選中的狀態(tài)，用直接選擇工具，拖動矩形的左上角，請

15、參考下圖：I will proceed in the same way for the right corner, then I will apply this layer styles:用同樣的方法調整矩形的右邊，然后添加如下的圖層樣式：漸變編輯器的三個顏色從左至右分別為：#f4f4f4，#fefefe，#ffffffStep 17With Rectangle Tool I will create another shape and I will apply this layer styles:步驟17用矩形工具創(chuàng)建另一個矩形（36，602，950，438），然后添加如下的圖層樣式：漸變編輯

16、器的顏色從左只有分別為： #f6f6f6，#ffffff，#ffffffStep 18With Pen Tool I will create this triangles at the bottom of the shape created on Step 15用鋼筆工具在剛才的白色的矩形底部創(chuàng)建兩個三角形I will apply a Gaussian Blur of about 40px.對兩個三角形添加高斯模糊，參數：40pxMy result結果如下：Step 19Next Ill make use ofPremium Files. From Universal Vector Icons

17、 2, I will add a Light Bulb and fromHand Drawn Vector Ornaments, I will use some ornaments.步驟19接下來要從Premium Files上的Universal Vector Icons 2，從中添加燈泡圖案，并且從Hand Drawn Vector Ornaments上添加一些花紋。Step 20With Type Tool I will add some text步驟20用文字工具添加一些文字Step 21To enhance the title “We Bring Ideas to Life” I h

18、ave used 2 type of fonts: Arial and Ariston. I have used also 6 lines (3 on the left and 3 on the right side of the title). For this lines I have applied this layer styles:步驟21對標題文字We Bring Ideas to Life，用兩種字體：Arial 和 Ariston。字號：44px，對標題文字添加內投影，參數如圖，顏色： #bbb7b6。添加6條直線（3條在標題的左邊，3條在標題的右邊），對這些直線添加如下的圖層

19、樣式：內陰影：顏色：#797979顏色疊加：顏色： #fbfbfbStep 22With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px步驟22用鋼筆工具創(chuàng)建2個三角形，并對它們進行高斯模糊，參數10pxStep 23On the top of the triangles created on Step 21, with Rectangle Tool I will create this shape and I will apply this layer styles.

20、步驟23在剛才的陰影上方，用矩形工具創(chuàng)建矩形（720，518，184，56），并添加如下的圖層樣式：參考樣張，似乎應該是圓角矩形工具，我給的半徑參數是10顏色疊加：顏色： #e7e7e7Step 24Having Rectangle Tool still selected, I will create another shape on the top of the shape created on Step 22, I will apply this layer styles and with Type Tool I will add some text步驟24保持矩形工具選擇狀態(tài)，在剛才的矩

21、形的上方創(chuàng)建一個新的矩形，添加如下的圖層樣式，并添加一些文字參考樣張，還是用圓角矩形，直接復制剛才的圖層，然后自由變換，各自縮進14px。文字的顏色和樣式和之前步驟19中的文字一致。漸變疊加，顏色分別為：#f6f6f6，#ffffffStep 25Because this area it will be a jquery slideshow, we will need to create the arrows as well. I will select Line Tool with 10px weight I will draw 2 identical lines, than with Fr

22、ee Transform Tool (Ctrl + T) I will arrange them to create an arrow. I will apply this layer styles also:步驟25因為要用jquery顯示幻燈片，我們將創(chuàng)建左右的箭頭。我將選擇直線工具，設置10px的粗細， 畫2條相同的直線，然后用自由變換工具 (Ctrl + T)排列它們，以創(chuàng)建一個箭頭。我還將運用如下的圖層樣式：這兩個箭頭還是頗費了一番功夫，目前采用的方法是，先用直線工具畫一條水平直線，長度40px，Ctrl+J復制圖層，將復制的圖層順時針旋轉90度。微調這兩條直線，使得左上角重合。然后合并圖層，再逆時針旋轉45度。再Ctrl+T自由變換，高度調整為原來的94%左右。再添加如下的樣式。做好一個箭頭后，Ctrl+J復制圖層，水平翻轉，得到另一個箭頭。再調整箭頭到合適的位置。顏色疊加：顏色： #c7c1c1Step 26Now I will create the content area. I will select Type Tool and I will write “Latest Project”. I have applied this layer styles:步驟26