你是否曾經(jīng)想過設(shè)計一個漂亮的網(wǎng)頁，但是卻不知道怎樣入手？說實話，幾年前我也是這樣。當(dāng)我瀏覽網(wǎng)頁的時候我看到這么多好看的網(wǎng)頁，我就希望自己有技術(shù)創(chuàng)作這樣的設(shè)計作品。
今天我可以這么做了，而且我將教你怎么做這樣的設(shè)計！從根本上，對于這種設(shè)計你需要一點photoshop的操作技能和觀察細節(jié)的能力。通過以下的教程，我將會指出其中極細微的細節(jié)之處，而這些細節(jié)講使你的網(wǎng)頁設(shè)計漂亮起來。打開photoshop,我們開始啦！

先看效果圖（點擊可放大）
第一步 — 下載960網(wǎng)格模板我一直以來做的設(shè)計幾乎全部是基于960網(wǎng)格模板的. 因此在我們開始創(chuàng)作之前，先下載這個模板. 你能在960.gs上找到這些模板. 下載之后解壓zip里面關(guān)于PSD的模板. 你會發(fā)現(xiàn)有兩種規(guī)格: 一個是12欄式的而另一個是16欄式的. 他們的區(qū)別就像名字所說的，一個是按12欄分布一個按16欄. 更詳細的介紹一下吧, 如果你的設(shè)計里面分3個區(qū)塊你就選擇12欄式的,那是因為12能被3整除; 同理假如你的設(shè)計分四個區(qū)塊, 你可以選12欄式或者16欄式，那時因為12和16都可以被4整除. 你會發(fā)現(xiàn)這個技巧將用于下面教程.
第二步 — 構(gòu)造你想象的結(jié)構(gòu)
在我們打開PSD網(wǎng)格模板創(chuàng)作前, 我們首先需要先構(gòu)造一下想象中的結(jié)構(gòu). 從上面的這張圖，你可以看出來：因為在一個排版中又有排版，所以這是一個有點復(fù)雜的結(jié)構(gòu).
第三步
構(gòu)造了結(jié)構(gòu)之后我們繼續(xù). 打開16欄式的PSD模板文件. 打開 “圖像 >畫布大小” . 把畫布的寬度設(shè)置為 1200px 高度設(shè)置為 1700px .把背景色設(shè)置為 #ffffff 既白色.
第四步
用長方形工具在頂部畫一個寬100%高大概80px的長方形. 用顏色： #dddddd 填充它.
第五步
在長方形那層上面創(chuàng)建一個新層. 按住CRTL鍵鼠標(biāo)點擊長方形層. 長方形就被選中了，然后把目標(biāo)移至剛建的新層上. 選擇半徑 600px 的軟筆刷（如圖）, 把其顏色設(shè)置為白色, 然后就像圖片所示那樣在選框上邊緣點幾下. 通過這個技巧你畫出了一個微妙的照亮效果. 你現(xiàn)在可以把這兩層聯(lián)合起來了.
第六步
建一個新層，再用長方形工具如圖所示在上端畫一個深灰色的小長方形.
第七步

在距離上端長方形500px處開始畫一個寬 100% 高 575px 的長方形. 設(shè)置其由 #d2d2d0到 #ffffff 的漸變色, 角度為-90,縮放為100%
第八步
現(xiàn)在我們?nèi)绲谖宀侥菢犹砑诱樟列Ч? 這個技巧我們將很頻繁地使用;因此下次用到的時候我只提示是第五步的效果 .
在當(dāng)前層之上簡歷一個新層. Ctrl+鼠標(biāo)點擊這個大的長方形. 選擇 600px的軟筆刷, 設(shè)置顏色為白色，如圖所示對選區(qū)的邊緣點擊多下.
第九步
創(chuàng)建一個新層畫一個400px高的長方形. 這是用作我們網(wǎng)頁頁頭的. 給它設(shè)置一個線性漸變，由顏色 #2787b7 to #258fcd.
以下展示顏色的微妙變化：



第十步
在頁首長方形塊底端畫一條1px的灰藍色的線, 混合屬性中添加陰影效果. 陰影參數(shù): 正底疊加, 透明度: 65%, 方向: -90, 距離: 1px ， 寬度: 6px. 之后再建一個新層，在灰藍色線下面畫一條1px的白線.通過這種方式，我們就可以創(chuàng)建一個輪廓鮮明的邊緣. 可以說在你的設(shè)計中，你可以把這個技巧用于其他色塊.
第十一步
創(chuàng)建一個新層,在畫布頂端用“長方形”工具化一個50px高的長方形,就如圖所示，這個長方形是用作導(dǎo)航的.

為其添加陰影效果.參數(shù)如圖所示.
第十二步
開始話導(dǎo)航啦.使用“圓角工具” ，設(shè)置半徑為5px,畫一個圓角長方形，用顏色 #f6a836 填充它, 之后給他添加以下效果:
1.內(nèi)陰影- 顏色: #ffffff, 混合模式:正底疊加, 透明度: 60%, 角度: 120*, 距離: 7px, 大小: 6px.
2.內(nèi)發(fā)光 - 混合模式: 正常, 顏色: #ffffff, 大小: 4px. 其他參數(shù)默認設(shè)置.
3.描邊 - 大小: 1px, 位置: 內(nèi)部, 顏色: #ce7e01.

Ctrl+鼠標(biāo)點擊層產(chǎn)生如圖選區(qū). 選擇： 選擇-> 修改 > 收縮 然后在彈出框中輸入1px，確定.

在上面再建一層, 把混合模式設(shè)置成疊加 ,然后好像第五步那樣加照亮效果,不過這次用的是小筆刷 . 然后就是增加導(dǎo)航文字了.我用 Arial 字體作為導(dǎo)航的連接字體, 所有效果設(shè)置為 “無”.
第十二步
現(xiàn)在我們開始創(chuàng)建搜索框, 圓角長方形，半徑5px,在如第四步所示的網(wǎng)格的右邊、頂端灰色背景網(wǎng)