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

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

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

最終效果預覽

1.建立文檔

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

2.添加網格

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

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

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

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

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

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

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