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

最終效果預(yù)覽

第一步

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

|||

第二步

如果參考線沒有打開，請通過-視圖>顯示->智能參考線和視圖->對齊到->參考線打開，快捷鍵ctrl+;。以下你看到的是我已經(jīng)在圖中間畫好了一個黑色矩形，接下來所有的元素都將包含在這個矩形中。其實你沒有必要畫這個矩形，因為背景是白色的，如果你覺得有幫助，不妨畫之。

第三步

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

|||

第四步

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

第五步

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

||| 

第六步

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

第七步

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

|||

第八步

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

第九步

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

|||

第十步

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

第十一步

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

|||

第十二步

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

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

第13步

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

|||

第十四步

使用rockwell字體在圖上寫一些小的標示文字。然后新建一個圖層，畫兩個白色矩形作為標示文字背景，然后把字體顏色改為藍色。

第十五步

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

|||

第十六步

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

第十七項

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

|||

第十八步

使用淡灰色畫上一個矩形框作為新聞項的背景樣式。

第十九步

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

|||

第二十步

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

第二十一步

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

|||

第二十二步

在頁面中加入一個帶描邊樣式的廣告欄。

第二十三步

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

|||

第二十四步

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

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