這此photoshop網(wǎng)頁(yè)設(shè)計(jì)教程,我們將學(xué)習(xí)如何制作一個(gè)整潔簡(jiǎn)約風(fēng)格的WordPress網(wǎng)頁(yè)模板.我們將使用到960網(wǎng)格系統(tǒng)作為模板,使網(wǎng)頁(yè)上的設(shè)計(jì)元素更加容易對(duì)齊.

預(yù)覽(創(chuàng)作之前先預(yù)覽我們將完成的作品效果,點(diǎn)擊圖片放大.)

創(chuàng)建新的psd文件

1 我們將會(huì)用到960 網(wǎng)格系統(tǒng)作為起始模板.下載之后開(kāi)的文件名為960_grid_12_col.psd 的文件并且隱藏名為12_col_grid的組.

創(chuàng)建背景

2 第一步,在圖層面板選擇背景圖層單擊右鍵重命名,這將會(huì)使圖層解鎖并且可以編輯,在這里我將背景圖層命名為bg.

3 選擇漸變工具,設(shè)置前景色為: #efefef ,背景色為#cacaca.在選項(xiàng)條選擇徑向漸變.在畫(huà)步上拉開(kāi)一個(gè)與此類(lèi)似的漸變.

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

4 拖動(dòng)一條水平的參考線(xiàn)到50px的位置上作為頭部的邊界線(xiàn).這也是網(wǎng)頁(yè)頭部區(qū)域位置的標(biāo)志.

5 加上標(biāo)題和口號(hào);選擇橫排文字工具,打上你網(wǎng)站的名字和宣傳口號(hào).這里可以可以參考我用到的樣式:

“YourName”

字體: Nilland font (get it from dafont.com)

字體大小: 33pt

字體重量: Bold

反鋸齒設(shè)置: 渾厚

顏色: #525252

“some awesome slogan”

字體: Arial

字體大小: 14pt

字體重量: Regular

反鋸齒設(shè)置: 渾厚

顏色: #207687

6 將字體對(duì)齊到左上角.使用你的參考線(xiàn)精準(zhǔn)定位.

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

7 選擇橫排文字工具根據(jù)以下設(shè)置打上導(dǎo)航文字(home, about us, services, portfolio, and contact):

字體: Arial

字體大小: 17pt

字體重量: Regular

反鋸齒設(shè)置: 渾厚

顏色: #525252

8 根據(jù)下圖使用文件的參考線(xiàn)對(duì)齊導(dǎo)航鏈接的文字:

創(chuàng)建搜索框

9.現(xiàn)在是創(chuàng)建搜索框并將它定位到導(dǎo)航鏈接右側(cè)的時(shí)候了.選擇圓角矩形工具,設(shè)置半徑為5px,然后在畫(huà)面上畫(huà)出一個(gè)寬為155px,高為20px的圖形.最后定位到導(dǎo)航鏈接的右側(cè).

10 選擇圖層面板,雙擊圓角矩形圖層彈出圖層樣式對(duì)話(huà)框添加內(nèi)陰影.設(shè)置如下.

11 創(chuàng)建”go”按鈕,創(chuàng)建一個(gè)新的圓角矩形設(shè)置它的半徑為5px,高位20px,寬為30px.

12 在”go”按鈕上面應(yīng)用圖層樣式為漸變疊加,角度為90,左邊的顏色為#2fa9c1.右邊的顏色#207687.

