構(gòu)成網(wǎng)格的關(guān)鍵要素：版心、頁(yè)邊距、欄和欄間距
頁(yè)邊距與版心
頁(yè)邊距是指版面上下左右留“白”的范圍。
版心是指頁(yè)邊距所包裹的區(qū)域。目的是為了使內(nèi)容看上去處于安全范圍內(nèi)，也符合人的視覺(jué)習(xí)慣
注：所有元素都應(yīng)該在版心內(nèi)編排，但并不是絕對(duì)不能超出版心，在已有規(guī)則下，我們可以將部分重要性低的元素放置到版心之外，從而為畫(huà)面帶來(lái)動(dòng)感與張力
欄和欄間距：
“欄”就是放置文字或圖片模塊的范圍，“欄間距”就是欄與欄之間的距離。
在建立好“欄”的標(biāo)準(zhǔn)范圍之后，主觀(guān)將元素和內(nèi)容進(jìn)行占比分配，根據(jù)實(shí)際需要跨欄應(yīng)用，讓排版更具靈活性。
在PS中繪制
在PS默認(rèn)的單位為“像素”，而我們做的海報(bào)、畫(huà)冊(cè)等印刷品使用的單位為“毫米”。所以要先執(zhí)行【編輯】—【首選項(xiàng)】—【單位與標(biāo)尺】，把“標(biāo)尺”單位改為“毫米”。
再執(zhí)行【視圖】—【新建參考線(xiàn)版面】”，分別設(shè)置列、行數(shù)、裝訂線(xiàn)（欄間距）、邊距。如本次我們要設(shè)置的是5X8，欄間距為5毫米、邊距為10毫米的網(wǎng)格：
新建好的網(wǎng)格如下：（快捷鍵Ctrl+；可以顯示或隱藏網(wǎng)格）
在AI中繪制
在AI中沒(méi)有繪制參考線(xiàn)的命令，可以先使用“矩形工具”，繪制矩形邊框作為版心。
打開(kāi)【對(duì)象】-【路徑】-【分割為網(wǎng)格】。點(diǎn)擊“預(yù)覽”，行的數(shù)量選擇8，欄的數(shù)量選擇5，間距選擇5，點(diǎn)擊確定后按“ctrl+5”,轉(zhuǎn)成參考線(xiàn)。
新建好的網(wǎng)格如下：（快捷鍵Ctrl+；可以顯示或隱藏網(wǎng)格）
在ID中繪制
ID為專(zhuān)業(yè)的圖文排版軟件，在進(jìn)行書(shū)籍畫(huà)冊(cè)排版時(shí)，一般只設(shè)置豎向的分欄。在新建文件時(shí)，選擇“邊距和分欄”。
在對(duì)話(huà)框中分別設(shè)置邊距、欄間距和欄數(shù)即可：
然后執(zhí)行【版面】—【創(chuàng)建參考線(xiàn)】，
分別設(shè)置行數(shù)、欄數(shù)、欄間距：
設(shè)置好的網(wǎng)格如下：（按W鍵可以隱藏或顯示網(wǎng)格）
設(shè)計(jì)時(shí)設(shè)置網(wǎng)格是為了幫助你讓頁(yè)面中元素布局更加規(guī)范且統(tǒng)一，易于用戶(hù)理解，靈活運(yùn)用網(wǎng)格不僅不會(huì)限制編排形式，還會(huì)使版面變得更加清晰、生動(dòng)、統(tǒng)一、有條理。
原文地址：藝海拾貝Design（公眾號(hào)）
作者：鄧海貝
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何在PS、AI、ID中快速繪制“網(wǎng)格”
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)