開(kāi)發(fā)響應(yīng)式網(wǎng)頁(yè)的時(shí)候經(jīng)常會(huì)使用12柵格作為響應(yīng)標(biāo)準(zhǔn)，這就要求設(shè)計(jì)在設(shè)計(jì)頁(yè)面的時(shí)候也使用12柵格標(biāo)準(zhǔn)。我們可以手動(dòng)通過(guò)輔助線創(chuàng)建柵格，但是這樣太麻煩了。所以我們可以使用一個(gè)創(chuàng)建柵格的動(dòng)作。
PS的創(chuàng)建柵格動(dòng)作下載地址：
鏈接：https://pan.baidu.com/s/1YykSk10M_KFYtzHkhKDUoA
提取碼：h8y9
如何使用PS創(chuàng)建柵格的動(dòng)作？
Step1
首先在百度云盤(pán)里下載我提供的動(dòng)作文件，它看起來(lái)是下面這個(gè)樣字，960_GRIDS.atn 文件后綴atn的意思就是action，photoshop可以識(shí)別這個(gè)文件。
Step2
然后我們將這個(gè)文件放置到Ps的目錄下的acitons文件夾當(dāng)中。C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Actions路徑大概是我這個(gè)樣字的，不過(guò)具體的路徑取決于你將PS安裝在什么地方。這個(gè)文件夾先不要關(guān)閉后面用到。
Step3
最后打開(kāi)PS隨便新建一個(gè)文檔，點(diǎn)擊菜單上面的窗口，動(dòng)作打開(kāi)動(dòng)作面板。
然后我們回到上一個(gè)步驟當(dāng)中說(shuō)不要關(guān)閉的文件夾C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Actions雙擊960_GRIDS.atn，創(chuàng)建12柵格的動(dòng)作就會(huì)被加載到動(dòng)作列表當(dāng)中，像下圖這個(gè)樣字。
當(dāng)然你也可以不用打開(kāi)PS直接雙擊960_GRIDS.atn啟動(dòng)PS，再新建文檔。
我們?cè)趧?dòng)作面板當(dāng)中選中12 Column Grid。不是前面的打勾或者小方框，是選中，選中以后條目的背景就會(huì)有灰度，最后點(diǎn)擊播放的三角箭頭，Photoshop就會(huì)自動(dòng)創(chuàng)建一個(gè)12柵格的文檔。
附帶的這個(gè)動(dòng)作會(huì)創(chuàng)建一個(gè)GRID OVERLAY的圖層。
TIPs
1.使用這個(gè)柵格系統(tǒng)的時(shí)候可以改變GRID OVERLAY的透明度，這樣使用的時(shí)候就可以透過(guò)柵格來(lái)掌握元素的比例了。
2.對(duì)已經(jīng)編輯過(guò)的PSD文檔，在創(chuàng)建這個(gè)柵格系統(tǒng)到時(shí)候會(huì)對(duì)每一個(gè)步驟的修改彈出對(duì)話框進(jìn)行詢問(wèn)，因?yàn)槟J(rèn)情況下這個(gè)動(dòng)作會(huì)把文檔修改成1020x700px的文檔，如果你的文檔不是這個(gè)尺寸，文檔發(fā)生變化的時(shí)候就會(huì)要求你確認(rèn)。你可以在確認(rèn)的過(guò)程當(dāng)中填寫(xiě)自己想要的文檔值，不過(guò)我建議還是在進(jìn)行設(shè)計(jì)之前就提前把12柵格創(chuàng)建好，然后再對(duì)文檔尺寸進(jìn)行調(diào)整。
3.這是一個(gè)960grids12柵格的PS創(chuàng)建動(dòng)作，960的目的是為了兼容盡可能多的機(jī)器，比如一些老舊式的4：3的機(jī)器。雖然在實(shí)際應(yīng)用的時(shí)候可能已經(jīng)不多了，不過(guò)我認(rèn)為這種兼容性的保證還是有必要的。
4.如果你設(shè)計(jì)的是全尺寸的網(wǎng)站，推薦創(chuàng)建好柵格以后按照比例放大。
