最終效果預覽
第一步
一般在Photoshop中制作網頁模板的時候，我使用960網格系統。現而今這個網格系統在web設計中相當流行。然而我仍然相信網格系統不應該被過度的依賴。我使用960的主要原因是它psd文件中自帶的參考線可以大大提高web設計的效率。所以我推薦到這里免費下載960。下載完成后用PS打開一個12行的psd文件（960_grid_12_col.psd），將會看到下面這個文件。
第二步
如果參考線沒有打開，請通過-視圖>顯示->智能參考線和視圖->對齊到->參考線打開，快捷鍵Ctrl+;。以下你看到的是我已經在圖中間畫好了一個黑色矩形，接下來所有的元素都將包含在這個矩形中。其實你沒有必要畫這個矩形，因為背景是白色的，如果你覺得有幫助，不妨畫之。
第三步
新建一個圖層，選擇漸變工具然后選擇如下圖白色到黑色的一個漸變效果。畫的時候按住shift使漸變線絕對水平。如果效果上有差異，可以多試幾次。
第四步
選擇矩形選定工具沿著參考線從左上到右下在第二步中的漸變圖中選定如下區域。按ctrl+shift+I反選，然后按delete刪除反選區域。
[Page: ]
第五步
重復上面兩個步驟，讓右邊也同樣加入一個漸變圖層，確保它們是對稱的。
第六步
新建一個圖層組把兩個邊沿漸變矩形拖入其中，然后選定圖層組，將不透明度設置為10%。
第七步
接下來加入兩邊的虛線效果。如果只需要在css中使用dashed邊框，那么這個虛線效果在PS中是沒有必要制作的。一個聰明的辦法是使用圖形變換 工具；首先創建一個新圖層，然后按Ctrl+T，然后把這個藍色矩形稍微下移一些，然后連續按Ctrl+Shift+Alt+T。如果你感覺這個方法復雜 了，可以手動的創建每個藍色矩形。然后選定所有藍色矩形，按Ctrl+E將它們合并。然后復制這個圖層到右邊，做成兩個對稱的邊沿。
第八步
現在加入網頁標題和標識性語言，這里我使用到的字體是“Rockwell”。使用同樣的藍色。如果你熟悉色板，一個聰明的辦法是分別新建一個藍色、一個灰色色板以供后續使用。
[Page: ]
第九步
現在用Helvetica或者Tahoma無襯線字體創建菜單項。只需要輸入一些大寫的同色的字體。一般我喜歡把大寫字體的字間距調大一點。選擇字體，勾選窗口>字符，然后在字符面板中調整字間距。每個菜單項都在不同的圖層中調整。
第十步
把所有的菜單項加入一個圖層組，復制一個副本，然后把色彩調為灰色，這樣就有兩個菜單組了，一個是藍色的，一個是灰色的。這樣做是為了在網頁中產生一個鼠標懸停變色效果。每次同時只讓一個菜單項可見，效果如圖：
第十一步
如果站點需要RSS訂閱功能，那么可以加入一個自定義的RSS訂閱圖標。首先創建一個藍色矩形框，然后用Rockwell字體寫上“RSS”。訂閱圖標可以到這里下載，選擇“Developer Kit”，然后放入我們的psd文件中。 然后把圖標放入一個新的圖層組，然后復制組，把藍色矩形換成灰色，同樣是為了實現鼠標懸停換色的效果。
第十二步
我覺得主頁加入一個主題圖片將會看起來不錯。我從stock image上下載一個符合這個網頁配色的圖片，如果你有興趣可以到SXC這里下載。將圖片放入文檔然后調整大小和位置，如下圖：
（譯者注：原作者提供的圖片地址已經失效）
[Page: ]
第13步
通過矩形框選定工具，在圖上拖動一個選定框（也就是你需要的部分），然后反選，刪除其他部分。
第十四步
使用Rockwell字體在圖上寫一些小的標示文字。然后新建一個圖層，畫兩個白色矩形作為標示文字背景，然后把字體顏色改為藍色。
第十五步
在幻燈圖片的右邊，將加入一些帶引號的文字，文字內容可以是“歡迎光臨本站”之類的話。用無襯線字體灰色寫上這些文字，然后在不同的圖層中加入超大號的引號，然后調整好位置。
第十六步
在頁面的中間加入類似于博客格式顯示的新聞。首先用Rockwell字體、灰色輸入“news”。然后新建圖層組，命名為“Item 1”，組中是第一條新聞項的所有元素。
[Page: ]
第十七項
然后加入新聞內容字體，右上角加入一個日期，這些都是“Item 1”圖層組的元素。
第十八步
使用淡灰色畫上一個矩形框作為新聞項的背景樣式。
第十九步
復制2個圖層組“item 1”，把中間那個圖層組的灰色背景去掉。
第二十步
我認為可以利用邊框來放一個flickr組。現在在設計類的站點是相當流行的，比如PSDlearning和Fuel Your Creativity都是這么做的。首先放置一個類似于新聞樣式的標題。然后加入尺寸為75×75的圖片。可以到上面提及的站點上下載縮略圖，然后按照下面的樣式排版。
[Page: ]
第二十一步
選擇所有縮略圖，然后按Ctrl+E合并圖層。然后圖層選擇混合選項，按照下圖設定：
第二十二步
在頁面中加入一個帶描邊樣式的廣告欄。
第二十三步
接下來頁腳區域加入一些額外信息，比如友情鏈接，客戶，版權等。
第二十四步
最后一步需要在頁面的各區域之間加入分割線，讓頁面看起來更有序一些。創建新圖層，選擇畫筆工具，直徑設置為1px，然后把前景色設置為中灰色，可以參照下圖畫線，記住按住shift哦。
（譯者注：這個教程沒有提供psd下載，譯者參考本教程做了一個例子，到這里下載。）
