Photoshop cs4教程:制作專業(yè)網(wǎng)站的2.0布局(3)

制作一個(gè)專業(yè)的2.0網(wǎng)頁布局

在這個(gè)photoshop教程中我們將要學(xué)習(xí)怎么制作一個(gè)專業(yè)網(wǎng)站的2.0布局，以前我們學(xué)習(xí)了那么多的photoshop教程，似乎都有些長，那是因?yàn)檫@些教程都是非常詳細(xì)。我保證只要你跟著去做就會(huì)發(fā)現(xiàn)很簡單，你所要做的只是去試一試。 

最終效果預(yù)覽

詳細(xì)教程
軟件：Adobe Photoshop
版本：CS4
難度：中級
預(yù)計(jì)完成時(shí)間：大約兩個(gè)小時(shí) 

步驟1

 為了確保能夠?qū)R我們采用960s坐標(biāo)制（從這里獲�。┫螺d打開文件
我們先創(chuàng)建背景圖層，在背景層上右擊，然后選擇背景圖層，命名為“bg”。 

 

步驟2 

我們運(yùn)用了這么多參考線，所以我們需要打開視圖>標(biāo)尺。  

步驟3

我們要為標(biāo)題區(qū)設(shè)置下邊框，所以需要在下方100px拖拽一條新的參考線，執(zhí)行視圖——新建參考線，位置：100  

步驟 4

讓我們來創(chuàng)建標(biāo)題。先創(chuàng)建一個(gè)1020*100px的選區(qū)，然后按下shift+backspace 填充（可用任何顏色）

做一個(gè)漸變疊加，如下圖所示。

將這個(gè)圖層命名為“header-bg”。

步驟 5

輸入網(wǎng)站標(biāo)題，并設(shè)置以下文字屬性：
字體設(shè)置： Rockwell (從這里獲取)
字體大小: 30px
字體樣式: Regular
反鋸齒設(shè)置：平滑
顏色：不要緊，因?yàn)槲覀冞�要執(zhí)行一個(gè)漸變疊加

現(xiàn)在對文本添加漸變疊加，參考下圖所示：

將你的網(wǎng)站標(biāo)題和標(biāo)題背景色對齊；同時(shí)選擇你的標(biāo)題層和“header-bg”層，然后選擇垂直居中。

步驟 6

導(dǎo)航條字符設(shè)置如下：
字體設(shè)置：Arial
字體大小: 20px
字體樣式: Regular
反鋸齒設(shè)置：平滑
顏色：#ffffff

創(chuàng)建一個(gè)圓角矩形作為一個(gè)動(dòng)態(tài)鏈接，固定大小65*35Px，半徑5px，（可用任何顏色填充）。  

根據(jù)下圖所示：執(zhí)行描邊，漸變疊加.  

在我們進(jìn)行下一步之前，首先要確保你的圖層條理清晰，下面展示的是我們的圖層面版!

步驟7

現(xiàn)在我們該創(chuàng)建一個(gè)特色的設(shè)計(jì)空間了。我們先在上一個(gè)參考線430px之后添加一個(gè)水平的參考線作為下邊框。  

創(chuàng)建一個(gè)1020*430px的選區(qū)作為特色設(shè)計(jì)空間的背景，用任何顏色填充。  

然后執(zhí)行圖層樣式——漸變疊加，設(shè)置參考下圖所示：

現(xiàn)在讓我們添加光澤效果！創(chuàng)建一個(gè)1020*120px的選區(qū)，用任何顏色填充。

然后添加漸變疊加，可參考下圖設(shè)置。

降低圖層不透明度到40%

步驟 8

接下來添加高光！運(yùn)用單排選取框工具創(chuàng)建一個(gè)1像素的選區(qū)，如下圖所示設(shè)置對齊：

設(shè)置前景色為 #acd86e 然后按下 shift+backspace 填充；要確定是使用前景色作為填充色。

