作者:佚名　  出處:yeeyan

 

這個(gè)Photoshop web設(shè)計(jì)的教程中，我們將學(xué)習(xí)設(shè)計(jì)一個(gè)整潔的具有現(xiàn)代氣息的web站點(diǎn)。這是設(shè)計(jì)和HTML/CSS模板轉(zhuǎn)換系列教程的第一部分。

• 第一部分: 用Photoshop設(shè)計(jì)一個(gè)小型、現(xiàn)代的產(chǎn)品主頁(yè)
• 第二部分: 將小型、現(xiàn)代的產(chǎn)品主頁(yè)由psd轉(zhuǎn)換成XHTML/CSS模板

預(yù)覽

以下是我們將要一些設(shè)計(jì)的頁(yè)面預(yù)覽，點(diǎn)擊圖片可以放大。

 

建立一個(gè)新的Photoshop文檔

1 首先在Photoshop中新建一個(gè)文檔（Ctrl+N），大小為1200 x 1200像素，背景設(shè)為透明。

設(shè)置頭部背景

2 使用矩形選定工具在透明的背景上畫(huà)出一個(gè)矩形，矩形大小：1200px ×120px

3 使用油漆桶工具（G）用任意顏色填充頭部剛才選定區(qū)域。點(diǎn)開(kāi)圖層樣式對(duì)話(huà)框，用以下設(shè)置來(lái)增加一個(gè)漸變疊加效果。

完了，應(yīng)該出現(xiàn)以下效果：

創(chuàng)建內(nèi)容部分的背景圖層

4 現(xiàn)在我們將要?jiǎng)?chuàng)建圖層內(nèi)容區(qū)域的第二部分背景。把前景色設(shè)為#00315C，背景色設(shè)為#001B32。選擇矩形框選定工具（M）選定剩下的透明圖層；選定后，選擇漸變工具（G）,然后設(shè)置漸變類(lèi)型為徑向漸變。

5 設(shè)定好漸變工具（G）后，從頂部的中間垂直的拖動(dòng)到畫(huà)布的4/1大小左右。

添加參考線(xiàn)

6 現(xiàn)在我們需要一些參考線(xiàn)保留出寬度為850px的中間內(nèi)容部分。選擇視圖 > 新建參考線(xiàn)。在新建參考線(xiàn)對(duì)話(huà)框中輸入175px，取向選擇垂直。這樣一個(gè)畫(huà)布左邊的參考線(xiàn)就做好了。

7 重復(fù)6的步驟，創(chuàng)建另外一條垂直參考線(xiàn)，不過(guò)這次輸入1025px (175px + 850px = 1025px)。這樣一個(gè)850px寬、居中的區(qū)域就做好了。

設(shè)計(jì)頭部區(qū)域

8 選擇橫排文字工具（T），然后對(duì)其左邊參考線(xiàn)邊沿添加上頁(yè)面標(biāo)題和標(biāo)語(yǔ)。

9 在標(biāo)題文本圖層下面創(chuàng)建一個(gè)新圖層，選定矩形選框工具（M），在頭部選取出一個(gè)區(qū)域。寬度必須填滿(mǎn)1200px，高度大概在60px左右。

10 用白色（#FFFFFF）填充（G）選定區(qū)域，然后在圖層面板中設(shè)置透明度為25%。效果如下。

創(chuàng)建導(dǎo)航

11 選擇橫排文字工具（T），字體大小設(shè)定為11-12px左右。然后在標(biāo)題和標(biāo)示右邊加入導(dǎo)航文字；沒(méi)菜單項(xiàng)之間留出等寬的邊距。

12 在每個(gè)菜單項(xiàng)之間使用矩形選框工具（M）做一個(gè)1px寬的分割線(xiàn)；長(zhǎng)度跨越整個(gè)頭部。用#CECECE顏色填充（G）這1px的線(xiàn)條。效果如下圖。

13 現(xiàn)在，我們?cè)诿總€(gè)菜單項(xiàng)中加入鼠標(biāo)懸停動(dòng)態(tài)效果（hover）。我已經(jīng)給其中一個(gè)菜單項(xiàng)加入顏色表示鼠標(biāo)懸停時(shí)的效果。使用多邊形套索工具（L）按住shift，創(chuàng)建一個(gè)三角形，以保證每條線(xiàn)都是直的。

14 用#00315C這個(gè)顏色填充選定的三角形區(qū)域

創(chuàng)建歡迎區(qū)域

15 選擇橫排文字工具（T）,加入一些歡迎標(biāo)語(yǔ)；同樣左邊距緊貼左參考線(xiàn)，然后在上面的頁(yè)面標(biāo)題和下面的歡迎文本中留出一定的空間。文本下面加入4個(gè)藍(lán)色的列表圖標(biāo)。這個(gè)圖標(biāo)是 Function Icon Set 里面的（文件名是circle_blue.png）。

