在photoshop中學(xué)習(xí)制作基于960網(wǎng)格系統(tǒng)的網(wǎng)頁(yè)模板，你將會(huì)學(xué)到圖層效果和定位元素相關(guān)知識(shí)。

最終效果預(yù)覽

第一步

一般在photoshop中制作網(wǎng)頁(yè)模板的時(shí)候，我使用960網(wǎng)格系統(tǒng)?，F(xiàn)而今這個(gè)網(wǎng)格系統(tǒng)在web設(shè)計(jì)中相當(dāng)流行。然而我仍然相信網(wǎng)格系統(tǒng)不應(yīng)該被過(guò)度的依賴(lài)。我使用960的主要原因是它psd文件中自帶的參考線可以大大提高web設(shè)計(jì)的效率。所以我推薦到這里免費(fèi)下載960。下載完成后用ps打開(kāi)一個(gè)12行的psd文件（960_grid_12_col.psd），將會(huì)看到下面這個(gè)文件。

|||

第二步

如果參考線沒(méi)有打開(kāi)，請(qǐng)通過(guò)-視圖>顯示->智能參考線和視圖->對(duì)齊到->參考線打開(kāi)，快捷鍵ctrl+;。以下你看到的是我已經(jīng)在圖中間畫(huà)好了一個(gè)黑色矩形，接下來(lái)所有的元素都將包含在這個(gè)矩形中。其實(shí)你沒(méi)有必要畫(huà)這個(gè)矩形，因?yàn)楸尘笆前咨?，如果你覺(jué)得有幫助，不妨畫(huà)之。

第三步

新建一個(gè)圖層，選擇漸變工具然后選擇如下圖白色到黑色的一個(gè)漸變效果。畫(huà)的時(shí)候按住shift使?jié)u變線絕對(duì)水平。如果效果上有差異，可以多試幾次。

|||

第四步

選擇矩形選定工具沿著參考線從左上到右下在第二步中的漸變圖中選定如下區(qū)域。按ctrl+shift+i反選，然后按delete刪除反選區(qū)域。

第五步

重復(fù)上面兩個(gè)步驟，讓右邊也同樣加入一個(gè)漸變圖層，確保它們是對(duì)稱(chēng)的。

||| 

第六步

新建一個(gè)圖層組把兩個(gè)邊沿漸變矩形拖入其中，然后選定圖層組，將不透明度設(shè)置為10%。

第七步

接下來(lái)加入兩邊的虛線效果。如果只需要在css中使用dashed邊框，那么這個(gè)虛線效果在ps中是沒(méi)有必要制作的。一個(gè)聰明的辦法是使用圖形變換 工具；首先創(chuàng)建一個(gè)新圖層，然后按ctrl+t，然后把這個(gè)藍(lán)色矩形稍微下移一些，然后連續(xù)按ctrl+shift+alt+t。如果你感覺(jué)這個(gè)方法復(fù)雜 了，可以手動(dòng)的創(chuàng)建每個(gè)藍(lán)色矩形。然后選定所有藍(lán)色矩形，按ctrl+e將它們合并。然后復(fù)制這個(gè)圖層到右邊，做成兩個(gè)對(duì)稱(chēng)的邊沿。

|||

第八步

現(xiàn)在加入網(wǎng)頁(yè)標(biāo)題和標(biāo)識(shí)性語(yǔ)言，這里我使用到的字體是“rockwell”。使用同樣的藍(lán)色。如果你熟悉色板，一個(gè)聰明的辦法是分別新建一個(gè)藍(lán)色、一個(gè)灰色色板以供后續(xù)使用。

第九步

現(xiàn)在用helvetica或者tahoma無(wú)襯線字體創(chuàng)建菜單項(xiàng)。只需要輸入一些大寫(xiě)的同色的字體。一般我喜歡把大寫(xiě)字體的字間距調(diào)大一點(diǎn)。選擇字體，勾選窗口>字符，然后在字符面板中調(diào)整字間距。每個(gè)菜單項(xiàng)都在不同的圖層中調(diào)整。

|||

第十步

