本教程主要使用Photoshop設計簡潔風格的網(wǎng)頁模板，詳細介紹如何使用960柵格系統(tǒng)設計網(wǎng)站界面。該柵格系統(tǒng)會優(yōu)化網(wǎng)站設計流程。下面讓我們一起來學習吧

最終效果預覽

1.新建文檔

參數(shù)：寬1680px、高1100px，背景亮灰色(#F9F9F9)

2.添加網(wǎng)格

網(wǎng)上有很多柵格系統(tǒng)可供下載，是我們建立屬于自己的柵格系統(tǒng)最好的參考。如果你以前沒有使用過柵格系統(tǒng)，本文就是簡單的入門。它讓你的工作變得輕松而有章可循，是原型布局最得力的助手。

下載960柵格系統(tǒng)，地址http://960.gs/

下載完成后，來到“templates”文件夾，使用photoshop打開960pix寬、12列柵格。

下面我們要把柵格導入到我們的工作文檔。選擇“12列柵格”圖層組，拼合圖層組并復制粘貼進工作文檔。

現(xiàn)在我們需要基準柵格。基準柵格是元素留白、行高等取值的重要參考。首先，新建文件，寬搞均為24px，刪除背景，新建一條1px高度的單線，置于畫布最底部。定義圖案：編輯-定義圖案，給圖案起一個容易記憶的名字。

返回工作文檔，新建圖層，填充圖案：編輯-填充，使用剛才定義圖案進行填充。

最后，我們要使用參考線標記我們的工作區(qū)域。新建參考線：視圖-新建參考線，選擇“垂直”，在360px、840px、1320px新建參考線。

3.開始設計

現(xiàn)在柵格系統(tǒng)建立完成，可以開始設計了。我們把整個網(wǎng)站分成5個大部分：

1.頁眉

2.插圖

3.內(nèi)容區(qū)-左

4.內(nèi)容區(qū)-右

5.頁腳

4.添加頁眉

我們習慣于自上而下的設計。選擇矩形選擇工具，繪制一個橫貫整個畫布寬度的矩形選區(qū)，高度120px。打開標尺工具能保證繪制的準確度，120px高剛好占到5個垂直方向的柵格，然后填充深灰色(#2C2C2C)。這個頁眉主要用于放置logo和導航欄。

5.插入你的logo

在頁眉的左上方插入logo，對齊到第二列柵格，這樣就給了網(wǎng)站40px的內(nèi)邊距。本項目Logo字體我采用50pt Century Gothic，填充亮藍色(#ADC7D9)，通過對文字“grid”加粗、填充白色來跟前面的文字“blue”區(qū)分。接下來給Logo添加內(nèi)陰影效果，降低內(nèi)陰影不透明度到25%，距離：2px、大小：5px。

6.添加導航

導航欄我們采用以文字為主的列表形式，這樣可以營造干凈整潔的視覺效果。選擇18pt Arial寫入導航欄文字，“Home”使用白色，其他文字都使用亮灰色(#BBBBBB)。調(diào)整頁眉所有的元素垂直居中對齊。

7.添加插圖區(qū)

我把這一部分稱作插圖區(qū)是根據(jù)他的用途來命名的-他展示了頁眉的主要信息。重復頁眉的做法繪制矩形選區(qū)，高度240px，然后填充跟logo一致的亮藍色(#ADC7D9)。我們來添加漸變填充，混合模式“疊加”，不透明度30%。

8.創(chuàng)建插圖區(qū)背景

公司名為“Bluegrid”，為了突出主題，我們創(chuàng)建一個柵格背景。使用跟前面創(chuàng)建基準柵格相同的辦法。新建文件寬高均為25px，刪除北京，繪制1px的單線置于畫布的底部和右邊緣，然后定義圖案。

9.添加插圖區(qū)背景

在所有圖層上方新建圖層，編輯-填充，使用新定義的圖案填充。

旋轉(zhuǎn)15°，應用白色疊加。新建空白圖層，跟白色柵格圖層拼合并命名為“grid”。

混合模式選擇“柔光”，按住Ctrl鍵單擊插圖區(qū)背景層取得選區(qū)，ctrl+Shift+I反選后刪除多余的柵格。

下面顯示參考線，接下來的工作就是確保插圖區(qū)“grid”圖層的網(wǎng)格線在960px寬度以內(nèi)。

選擇漸變工具，顏色設置黑色到透明。我們將使用該漸變來隱藏掉960px寬度以外的部分。

確保漸變類型為“線性漸變”，沿著960px參考線最左邊一條拖拽鼠標，直到中間一條參考線停止，右側(cè)相同。

10.添加插圖區(qū)文本

插圖區(qū)放置一整頁的插圖，這里我們將采用純文本的展示方式。文字大小45pt、Arial，寫入準備好的宣傳口號。緊接著在下方使用17pt寫入一些介紹文字。最后把文字跟Logo一樣左對齊。

11.添加滑動展示

顯示參考線，使用矩形工具在右側(cè)兩條參考線間創(chuàng)建選區(qū)，高度占8個柵格(即140px)，然后減去上下各一個像素來制作投影。

為滑動展示區(qū)添加投影，顏色#2C2C2C，距離1px，大小10px。

接下來我們需要在滑動展示區(qū)放置一些臨時的替代內(nèi)容，這里我把自己blog的截屏拿了過來。設置圖片尺寸跟滑動展示區(qū)背景圖一致，選擇-編輯-收縮，10px，反選后刪除多余區(qū)域。

12.內(nèi)容部分

使用矩形選擇工具，選取插圖區(qū)下方的部分，然后選擇漸變工具，顏色設置為#F0F0F0到透明，向下拖拽完成漸變。注意不要拖拽太遠，要保證頁面最底部的顏色信息在#F9F9F9左右。

13.左側(cè)內(nèi)容區(qū)

普通文字樣式：Arial 18pt #9C9C9C

帶下劃線鏈接樣式：#A3BBCC

添加說明文字

14.添加服務列表

首先為列表添加標題，文字樣式：Arial 25pt 加粗 #262626.

列表內(nèi)容的文字樣式：Arial 18pt #9C9C9C。

列表前的圓點，你可以使用橢圓工具繪制也可以使用快捷鍵Alt+7添加后改變顏色(#A4BCCD)來完成。

最后把所有的內(nèi)容對齊到柵格。

重復這個過程，添加其他內(nèi)容。

15.右側(cè)內(nèi)容區(qū)

右側(cè)內(nèi)容區(qū)用來展示最近新聞的精選集。

首先為列表添加標題，文字樣式：Arial 25pt 加粗 #262626，然后水平對齊到左側(cè)內(nèi)容區(qū)的標題。

接下來為新聞添加標題，文字樣式 Arial 18pt #A4BDCD，然后跟左側(cè)內(nèi)容區(qū)文本對齊。

新聞列表的文字樣式：Arial 16pt #9C9C9C。

使用相同的樣式制作另外2份新聞。

16.頁腳

我們最后的一個部分就是頁腳，用來放置一個登陸框、聯(lián)系信息和少量鏈接。

使用矩形選擇工具創(chuàng)建選區(qū)，并且填充深灰色(#262626)。

我們來增加表單。首先創(chuàng)建標題，文字樣式：Arial 20pt Bold (#FFFFFF)，置于頁腳的左側(cè)。然后使用矩形選擇工具創(chuàng)建2個選區(qū)作為輸入框，填充白色，輸入框默認文字樣式：Arial 16pt #9C9C9C。

使用圓角矩形繪制提交按鈕，然后添加內(nèi)陰影，不透明度改為305,大小和擴展均為0，距離10px。添加“忘記密碼”鏈接，樣式：Arial 13pt 下劃線 #A4BDCD.

17.頁腳的右半部分

最后我們來完成聯(lián)系信息。添加標題，文字樣式：Arial 20pt B加粗 (#FFFFFF) ，并且水平對齊到左側(cè)表單標題。然后添加聯(lián)系信息，文字樣式：Arial 16pt #FFFFFF.

18.檢查布局和平衡

使用柵格和參考線來檢查元素是不是對齊、并保持一致性。

如果沒有，請及時調(diào)整。

19.歡呼，你已經(jīng)完成了

值得慶賀，你已經(jīng)小小領(lǐng)會了如何使用柵格系統(tǒng)布局網(wǎng)站，可以自定義屬于自己的基本系統(tǒng)。

強烈建議你多應用該系統(tǒng)以達到純熟的程度，讓它變成你的第二感官。使用該系統(tǒng)會使作為設計師的你工作倍兒輕松。

點擊下載本文PSD源文件