PS網(wǎng)頁(yè)設(shè)計(jì)教程III——在Photoshop中設(shè)計(jì)優(yōu)雅的

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

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

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

4、 > 高斯模糊，半徑設(shè)置為35pxStep 3From Premium Files, available to our Premium Members I will use Hand Drawn Vector Ornaments and I will add an element on my document. I will lower the opacity to 4% also步驟3在Premium Files, 到達(dá)我們的 Premium Members ，我將用 Hand Drawn Vector Ornaments 里的圖案放在我的文檔里 把它的不透明度調(diào)到4%Step 4Ne

5、xt I will select Rectangle Tool and I will create this 3 shapes at the top:步驟4接下來(lái)，用矩形工具在頂部創(chuàng)建3個(gè)矩形。3個(gè)矩形高度為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 “Elegan

6、t” I have applied this layer styles:步驟5用文字工具添加文字elegant website，對(duì)下面的標(biāo)志行添加文字a design by trendyTUTS。字體用Ariston，48號(hào)字。對(duì)Elegant添加下面的圖層樣式：顏色疊加：顏色： #c7c1c1For “Website” this layer styles:對(duì)website添加如下的圖層樣式：顏色疊加：顏色： #d38475My result:結(jié)果如下：Step 6On this step Ill make use of our Premium Files again. This time f

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

8、add some text on the right side. I will 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 Too

9、l selected I will create another shape 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)建另一個(gè)矩形在剛才矩形的頂部。我為了示范建議用紅顏色。當(dāng)您創(chuàng)建此矩形，您將需要使用顏色： #e5e4e4跟著教程走，也先用紅顏色，再改成#e5e4e4，矩形（70，223，8

10、82，40）Step10Make sure that the layer 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:請(qǐng)確保剛才新建的矩形圖層被選中的狀

11、態(tài)，用直接選擇工具拖動(dòng)矩形的左下角，看屏幕快照：拖動(dòng)的時(shí)候按住shift，可以保持水平不動(dòng)，結(jié)合信息面板上的提示，可以完美的拖動(dòng)成45度角用同樣的方式，拖動(dòng)矩形的右下角，再將顏色改回#e5e4e4，結(jié)果如下：Step 11With Rectangle Tool I will create this shape. Color used: # d67474步驟11用矩形工具創(chuàng)建一個(gè)矩形（76，187，870，76），顏色： #d67474Step 12With Ellipse Tool I will create this shape:步驟12用橢圓工具創(chuàng)建如下的橢圓：And I will app

12、ly a Gaussian Blur of about 34px. My result然后對(duì)橢圓添加高斯模糊，半徑設(shè)置為34px（個(gè)人覺(jué)得半徑8px比較合適，不知為什么，他的參數(shù)就基本上什么都看不到了），結(jié)果如下Step 13I will surround the navigation with this sign “”. To create a nice effect I will apply this layer styles:步驟13我將符號(hào)“-”圍繞著導(dǎo)航欄一圈，為了漂亮，添加如下的圖層樣式：用文字工具，調(diào)整字符間距，以達(dá)到虛線框的效果My result結(jié)果如下Step 14With

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

14、ith rectangle Tool I will create this 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用矩形工具在頁(yè)面的中部創(chuàng)建矩形（36，552，950，5

15、0），確保矩形的圖層處于被選中的狀態(tài)，用直接選擇工具，拖動(dòng)矩形的左上角，請(qǐng)參考下圖：I will proceed in the same way for the right corner, then I will apply this layer styles:用同樣的方法調(diào)整矩形的右邊，然后添加如下的圖層樣式：漸變編輯器的三個(gè)顏色從左至右分別為：#f4f4f4，#fefefe，#ffffffStep 17With Rectangle Tool I will create another shape and I will apply this layer styles:步驟17用矩形工具創(chuàng)建另

16、一個(gè)矩形（36，602，950，438），然后添加如下的圖層樣式：漸變編輯器的顏色從左只有分別為： #f6f6f6，#ffffff，#ffffffStep 18With Pen Tool I will create this triangles at the bottom of the shape created on Step 15用鋼筆工具在剛才的白色的矩形底部創(chuàng)建兩個(gè)三角形I will apply a Gaussian Blur of about 40px.對(duì)兩個(gè)三角形添加高斯模糊，參數(shù)：40px My result結(jié)果如下：Step 19Next Ill make use of Pre

17、mium Files. From Universal Vector Icons 2, I will add a Light Bulb and from Hand Drawn Vector Ornaments, I will use some ornaments.步驟19接下來(lái)要從Premium Files上的Universal Vector Icons 2，從中添加燈泡圖案，并且從Hand Drawn Vector Ornaments上添加一些花紋。Step 20With Type Tool I will add some text步驟20用文字工具添加一些文字Step 21To enhanc

18、e the title “We Bring Ideas to Life” I have 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對(duì)標(biāo)題文字We Bring Ideas to Life，用兩種字體：Arial 和 Ariston。字號(hào)：44px，對(duì)標(biāo)題文字添加內(nèi)投影，參數(shù)如圖，顏色： #bbb7b

19、6。添加6條直線（3條在標(biāo)題的左邊，3條在標(biāo)題的右邊），對(duì)這些直線添加如下的圖層樣式：內(nèi)陰影：顏色：#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個(gè)三角形，并對(duì)它們進(jìn)行高斯模糊，參數(shù)10pxStep 23On the top of the triangles created on Step 21, with Rectangle Tool I will create this s

20、hape and I will apply this layer styles.步驟23在剛才的陰影上方，用矩形工具創(chuàng)建矩形（720，518，184，56），并添加如下的圖層樣式：參考樣張，似乎應(yīng)該是圓角矩形工具，我給的半徑參數(shù)是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

21、I will add some text步驟24保持矩形工具選擇狀態(tài)，在剛才的矩形的上方創(chuàng)建一個(gè)新的矩形，添加如下的圖層樣式，并添加一些文字參考樣張，還是用圓角矩形，直接復(fù)制剛才的圖層，然后自由變換，各自縮進(jìn)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 w

22、ill draw 2 identical lines, than with Free Transform Tool (Ctrl + T) I will arrange them to create an arrow. I will apply this layer styles also:步驟25因?yàn)橐胘query顯示幻燈片，我們將創(chuàng)建左右的箭頭。我將選擇直線工具，設(shè)置10px的粗細(xì)， 畫2條相同的直線，然后用自由變換工具 (Ctrl + T)排列它們，以創(chuàng)建一個(gè)箭頭。我還將運(yùn)用如下的圖層樣式：這兩個(gè)箭頭還是頗費(fèi)了一番功夫，目前采用的方法是，先用直線工具畫一條水平直線，長(zhǎng)度40px，Ctrl+J復(fù)制圖層，將復(fù)制的圖層順時(shí)針旋轉(zhuǎn)90度。微調(diào)這兩條直線，使得左上角重合。然后合并圖層，再逆時(shí)針旋轉(zhuǎn)45度。再Ctrl+T自由變換，高度調(diào)整為原來(lái)的94%左右。再添加如下的樣式。做好一個(gè)箭頭后，Ctrl+J復(fù)制圖層，水平翻轉(zhuǎn)，得到另一個(gè)箭頭。再調(diào)整箭頭到合適的位置。顏色疊加：顏色： #c7c1c1Step 26Now I will create the content area. I will select Type Tool and I will