16 在歡迎文本的右邊將插入一個(gè)歡迎圖片；我這里使用的是Six Revisions網(wǎng)站界面裁圖。裁剪你的圖片，去掉不需要的部分。圖片準(zhǔn)備好之后，通過(guò)編輯 > 變換 > 透視 改變圖片的視角。

17 選擇橢圓選框工具，然后在歡迎圖片下方畫(huà)一個(gè)橢圓。

18 用黑色（#000000）填充（G）橢圓選定區(qū)域。

19 然后設(shè)置區(qū)域圖層透明度為35%。

20 然后使用濾鏡 > 模糊 > 高斯模糊這個(gè)橢圓，設(shè)定模糊半徑為1到2px。

21 把歡迎圖片和下面的陰影再?gòu)?fù)制一份，然后把它們拖動(dòng)到原圖片的下面。

22 位置拖動(dòng)好之后，使用高斯模糊下面的裁圖，半徑為1px。

創(chuàng)建水平3D分割線(xiàn)

23 選擇矩形選框工具（M）層疊的創(chuàng)建兩個(gè)1px的線(xiàn)條；寬度為850px，從左參考線(xiàn)到右參考線(xiàn)。你可以將兩個(gè)線(xiàn)條放在同一個(gè)圖層。

24 分別使用顏色#000D19和#003461填充這兩個(gè)線(xiàn)條。

25 選擇橢圓選框工具（M）然后在分割線(xiàn)上面畫(huà)出一個(gè)橢圓。

26 使用黑色（#000000）填充（G）選定區(qū)域，加上2到3px的高斯模糊。然后使用矩形選框工具刪掉分割線(xiàn)上半部分，這樣就剩下了半個(gè)橢圓。

27 將這兩個(gè)圖層合并（Ctrl+E），然后添加一個(gè)圖層蒙版（點(diǎn)擊圖層面板上的“添加圖層蒙版”按鈕）來(lái)合并圖層。

28 使用漸變工具（G）,漸變類(lèi)型為對(duì)稱(chēng)漸變，前景色設(shè)為白色（#FFFFFF）,背景色設(shè)置黑色（#000000）。

29 拖動(dòng)對(duì)稱(chēng)漸變，從分割線(xiàn)中間向兩邊拖動(dòng)，從而產(chǎn)生中間向兩邊淡入效果。

設(shè)計(jì)內(nèi)容區(qū)域

30 選擇橫排文字工具（T）在3D分割線(xiàn)下方，右分割線(xiàn)的左邊加入任意的文字標(biāo)題和段落。

31 使用圓角矩形工具（U）在內(nèi)容文本區(qū)域的左邊創(chuàng)建一個(gè)圓角矩形；半徑設(shè)為10px（默認(rèn)情況下背景是10px）。

32 路徑畫(huà)好之后，選擇鋼筆工具（P），右擊矩形內(nèi)部，選擇建立選區(qū)。

33 設(shè)置前景色為#00315C，背景色為#001B32 ，然后選擇漸變工具（G），漸變類(lèi)型為徑向漸變。

34 從頂部把漸變拖動(dòng)到中間，和我們繪制背景方法相同。效果如下圖。

35 現(xiàn)在需要給圓角矩形圖層加入投影、內(nèi)陰影和描邊的圖層樣式（雙擊圖層面板上面的圖層，打開(kāi)圖層樣式對(duì)話(huà)框）。設(shè)置如下。

36 使用多邊形套索工具（L），然后在矩形上面做一個(gè)三角形的選區(qū)。

37 剪切并復(fù)制選區(qū)到一個(gè)新圖層，一般這樣做將會(huì)丟失掉選取的圖層樣式，所以在這之前我們必須給右下角圖層重復(fù)添加一次樣式。

38 通過(guò)編輯 > 變換 > 旋轉(zhuǎn)給邊角圖層翻轉(zhuǎn)180度；

39 加入一些任意文字以完成內(nèi)容框的繪制。

創(chuàng)建頁(yè)腳區(qū)域

40 選擇圓角矩形工具（U）在也叫拖動(dòng)出一個(gè)圓角矩形。

41 使用任意顏色來(lái)填充這個(gè)圓角矩形選區(qū)，選區(qū)加入如下樣式的漸變疊加效果。

42 最后，加上頁(yè)腳信息就大功告成了。

完成

謝謝閱讀本教程。下個(gè)教程中，我將教大家把該頁(yè)面轉(zhuǎn)成模板。