我保證你會(huì)擁有一個(gè)很棒的像素細(xì)節(jié)。

我們已經(jīng)做好了創(chuàng)建背景的基礎(chǔ)，所以我們要給他們命名，使他們系統(tǒng)化，然后把他們組合在一起。

步驟 9

讓我們更精確些！根據(jù)下圖拖拽兩條參考線。

輸入歡迎語，字符設(shè)置如下：

字體設(shè)置：Rockwell
字體大小: 40px
字體樣式: Regular
反鋸齒設(shè)置：銳利
顏色：#f4f4f4

 

我已經(jīng)寫上了“Here’s our brand new work. Oops Welcome!”但是我們需要以某種方式來強(qiáng)調(diào)“Welcome！”這個(gè)單詞。所以基本上我們先添加一個(gè)漸變疊加，如下圖所示。

現(xiàn)在根據(jù)下圖所示拖拽兩條新的水平參考線。

在我們結(jié)束這一步之前，要確定你的文字圖層已經(jīng)組織起來。

步驟 10

我們先創(chuàng)建一個(gè)220*150像素的選區(qū)（可用任何顏色填充），這個(gè)選區(qū)將會(huì)作為我們的圖像控制區(qū)。

將這個(gè)圖層命名為“pic-holder”然后試著將它像上圖所示對齊。

描邊

讓我們添加一個(gè)特征設(shè)計(jì)中圖片，文件>打開圖像。把圖層命名為“pic”，并且確定放在“pic-holder”的上層。

在“pic”圖層上右擊并且選擇創(chuàng)建剪貼蒙板。

步驟 11

創(chuàng)建陰影，我們先復(fù)制“pic”和“pic-holder”這兩個(gè)圖層。

選中復(fù)制的兩個(gè)圖層，執(zhí)行編輯>自由變換，然后調(diào)整高度為：-100.0%

當(dāng)復(fù)制的兩個(gè)圖層仍處于選中狀態(tài)時(shí)右擊選擇轉(zhuǎn)換為智能對象，把這個(gè)圖層命名為“shadow”，并且確定這個(gè)圖層是位于底部。

選擇“shadow”層然后單擊添加圖層蒙版（位于圖層面版的底部）。

選擇漸變工具（G）設(shè)置黑、白、黑從下到上拉一個(gè)線性漸變。

你應(yīng)該會(huì)得到下面的圖像。

步驟 12

我們需要為圖像添加一個(gè)說明，先創(chuàng)建一個(gè)240*25像素的選區(qū)，填充顏色值：#1a1919，作為說明的背景。  

輸入說明文字，字符設(shè)置如下：
字體設(shè)置：Arial
字體大小: 15px
字體樣式: Regular
反鋸齒設(shè)置：None
顏色：#82aa48

確定你的文件簡潔！

步驟 13

復(fù)制一份特色圖像然后右對齊。

我們將要在中部做一個(gè)大一些的圖，我們先創(chuàng)建一個(gè)340×200px的選區(qū)，如下圖所示對齊，用任何顏色填充。

以下圖作參考，執(zhí)行描邊 。

下圖是我們做到這一步的效果。

確定你的圖層系統(tǒng)化并且已經(jīng)重組。 我已經(jīng)創(chuàng)建了三個(gè)組，下圖是它們的樣子

步驟 14

現(xiàn)在讓我們來創(chuàng)建滑動(dòng)按鈕！我們先運(yùn)用橢圓選區(qū)工具（M）創(chuàng)建一個(gè)50*50的選區(qū)，用任何顏色填充。

添加圖層樣式，如下圖所示：

運(yùn)用自定義形狀工具(U) 創(chuàng)建一個(gè)箭頭樣式，然后如下圖所示給它添加圖層樣式。

不要忘了對齊你的按鈕，如下圖所示： 

復(fù)制另一個(gè)箭頭然后右對齊。

步驟 15

我們來一起制作內(nèi)容區(qū)域，首先創(chuàng)建一個(gè)1020×815px的選區(qū)。 

