如何在Photoshop中設(shè)計(jì)網(wǎng)頁(yè)的網(wǎng)格！

設(shè)計(jì)網(wǎng)頁(yè)的網(wǎng)格方法1

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

成立于5秒您的網(wǎng)格

1. 確定利潤(rùn)率列和排水溝寬度，數(shù)量。然后點(diǎn)擊“創(chuàng)建指南”。
2. 如果你設(shè)計(jì)樣稿的畫布寬，做快速的數(shù)學(xué)運(yùn)算，使保證金長(zhǎng)度要限制你的960像素的網(wǎng)格允許。例如，如果在畫布是1200像素寬，然后左，右邊緣將每個(gè)120像素。

例如12列設(shè)置為120像素的20萬(wàn)像素的排水溝和利潤(rùn)率。

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

方法和工藝的可擴(kuò)展的基線網(wǎng)格

這里是一個(gè)步驟的簡(jiǎn)要介紹設(shè)立一個(gè)可擴(kuò)展的基線網(wǎng)格。

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

列和基線網(wǎng)格1的方法的一個(gè)例子。

優(yōu)點(diǎn)

• 你會(huì)得到一個(gè)可選的基線網(wǎng)格，您可以使用獨(dú)立的垂直的柱網(wǎng)?；€網(wǎng)格，可以創(chuàng)建視覺上的混亂，當(dāng)在頂部的設(shè)計(jì)樣稿奠定。使用這種方法，它可以只在需要時(shí)進(jìn)行切換。
• 如果你喜歡使用您的網(wǎng)格指南，這是更好的解決方案。
• 您可以隱藏和顯示網(wǎng)格通過一個(gè)簡(jiǎn)單的快捷方式。

缺點(diǎn)

• 使用垂直參考線來標(biāo)記文檔中的其他元素，可很難，因?yàn)槟憧赡軙?huì)混淆他們與電網(wǎng)。
• 方法2相比，網(wǎng)格你的選擇是不具體或全面（如設(shè)置的橫向模塊的高度）。
• 數(shù)學(xué)網(wǎng)格線的確定，不一定會(huì)配合像素網(wǎng)格。這意味著你的導(dǎo)游，可以在某些情況下，下降不均，并最終被定位實(shí)際像素的中間。
• 這種方法需要兩個(gè)獨(dú)立的進(jìn)程相比只是一種方法，即將來創(chuàng)建一個(gè)垂直和基線網(wǎng)格，。

設(shè)計(jì)網(wǎng)頁(yè)的網(wǎng)格方法2

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

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

Web應(yīng)用程序
瀏覽器，F(xiàn)irefox，Safari和Opera。Web應(yīng)用程序使您可以創(chuàng)建一個(gè)網(wǎng)格模式和所有格式的瀏覽器直接下載 。

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

總結(jié)的幾點(diǎn)思考

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

其他資源

如果既不方法您的利益，相當(dāng)有幾個(gè)模板也將做的工作。我建議檢查柯以敏瓦格納的布局模板和羅比曼森的960萬(wàn)像素的網(wǎng)格模板 。此外，網(wǎng)格系統(tǒng)鏈接到一些優(yōu)質(zhì)的資源和工具 。