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

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

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

最終效果預覽

詳細教程
軟件：Adobe Photoshop
版本：CS4
難度：中級
預計完成時間：大約兩個小時 

步驟1

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

 

步驟2 

我們運用了這么多參考線，所以我們需要打開視圖>標尺。  

步驟3

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

步驟 4

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

做一個漸變疊加，如下圖所示。

將這個圖層命名為“header-bg”。

步驟 5

輸入網(wǎng)站標題，并設置以下文字屬性：
字體設置： Rockwell (從這里獲取)
字體大小: 30px
字體樣式: Regular
反鋸齒設置：平滑
顏色：不要緊，因為我們還要執(zhí)行一個漸變疊加

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

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

步驟 6

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

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

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

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

步驟7

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

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

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

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

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

降低圖層不透明度到40%

步驟 8

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

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

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

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

步驟 9

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

輸入歡迎語，字符設置如下：

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

 

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

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

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

步驟 10

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

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

描邊

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

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

步驟 11

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

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

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

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

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

你應該會得到下面的圖像。

步驟 12

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

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

確定你的文件簡潔！

步驟 13

復制一份特色圖像然后右對齊。

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

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

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

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

步驟 14

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

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

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

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

復制另一個箭頭然后右對齊。

步驟 15

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

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

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

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

步驟 16

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

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

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

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

輸入一些文本，字符設置如下：

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

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

步驟 17

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

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

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

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

輸入文字 “read more” ，字符設置如下：

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

添加陰影。參考下圖設置。

步驟 18

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

對齊這兩條線如下圖所示

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

步驟 19

重復三次以上兩個步驟，然后效果如下圖所示！

步驟 20

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

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

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

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

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

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

單擊添加圖層蒙版標志然后設置漸變編輯器為黑，白，黑。 

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

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

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

步驟 21

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

輸入標題，字符設置如下：

字體類型： Rockwell
字體大小： 30px
字體粗細： Regular
反鋸齒設置：Smooth
顏色： #81aa48

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

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

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

步驟 22

輸入另一個標題和文本，字符設置同上個步驟。

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

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

步驟 23

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

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

步驟24

像左邊一樣輸入另一個標題 （嘗試著寫一些東西代表團隊，比如，我寫下了“Our Team”)

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

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

步驟 25

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

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

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

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

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

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

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

步驟 26

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

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

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

復制兩份對齊如下圖所示：

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

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

步驟 27

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

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

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

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

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

  

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

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

字體類型： Pico-Black
字體大小：35px
字體粗細：Regular
反鋸齒設置：Smooth
顏色：不要緊，因為我們還要添加一個漸變疊加。
 
如下圖所示，給圖層添加圖層樣式。

步驟 28

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

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

步驟 29

輸入一些文字—實際上應該是一個Tweet— 并設置以下文字屬性：

字體類型： Arial
字體大小：15px
字體粗細：Regular
反鋸齒設置：Smooth
顏色：#222222

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

步驟 30

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

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

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

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

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

步驟 31

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

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

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

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

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

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

把圖標分別放在每一個分隔組里，然后選中這四個圖標單擊分散左邊。

步驟 32

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

添加漸變疊加，參考下圖設置。 

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

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

步驟 33

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

輸入一個標題，并設置以下字符屬性：
字體類型： Rockwell
字體大�。�30px
字體粗細：Regular
反鋸齒設置 Sharp
顏色：#7ea547

輸入一個sub-title，字符屬性設置如下：
字體類型： Arial
字體大小：15px
字體粗細：Regular
反鋸齒設置： None
顏色：#d3d3d3

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

如下圖所示對齊：

步驟 34

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

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

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

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

步驟 35

如同左邊，我們在右邊也輸入同樣的標題。

 輸入文字，并參考下圖設置。

把你所做的復制兩份。

步驟 36

輸入第三個標題和一些文字來填充右邊的部分。

現(xiàn)在你的頁腳應該像這個樣子：

步驟 37

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

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

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

運用這些字符設置，輸入write a sub-navigation.

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

總結(jié)：

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