設(shè)置顏色值為： #e8e8e8，然后按下Shift+Backspace t填充選區(qū)。

運(yùn)用單行選框工具 (M) 創(chuàng)建1px 的選區(qū)，位置如下圖所示，然后填充白色(#ffffff)。

現(xiàn)在一個(gè)很棒的像素細(xì)節(jié)就制作出來了！

步驟 16

我們需要給內(nèi)容區(qū)域設(shè)置一個(gè)上邊界，所以我們在50像素下面拖拽了一條新的參考線。
下載標(biāo)志設(shè)置Basic Set – Pixel Mixer，位置如下圖所示。

在標(biāo)志下方拖拽一條新的參考線, 距離20Px再拖拽一條新的參考線。
輸入標(biāo)題，字符設(shè)置如下： 

字體類型: Rockwell
字體大小: 29px
字體粗細(xì): Regular 
反鋸齒設(shè)置：Sharp 
 顏色: #81aa48

如下圖所示拖拽兩條參考線。

輸入一些文本，字符設(shè)置如下：

字體類型: Arial
字體大小: 15px
字體粗細(xì): Regular
反鋸齒設(shè)置： None
顏色: #2f3235

 如下圖所示再拖拽三條參考線

步驟 17

現(xiàn)在我們來創(chuàng)建一個(gè)“read more” 按鈕，運(yùn)用圓角矩形工具 (U) 創(chuàng)建一個(gè)大小為 100×30px，半徑為5px 的圓角矩形，用任何顏色填充。

參考下面圖像，給圖層添加圖層樣式。

運(yùn)用橢圓工具(U)創(chuàng)建一個(gè)15×15px的橢圓，填充顏色為： #4d4d4d.
為了能夠正確地對齊，我們先選擇橢圓所在的圖層和矩形所在的圖層，當(dāng)兩個(gè)圖層都被選定，單擊對齊水平中心。

按下 “+”, 填充白色 (#ffffff) 位置如下圖所示。

輸入文字 “read more” ，字符設(shè)置如下：

字體類型: Tahoma (get it from here)
字體大小: 12px
字體粗細(xì): Regular
反鋸齒設(shè)置： None
顏色: #ffffff

添加陰影。參考下圖設(shè)置。

步驟 18

創(chuàng)建一個(gè)垂直的分隔符，運(yùn)用直線工具(U) 創(chuàng)建兩條緊挨著的線，填充顏色值為 #ffffff – #b3b3b3.

對齊這兩條線如下圖所示

不要忘了組織你的圖層，看一下我的圖層。

步驟 19

重復(fù)三次以上兩個(gè)步驟，然后效果如下圖所示！

步驟 20

讓我們來創(chuàng)建一個(gè)分隔符

在50px之后拖拽一條新的參考線。

用橢圓先框工具 (M) 創(chuàng)建一個(gè)選區(qū)如下圖所示：

設(shè)置前景色為(#000000)，然后按下 Shift+Backspace填充選區(qū)，將圖層命名為“separator_bg”。

為了使它有模糊的效果，執(zhí)行文件> 模糊 > 高斯模糊– 半徑：3px.

選擇 “separator_bg” 圖層，創(chuàng)建一個(gè)選區(qū)然后刪除。 

單擊添加圖層蒙版標(biāo)志然后設(shè)置漸變編輯器為黑，白，黑。 

用漸變工具 (G) 根據(jù)下圖所示拖拽一個(gè)線性漸變。   

降低圖層透明度度為50%。

用直線工具(U) 在分隔符頂部創(chuàng)建兩條水平線，把place them right above the separator.
填充顏色為：#b3b3b3 – #ffffff ，然后為他們添加同樣的圖層蒙版。

步驟 21

我們現(xiàn)在要制作下方的內(nèi)容區(qū)域，距離50px 拖拽一條新的水平參考線。

輸入標(biāo)題，字符設(shè)置如下：

字體類型： Rockwell
字體大�。� 30px
字體粗細(xì)： Regular
反鋸齒設(shè)置：Smooth
顏色： #81aa48

如下圖所示拖拽兩條新的水平參考線。

輸入一些文字字符設(shè)置如下：
字體類型： Arial
字體大�。� 14px
字體粗細(xì)： Regular
無鋸齒設(shè)置：None
顏色： #505150

距離160px拖拽一條新的參考線作為內(nèi)容區(qū)域的下邊界。

步驟 22

輸入另一個(gè)標(biāo)題和文本，字符設(shè)置同上個(gè)步驟。

用鍵盤輸入一個(gè)引號，字符設(shè)置如下：
字體類型：Arial
字體大�。�200px
字體粗細(xì)：Regular
反鋸齒設(shè)置：Smooth
顏色： #505150
降低圖層透明度度為50%。

輸入一些你自己的或者是引用的話，字符設(shè)置如下
字體類型： Arial
字體大�。�14px
字體粗細(xì)：Italic
反鋸齒設(shè)置： Smooth
顏色：#81aa48

步驟 23

為了創(chuàng)造一個(gè)垂直的分隔線，我們創(chuàng)建兩條緊挨著的線，線條顏色分別設(shè)置為：#ffffff – #b3b3b3.

確定你的圖層組織起來，看一下我是怎么組織它們的。

步驟24

像左邊一樣輸入另一個(gè)標(biāo)題 （嘗試著寫一些東西代表團(tuán)隊(duì)，比如，我寫下了“Our Team”)

用矩形工具 (U)創(chuàng)建一個(gè)90×90px 的矩形，然后以任何顏色填充，命名這個(gè)圖層為“photo1_holder”。
這個(gè)區(qū)域?qū)?huì)作為團(tuán)隊(duì)成員的展示區(qū)。執(zhí)行描邊，參考如下圖所示。