13.在搜索框上面使用白色(#ffffff)寫(xiě)上類(lèi)似于”search”之類(lèi)的文字.

14 使用自定義工具圖形,創(chuàng)建一個(gè)白色的箭頭并居中對(duì)齊.我使用的自定義圖案為”箭頭2″,在標(biāo)準(zhǔn)的photoshop版本中.

我們的搜索框看起來(lái)應(yīng)該是這樣子的:

15 開(kāi)始下一步之前,首先保證我們文件中的一切保存井然有序.下面是我制作過(guò)程中圖層面板的截屏.

創(chuàng)建分隔線(xiàn)

16 使用直線(xiàn)工具,根據(jù)以下的顏色在頂部創(chuàng)建兩條緊挨著的線(xiàn):

注意:有很多方法可以給線(xiàn)加上顏色,第一種方式你可以在畫(huà)線(xiàn)之前先選擇好顏色.另一種方式,如果你已經(jīng)畫(huà)出線(xiàn)條,使用圖層樣式中的顏色疊加.你可以自己選擇.

加二級(jí)導(dǎo)航

17 根據(jù)以下設(shè)置,使用橫排文字工具鍵入二級(jí)導(dǎo)航文字.

字: Arial

文字大小: 17pt

字體重量: Regular

反鋸齒設(shè)置: Strong

顏色: #787878

18 確保你的分隔線(xiàn)在主欄目和二級(jí)導(dǎo)航的正中央,如圖所示.:

創(chuàng)建焦點(diǎn)區(qū)域

19 我們將開(kāi)始創(chuàng)建圖片的焦點(diǎn)區(qū)域,選擇圓角矩形工具,創(chuàng)建一個(gè)寬帶為335px,高度為128px,圓角半徑為5px的矩形.

20 應(yīng)用圖層屬性中的描邊并設(shè)置填充屬性為漸變.修改漸變顏色從#31aeca開(kāi)始到#2b9ab2結(jié)束.

21 命名最新創(chuàng)建的圖層為 photo_holder.

22 好吧,讓我們選擇文件>置入,添加一張圖片.這將會(huì)彈出一個(gè)對(duì)話(huà)框讓你選擇導(dǎo)入哪種圖片進(jìn)你的畫(huà)布.挑選完圖片,按下確定鍵.

23 確定你置入的圖片在photo_holder 層的上方;如果不是,請(qǐng)移動(dòng)它.在圖片上右鍵選擇創(chuàng)建剪切模板.

24 修改你的圖片到合適大小;你可以使用自由變換工具(Ctrl+T).當(dāng)你對(duì)大小感到滿(mǎn)意.確保您的圖像對(duì)齊根據(jù)上述圖像,對(duì)齊右邊的布局設(shè)計(jì).

增加設(shè)計(jì)內(nèi)容

25 為我們的設(shè)計(jì)增添內(nèi)容,但在此之前,我們不得不為我們的內(nèi)容頁(yè)設(shè)定邊界.拉動(dòng)兩條水平參考線(xiàn)如圖所示:

增加一個(gè)標(biāo)題和一個(gè)分類(lèi)

26 標(biāo)題和分類(lèi)使用如下設(shè)置

標(biāo)題 (在我的例子里稱(chēng)為 ”Handstand!”)

字體: Arial

字體大小: 20pt

文字重量: Regular

反鋸齒: Strong

顏色: #2197b1

目錄 (在我的例子里稱(chēng)為 ”Photoshop design”):

字體: Arial

文字大小: 17pt

文字重量: Regular

反鋸齒: Strong

顏色: #313131

段落內(nèi)容

27 增加你的段落文字,下面的圖片以供參考.

28 在工具面板中選擇移動(dòng)工具,然后選擇我們?nèi)齻€(gè)文字圖層(按住 Ctrl 單擊可以選擇全部).

29 選擇垂直分布選項(xiàng)確保他們有著相同間距.

創(chuàng)建滑動(dòng)控件

30 是時(shí)候創(chuàng)建我們的滑動(dòng)控件了.復(fù)制我們上面為導(dǎo)航創(chuàng)建的兩條線(xiàn),改變他們的大小(你可以使用自由變形工具).我們使那個(gè)暗的線(xiàn)更加暗,更改他顏色的值為#777575.

31 然后使用矩形工具創(chuàng)建一個(gè)小型的正方形(15px寬與高),應(yīng)用一個(gè)漸變疊加的圖層樣式如下.

32在開(kāi)始下一步之前,先組織好我們的圖層.參考一下圖片確保圖層順序恰當(dāng).

創(chuàng)建內(nèi)容框

33,開(kāi)始時(shí),我們需要?jiǎng)?chuàng)建邊境線(xiàn).拖動(dòng)水平參考線(xiàn)將他拉到滑動(dòng)線(xiàn)上邊.留下50px的空隙.然后增加另外一條參考線(xiàn).

34 現(xiàn)在選擇圓角矩形工具,創(chuàng)建一個(gè)寬度為260px,高度為170px顏色為#d0d0d0的矩形,命名為bg_1.

35 安裝下面的圖片對(duì)齊矩形,使用移動(dòng)工具放置到準(zhǔn)確的位置.

