設計網頁的網格方法1

第一種方法使用GuideGuide?卡梅倫McEfee建立垂直列。這Photoshop插件被認為是處于測試階段，但是從我與它的經驗的一切工作得很好，甚至有談GuideGuide 2的發布，其中將包括更多的功能。GuideGuide頁面上可以找到安裝說明。還有一個使用它的視頻教程是由羅素布朗一起在Adobe 。

成立于5秒您的網格

1. 確定利潤率列和排水溝寬度，數量。然后點擊“創建指南”。
2. 如果你設計樣稿的畫布寬，做快速的數學運算，使保證金長度要限制你的960像素的網格允許。例如，如果在畫布是1200像素寬，然后左，右邊緣將每個120像素。

例如12列設置為120像素的20萬像素的排水溝和利潤率。

您還可以設置基線網格這樣，但你最終很多導游。一個更好的選擇可能是方法上的一個有特色的的邁克貴金屬的方法及工藝視頻 ...

方法和工藝的可擴展的基線網格

這里是一個步驟的簡要介紹設立一個可擴展的基線網格。

1. 建立網格的基準值，然后創建您的圖案模板。基線網格是由領先的正文中（或行高）。例如，如果您的設計的主體副本是在13點Helvetica，在18分的領先，那么你將成立一個18像素的基線網格。
2. 創建一個Photoshop文件，該文件是您的基線網格的高度，填補了底部的像素，并留下其余的像素透明。在這種情況下，畫布的尺寸將1個像素寬和18像素高。
3. “全選”，然后保存為一個新的模式。您可以通過編輯→定義圖案...
   
4. 轉到調整圖層→模式，并選擇新創建的網格圖案。
   
5. 根據需要，調整不透明度。

列和基線網格1的方法的一個例子。

優點

• 你會得到一個可選的基線網格，您可以使用獨立的垂直的柱網。基線網格，可以創建視覺上的混亂，當在頂部的設計樣稿奠定。使用這種方法，它可以只在需要時進行切換。
• 如果你喜歡使用您的網格指南，這是更好的解決方案。
• 您可以隱藏和顯示網格通過一個簡單的快捷方式。

缺點

• 使用垂直參考線來標記文檔中的其他元素，可很難，因為你可能會混淆他們與電網。
• 方法2相比，網格你的選擇是不具體或全面（如設置的橫向模塊的高度）。
• 數學網格線的確定，不一定會配合像素網格。這意味著你的導游，可以在某些情況下，下降不均，并最終被定位實際像素的中間。
• 這種方法需要兩個獨立的進程相比只是一種方法，即將來創建一個垂直和基線網格，。

設計網頁的網格方法2

模塊化網格模式是所有功能于一身的的網格解決方案 。該工具創建一個垂直的柱狀網格和基線網格所有作為一個模式 。采用模塊化的網格模式有兩種方法 ：

除了對Photoshop?的應用程序面板，這也適用于煙花，GIMP和微軟Expression設計 。請注意，您必須有最新的軟件（Adobe CS5或等值的其他應用程序之一中）和本小組的互聯網連接工作。話雖這么說，如果您已經創建了一個模式，并將其保存在資料庫中，然后你就可以訪問它，而無需任何其他 。

Web應用程序
瀏覽器，Firefox，Safari和Opera。Web應用程序使您可以創建一個網格模式和所有格式的瀏覽器直接下載 。

無論你選擇，隨便挑一個模塊的寬度，排水溝寬度和基線數量，以及模塊化的網格模式，沒有休息。您也可以指定一個水平模塊的高度。

優點

• 這是一種快速的方式來獲得這一切，全在一層。
• 您可以選擇下載一個Photoshop的格局文件，PNG，或透明遮罩。
• 您可以標簽的模式，并把它們在一個文件夾，這樣您就可以回來，幾乎沒有設置需要在所有的電網。
• 釋放的指南被用于其他目的。
• 您可以指定高度垂直模塊，建立一個整體的垂直的節奏。
• 網格可以覆蓋不同程度的不透明，讓你設計，你可以把它少分心。
• 支持比Photoshop的應用。

缺點

• 如果你的畫布是廣泛的，然后進行網格模式將使其擴展到整個頁面，這可能是惱人的，使其難以看到的內容的界限。這可以是固定的幾種方法：
  1. 應用圖層蒙版來約束電網只是主要內容區。
  2. 繪制一個矩形區域（例如，960 × 1200像素）的主要內容的大小，并適用于網格圖層樣式，在這種情況下的填充設置為0％。
• 這種方法迫使你選擇基線網格，防止您剛剛創建垂直柱狀模塊。
• 它需要手動隱藏和顯示網格層，沒有鍵盤快捷鍵的好處。

總結的幾點思考

我們希望這些方法將提高您的效率和精度，在建立一個網格。最后，你的方式成立網格將取決于您的工作流程。評估您的需求，然后選擇最適合他們的方法。兩種方法都需要最少的設置，但可以節省大量的時間和挫折。

其他資源

如果既不方法您的利益，相當有幾個模板也將做的工作。我建議檢查柯以敏瓦格納的布局模板和羅比曼森的960萬像素的網格模板 。此外，網格系統鏈接到一些優質的資源和工具 。