放置團(tuán)隊(duì)成員的一張圖片，命名這個(gè)圖層為“photo1″，確定圖層 “photo1″是在“photo1_holder”圖層的上方，然后右擊 “photo1″圖層選擇添加剪貼蒙版， 你會(huì)看到如下圖所示的樣子。

步驟 25

輸入一些關(guān)于團(tuán)隊(duì)成員的文字，字符設(shè)置如下：
字體類型： Arial
字體大�。�14px
字體粗細(xì)：Regular
反鋸齒設(shè)置 Smooth
顏色：#7ba344

我們將創(chuàng)造社會(huì)媒體圖標(biāo)。先從博客開始，輸入“t”字符設(shè)置如下：

字符類型： Pico-Black (get it from here)
字體大�。�30px
字體粗細(xì)： Regular
反鋸齒設(shè)置：Smooth
顏色： #2fcfff
參考下圖設(shè)置執(zhí)行描邊。

讓我們再創(chuàng)建一個(gè)LinkedIn的連接圖片！輸入“in”并設(shè)置以下文字屬性：

字體類型： Myriad Pro (get it from here)
字體大�。�30px
字體粗細(xì)：Bold
反鋸齒設(shè)置 Smooth
顏色：#0081ac

Facebook!? 輸入“f”并設(shè)置以下文字屬性：

字體類型： Klavika (get it from here)
字體大�。�30px
字體粗細(xì)：Bold
反鋸齒設(shè)置 Smooth
顏色：#395796

步驟 26

復(fù)制成員照片創(chuàng)建一個(gè)圖層，選中圖層，執(zhí)行圖層> 新建調(diào)整層> 黑白
檢查確定是“使用先前的圖層創(chuàng)建剪貼蒙版”。

輸入同樣的文字，我們寫的社會(huì)媒體圖標(biāo)使用和以前相同的字符,但是給他們所有的顏色值:# 505150。

懸停在上方，明顯的成員看起來不會(huì)是灰色。

復(fù)制兩份對齊如下圖所示：

