你是否曾經想過設計一個漂亮的網頁，但是卻不知道怎樣入手?說實話，幾年前我也是這樣。當我瀏覽網頁的時候我看到這么多好看的網頁，我就希望自己有技術創作這樣的設計作品。
你是否曾經想過設計一個漂亮的網頁，但是卻不知道怎樣入手?說實話，幾年前我也是這樣。當我瀏覽網頁的時候我看到這么多好看的網頁，我就希望自己有技術創作這樣的設計作品。
今天我可以這么做了，而且我將教你怎么做這樣的設計!從根本上，對于這種設計你需要一點photoshop的操作技能和觀察細節的能力。通過以下的教程，我將會指出其中極細微的細節之處，而這些細節講使你的網頁設計漂亮起來。打開photoshop，我們開始啦!
此文為網頁設計的經典教程，早期的很多網頁設計教程書刊都有摘錄本篇文章。特此分享給想通過PS制作網頁的新手朋友們：)
先看效果圖
第一步 — 下載960網格模板
我一直以來做的設計幾乎全部是基于960網格模板的. 因此在我們開始創作之前，先下載這個模板. 你能在960.gs上找到這些模板. 下載之后解壓zip里面關于PSD的模板. 你會發現有兩種規格: 一個是12欄式的而另一個是16欄式的. 他們的區別就像名字所說的，一個是按12欄分布一個按16欄. 更詳細的介紹一下吧, 如果你的設計里面分3個區塊你就選擇12欄式的,那是因為12能被3整除; 同理假如你的設計分四個區塊, 你可以選12欄式或者16欄式，那時因為12和16都可以被4整除. 你會發現這個技巧將用于下面教程.
第二步 — 構造你想象的結構
在我們打開PSD網格模板創作前, 我們首先需要先構造一下想象中的結構. 從上面的這張圖，你可以看出來：因為在一個排版中又有排版，所以這是一個有點復雜的結構.
第三步
構造了結構之后我們繼續. 打開16欄式的PSD模板文件. 打開 "圖像 >畫布大小" . 把畫布的寬度設置為 1200px 高度設置為 1700px .把背景色設置為 #ffffff 既白色.
第四步
用長方形工具在頂部畫一個寬100%高大概80px的長方形. 用顏色： #dddddd 填充它.
第五步
在長方形那層上面創建一個新層. 按住CRTL鍵鼠標點擊長方形層. 長方形就被選中了，然后把目標移至剛建的新層上. 選擇半徑 600px 的軟筆刷(如圖), 把其顏色設置為白色, 然后就像圖片所示那樣在選框上邊緣點幾下. 通過這個技巧你畫出了一個微妙的照亮效果. 你現在可以把這兩層聯合起來了.
第六步
建一個新層，再用長方形工具如圖所示在上端畫一個深灰色的小長方形.
第七步
在距離上端長方形500px處開始畫一個寬 100% 高 575px 的長方形. 設置其由 #d2d2d0到 #ffffff 的漸變色, 角度為-90,縮放為100%
第八步
現在我們如第五步那樣添加照亮效果. 這個技巧我們將很頻繁地使用;因此下次用到的時候我只提示是第五步的效果 .
在當前層之上簡歷一個新層. Ctrl+鼠標點擊這個大的長方形. 選擇 600px的軟筆刷, 設置顏色為白色，如圖所示對選區的邊緣點擊多下.
第九步
創建一個新層畫一個400px高的長方形. 這是用作我們網頁頁頭的. 給它設置一個線性漸變，由顏色 #2787b7 to #258fcd.
以下展示顏色的微妙變化：
第十步
在頁首長方形塊底端畫一條1px的灰藍色的線, 混合屬性中添加陰影效果. 陰影參數: 正底疊加, 透明度: 65%, 方向: -90, 距離: 1px ， 寬度: 6px. 之后再建一個新層，在灰藍色線下面畫一條1px的白線.通過這種方式，我們就可以創建一個輪廓鮮明的邊緣. 可以說在你的設計中，你可以把這個技巧用于其他色塊.
第十一步
創建一個新層,在畫布頂端用"長方形"工具化一個50px高的長方形,就如圖所示，這個長方形是用作導航的.
為其添加陰影效果.參數如圖所示.
第十二步
開始話導航啦.使用"圓角工具" ，設置半徑為5px,畫一個圓角長方形，用顏色 #f6a836 填充它, 之后給他添加以下效果:
1.內陰影- 顏色: #ffffff, 混合模式:正底疊加, 透明度: 60%, 角度: 120*, 距離: 7px, 大小: 6px.
2.內發光 – 混合模式: 正常, 顏色: #ffffff, 大小: 4px. 其他參數默認設置.
3.描邊 – 大小: 1px, 位置: 內部, 顏色: #ce7e01.
Ctrl+鼠標點擊層產生如圖選區. 選擇： 選擇-> 修改 > 收縮 然后在彈出框中輸入1px，確定.
在上面再建一層, 把混合模式設置成疊加 ,然后好像第五步那樣加照亮效果,不過這次用的是小筆刷 . 然后就是增加導航文字了.我用 Arial 字體作為導航的連接字體, 所有效果設置為 "無".
第十三步