把所有的菜單項(xiàng)加入一個(gè)圖層組，復(fù)制一個(gè)副本，然后把色彩調(diào)為灰色，這樣就有兩個(gè)菜單組了，一個(gè)是藍(lán)色的，一個(gè)是灰色的。這樣做是為了在網(wǎng)頁(yè)中產(chǎn)生一個(gè)鼠標(biāo)懸停變色效果。每次同時(shí)只讓一個(gè)菜單項(xiàng)可見(jiàn)，效果如圖：

第十一步

如果站點(diǎn)需要rss訂閱功能，那么可以加入一個(gè)自定義的rss訂閱圖標(biāo)。首先創(chuàng)建一個(gè)藍(lán)色矩形框，然后用rockwell字體寫(xiě)上“rss”。訂閱圖標(biāo)可以到這里下載，選擇“developer kit”，然后放入我們的psd文件中。 然后把圖標(biāo)放入一個(gè)新的圖層組，然后復(fù)制組，把藍(lán)色矩形換成灰色，同樣是為了實(shí)現(xiàn)鼠標(biāo)懸停換色的效果。

|||

第十二步

我覺(jué)得主頁(yè)加入一個(gè)主題圖片將會(huì)看起來(lái)不錯(cuò)。我從stock image上下載一個(gè)符合這個(gè)網(wǎng)頁(yè)配色的圖片，如果你有興趣可以到sxc這里下載。將圖片放入文檔然后調(diào)整大小和位置，如下圖：

（譯者注：原作者提供的圖片地址已經(jīng)失效）

第13步

通過(guò)矩形框選定工具，在圖上拖動(dòng)一個(gè)選定框（也就是你需要的部分），然后反選，刪除其他部分。

|||

第十四步

使用rockwell字體在圖上寫(xiě)一些小的標(biāo)示文字。然后新建一個(gè)圖層，畫(huà)兩個(gè)白色矩形作為標(biāo)示文字背景，然后把字體顏色改為藍(lán)色。

第十五步

在幻燈圖片的右邊，將加入一些帶引號(hào)的文字，文字內(nèi)容可以是“歡迎光臨本站”之類(lèi)的話。用無(wú)襯線字體灰色寫(xiě)上這些文字，然后在不同的圖層中加入超大號(hào)的引號(hào)，然后調(diào)整好位置。

|||

第十六步

在頁(yè)面的中間加入類(lèi)似于博客格式顯示的新聞。首先用rockwell字體、灰色輸入“news”。然后新建圖層組，命名為“item 1”，組中是第一條新聞項(xiàng)的所有元素。

第十七項(xiàng)

然后加入新聞內(nèi)容字體，右上角加入一個(gè)日期，這些都是“item 1”圖層組的元素。

|||

第十八步

使用淡灰色畫(huà)上一個(gè)矩形框作為新聞項(xiàng)的背景樣式。

第十九步

復(fù)制2個(gè)圖層組“item 1”，把中間那個(gè)圖層組的灰色背景去掉。

|||

第二十步

我認(rèn)為可以利用邊框來(lái)放一個(gè)flickr組。現(xiàn)在在設(shè)計(jì)類(lèi)的站點(diǎn)是相當(dāng)流行的，比如psdlearning和fuel your creativity都是這么做的。首先放置一個(gè)類(lèi)似于新聞樣式的標(biāo)題。然后加入尺寸為75×75的圖片。可以到上面提及的站點(diǎn)上下載縮略圖，然后按照下面的樣式排版。

第二十一步

選擇所有縮略圖，然后按ctrl+e合并圖層。然后圖層選擇混合選項(xiàng)，按照下圖設(shè)定：

|||

第二十二步

在頁(yè)面中加入一個(gè)帶描邊樣式的廣告欄。

第二十三步

接下來(lái)頁(yè)腳區(qū)域加入一些額外信息，比如友情鏈接，客戶，版權(quán)等。

|||

第二十四步

最后一步需要在頁(yè)面的各區(qū)域之間加入分割線，讓頁(yè)面看起來(lái)更有序一些。創(chuàng)建新圖層，選擇畫(huà)筆工具，直徑設(shè)置為1px，然后把前景色設(shè)置為中灰色，可以參照下圖畫(huà)線，記住按住shift哦。

（譯者注：這個(gè)教程沒(méi)有提供psd下載，譯者參考本教程做了一個(gè)例子，到這里下載。）