確定它們是對齊的， 要?jiǎng)?chuàng)建四個(gè)獨(dú)立的組，而且每個(gè)組要包括每個(gè)成員的內(nèi)容。選中四個(gè)組，在控制柄處單擊分散排列左邊界。

我已經(jīng)組織了我的圖層，你呢？

步驟 27

在我們開始制作社會(huì)媒體鏈接內(nèi)容之前，需要設(shè)置一引起邊界，這就是我們要拖拽新的參考線的原因，如下圖所示：

創(chuàng)建一個(gè)940×70px 的選區(qū)，如下圖所示對齊：

用任何顏色填充，添加漸變疊加，參考下圖設(shè)置： 

創(chuàng)建一個(gè)70×45px的選區(qū)。參考下面圖片設(shè)置然后添加圖層樣式，將圖層命名為“tw_bg”。

將圖層 “tw_bg”設(shè)置為不可見。
創(chuàng)建一個(gè)10×43px的選區(qū)，然后編輯>變換 > 斜切。調(diào)整控制柄選項(xiàng)。
X: 40px
Y: 1253px
V: -39
將圖層命名為 “effect” 然后將“tw_bg”圖層可見。

  

按照“tw_bg” 的圖層樣式給“effect”圖層調(diào)整圖層樣式.

輸入字母 “t” 并設(shè)置以下文字屬性：

字體類型： Pico-Black
字體大�。�35px
字體粗細(xì)：Regular
反鋸齒設(shè)置：Smooth
顏色：不要緊，因?yàn)槲覀冞�要添加一個(gè)漸變疊加。
 
如下圖所示，給圖層添加圖層樣式。

步驟 28

重復(fù)第20步再創(chuàng)建一個(gè)分隔符或者直接復(fù)制，所放位置如下所示：

