使用960柵格系統設計簡潔網站

使用960柵格系統設計簡潔網站

教程我們將學習如何使用960柵格系統設計網站界面。該柵格系統會優化網站設計流程。

最終效果預覽

1.新建文檔

參數：寬1680px、高1100px，背景亮灰色（#F9F9F9）

2.添加網格

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

下載960柵格系統，地址http://960.gs/

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

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

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

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

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

3.開始設計

現在柵格系統建立完成，可以開始設計了。我們把整個網站分成5個大部分：

頁眉

插圖

內容區-左

內容區-右

頁腳

4.添加頁眉

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

5.插入你的logo

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

6.添加導航

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

7.添加插圖區

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

8.創建插圖區背景

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

9.添加插圖區背景

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

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

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

下面顯示參考線，接下來的工作就是確保插圖區“grid”圖層的網格線在960px寬度以內。

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

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

10.添加插圖區文本

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

11.添加滑動展示

顯示參考線，使用矩形工具在右側兩條參考線間創建選區，高度占8個柵格（即140px），然後減去上下各一個像素來制作投影。

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