36 在bg_1 圖層上面擊右鍵,創(chuàng)建圖層蒙版.

37 選擇漸變工具,設(shè)置前景色和背景色分別為黑與白(也可按D鍵自動(dòng)重置顏色).選擇線(xiàn)性漸變,從上到下拖到知道你對(duì)效果滿(mǎn)意.

38 現(xiàn)在開(kāi)始創(chuàng)建陰影,復(fù)制 bg_1 圖層.重命名為shadow.將其放置于bg_1層下方.應(yīng)用顏色疊加的圖層樣式疊加一個(gè)暗灰色(#3e3e3e).

39 選定shadow圖層,選擇 濾鏡>模糊>高斯模糊.設(shè)置模糊半徑為5px.

40 使用漸變工具,調(diào)整圖層遮罩類(lèi)似這樣.

41 在框內(nèi)增加文字內(nèi)容,你將會(huì)看到我以什么結(jié)束.

42 新建一個(gè)組,將文字內(nèi)容拖進(jìn)里面,并命名為content.

43 現(xiàn)在我們將要對(duì)齊它.按住ctrl鍵,選中content組合bg_1層.點(diǎn)擊水平居中選項(xiàng)和垂直居中選項(xiàng)定位.

44 現(xiàn)在復(fù)制2份我們剛剛制作的原始的content框.對(duì)齊他們,改變文字內(nèi)容,別忘了在底部增加一條水平參考線(xiàn).

45 再一次檢查確保我們的圖層有條理,請(qǐng)參考我的圖片.

創(chuàng)建主要內(nèi)容區(qū)域

46 留下50px的間隔拖移新的水平參考線(xiàn).開(kāi)始增加你的內(nèi)容,根據(jù)下面圖片對(duì)齊.

47 讓我們是他更好看一點(diǎn).選取一個(gè)矩形選框工具(M).在樣式選項(xiàng),選擇固定大小,寬為15px,高度為30px.設(shè)置前景色為#12197b,填充矩形(按住ctrl+空格鍵填充).

48 使用相同的設(shè)置,在網(wǎng)頁(yè)右邊增加相同內(nèi)容.

49 拖拽新的水平線(xiàn)在底部.增加分割線(xiàn),具體參照下列圖片.

50 再次檢查圖層組織結(jié)構(gòu).參照下面.

創(chuàng)建底部區(qū)域

51 我們開(kāi)始創(chuàng)建底部區(qū)域通過(guò)創(chuàng)建新的參考線(xiàn).在距離上面參考線(xiàn)的下方留下50px的間隙,重新建一條水平參考線(xiàn).

52 選擇矩形選擇工具.設(shè)置前景色為白色.在畫(huà)面上拉開(kāi)一個(gè)矩形選區(qū).按下ctrl+空格鍵填充.命名該圖層為1px_upper_line.

53 選擇矩形選擇工具創(chuàng)建寬度為1020px 高度為160px的矩形.他跨過(guò)整個(gè)畫(huà)面的寬度.這件作為整個(gè)底部區(qū)域的背景.根據(jù)下圖應(yīng)用一個(gè)漸變疊加的圖層樣式.

54 復(fù)制1px_upper_line層并移動(dòng)到底部區(qū)域下方.名稱(chēng)自己決定,但我的命名為1px_down_line,看起來(lái)應(yīng)該是這樣的.

55 開(kāi)始增加些內(nèi)容,參考如下:

56 你可以從deviatARt下載社會(huì)化媒體圖標(biāo).

57 根據(jù)下面圖片對(duì)齊.

創(chuàng)建小型頁(yè)腳

58 拖拽新的水平參考線(xiàn)在大的頁(yè)腳頁(yè)底部,距離50px的地方新建水平參考線(xiàn).

59 寫(xiě)下底部導(dǎo)航鏈接文字類(lèi)似:

60 寫(xiě)下版權(quán)聲明對(duì)齊右邊,加上最后一條水平參考線(xiàn).

調(diào)整畫(huà)布大小

61 最后,我們需要再底部導(dǎo)航留下50px的間距.只需調(diào)整畫(huà)布大小.

結(jié)束

就是我們做的,我們創(chuàng)建一個(gè)整潔簡(jiǎn)約風(fēng)格的設(shè)計(jì).