我們需要把矩形的右邊給切掉，我們選中“tw_bg”圖層然后單擊添加圖層蒙版。
在矩形右邊做一個(gè)選區(qū)(我們需要給切掉的) ，設(shè)置前景色為黑色(#000000)然后按下 Shift+Backspace填充。

步驟 29

輸入一些文字—實(shí)際上應(yīng)該是一個(gè)Tweet— 并設(shè)置以下文字屬性：

字體類型： Arial
字體大�。�15px
字體粗細(xì)：Regular
反鋸齒設(shè)置：Smooth
顏色：#222222

為了使文本對齊，同時(shí)選中文字圖層和the green bar layer，然后單擊垂直中心對齊。

步驟 30

重復(fù)第27步創(chuàng)建一些圖形如下圖所示， 同時(shí)創(chuàng)建一個(gè)矩形，填充以顏色值#334814 ，然后調(diào)整不透明度為40%。

給大矩形添加圖層樣式，設(shè)置參考下圖所示：

給the skewed rectangle填充一個(gè)暗些的顏色值：#2a6788

輸入“t”，并設(shè)置以下文字屬性：
字體類型： Pico-Black
字體大�。�35px
字體粗細(xì)：Regular
反鋸齒設(shè)置 Smooth
顏色：#2fcfff
描邊，參考下圖所示：

確定你的圖層系統(tǒng)化并且組合好了。

步驟 31

復(fù)制另一個(gè)the Twitter icon， 調(diào)整上面的顏色 (大矩形) 為： #0080ab, 然后填充the skewed rectangle 的顏色值為：#00526d.

輸入文字“in” 并設(shè)置以下文字屬性：
字體類型： Myriad Pro
字體大�。�35px
字體粗細(xì)：Bold
反鋸齒設(shè)置 Smooth
顏色：white (#ffffff)

創(chuàng)建三份the Twitter或獲得圖標(biāo),更改疊加顏色(大長方形):# 395796,填補(bǔ)傾斜矩形這個(gè)顏色值為:# 263e6f。

輸入文字“f”，并設(shè)置以下文字屬性：
字體類型： Klavika
字體大�。�35px
字體粗細(xì)：Bold
反鋸齒設(shè)置 Smooth
顏色：white (#ffffff)

再復(fù)制一份，更改疊加顏色(大長方形):#e8e8e8,填補(bǔ)傾斜矩形這個(gè)顏色值為:# cdcdcd。 

輸入文字“fr”，并設(shè)置以下文字屬性：
字體類型： Frutiger Black (get it from here )
字體大�。�35px
字體粗細(xì)：Bold
反鋸齒設(shè)置 Smooth
顏色：f: #0079d2 – r: #ff3093

把圖標(biāo)分別放在每一個(gè)分隔組里，然后選中這四個(gè)圖標(biāo)單擊分散左邊。

步驟 32

讓我們繼續(xù)，現(xiàn)在只剩下頁腳了。創(chuàng)建一個(gè)1020×460px 的選區(qū)，以任何顏色填充。

添加漸變疊加，參考下圖設(shè)置。 

現(xiàn)在你應(yīng)該擁有一個(gè)很漂亮的陰影。 

wi運(yùn)用單排選框工具(M) 創(chuàng)建一個(gè)1px 的選區(qū)然后填充白色(#ffffff)。

步驟 33

參照下圖所示拖拽兩條新的水平參考線。

輸入一個(gè)標(biāo)題，并設(shè)置以下字符屬性：
字體類型： Rockwell
字體大�。�30px
字體粗細(xì)：Regular
反鋸齒設(shè)置 Sharp
顏色：#7ea547

輸入一個(gè)sub-title，字符屬性設(shè)置如下：
字體類型： Arial
字體大�。�15px
字體粗細(xì)：Regular
反鋸齒設(shè)置： None
顏色：#d3d3d3

運(yùn)用線性工具 (U)在頂部創(chuàng)建兩條水平線，然后設(shè)置顏色值為：#151515 – #2f2f2f.

如下圖所示對齊：

步驟 34

參照下圖所示拖拽兩條新的水平參考線。

運(yùn)用圓角矩形工具 (U) 創(chuàng)建兩個(gè)210×25px半徑 5px 的矩形，填充顏色為： #141313，設(shè)置陰影。

在這兩個(gè)矩形里面輸入文本，設(shè)置文字屬性如下：
字體類型： Arial
字體大�。�15px
字體粗細(xì)：Regular
反鋸齒設(shè)置： None
顏色：#7ea547

創(chuàng)建另一個(gè)矩形如上圖所示，但是這個(gè)高度調(diào)整為： 110px依然在里面輸入文字，屬性設(shè)置同上，復(fù)制我們在第17步制作的按鈕，然后對齊它如下圖所示：

步驟 35

如同左邊，我們在右邊也輸入同樣的標(biāo)題。

 輸入文字，并參考下圖設(shè)置。

把你所做的復(fù)制兩份。

步驟 36

輸入第三個(gè)標(biāo)題和一些文字來填充右邊的部分。

現(xiàn)在你的頁腳應(yīng)該像這個(gè)樣子：

步驟 37

我們現(xiàn)在應(yīng)該到這一步了！向下50px拖拽一條新的水平參考線。

在每個(gè)頂部創(chuàng)建兩條水平線，設(shè)置顏色為#181818 – #2f2f2f.

輸入一些關(guān)于版權(quán)的文字，并設(shè)置以下文字屬性：
字體類型：Arial
字體大小:15px
字體粗細(xì)：Regular
反鋸齒設(shè)置： None
顏色：white (#ffffff) – #82aa48

運(yùn)用這些字符設(shè)置，輸入write a sub-navigation.

要確保你的圖層條理清晰，并且都已經(jīng)組合起來，下面看到的是我們的樣子！

總結(jié)：

現(xiàn)在我們已經(jīng)做好了，我們已經(jīng)創(chuàng)造了一個(gè)專業(yè)2.0網(wǎng)絡(luò)布局。正如你所看到的,這里的方法很簡單，卻得能做出很好的效果。