從來木有想過會在站酷發教程，一直覺得那是大神特別牛逼干的一件事，后來看了很多教程，發現寫教程的都是大神（因為好多人

說他們寫教程總會漏掉某個步驟，然后我們這些菜鳥琢磨了半天，開個玩笑，哈哈），設計這個行業需要太多的人出來分享，互聯

網行業更是如此。

第一次寫教程，寫給自己，也寫給那些還出于初級階段的設計愛好者們。

在設計中有很多人可以做出高逼格的效果、也有很多人連最基本的細節問題都要花費很長的時間去琢磨，比如我，嘿嘿...

今天這篇文章寫一下PS里面最基礎的網格背景如何制作，而且要美觀喲。

會的同學和大神請忽略掉我這篇文章

先來看看從網上搜羅到的一張圖片，突然間覺得這個網格背景很好看，看起來很簡單的網格，其實做起來也很簡單，要做到細致精

美就需要好好思考一下了。

有同學會畫一根直線，然后shift+alt在橫向與縱向不斷復制...

（這個方法會累死的有木有？）

今天給菜鳥“設計師”們分享一種方法叫做“定義圖案”，

很多人都知道這種方法，可是做的時候難免忽略掉細節問題。

廢話不多說，開始干...

1，ctrl+n新建畫布，按照如下圖片設置（請忽略掉我是一個強迫癥）

2，給畫布填充任意一個顏色，既然你和我較真，我就用吸管工具選取和那張圖片同樣的背景色吧。

3，接下來干什么呢？畫布建好了，當然是要畫網格了，怎么畫...........這就是教程開始的地方了，我們用定義圖案的方法來完成網格繪制。所以，繼續新建一個畫布文檔（50*50），如下圖所示。

4，給我們的新畫布填充黑色，然后放大視圖到500%便于參考。選擇直線工具，在橫向畫一條寬50像素，高度為1像素的直線，

如下圖所示。并用左手按住shift+alt，右手拖動鼠標復制出剩下的幾條直線，拖動間隔為10像素。

5，同樣的道理，在縱向上也如此操作，如下圖所示

6，接下來我們把這個網格的四條邊上的直線透明度降為76（數值自己定，我說了我是個強迫癥），網格內部的直線透明度統一降為21，開始定義圖案，編輯—定義圖案，給圖案隨意取個名字你能分辨得出就好了，然后點擊確定按鈕。

7，接下來回到第一次新建的畫布開始用我們的自定義圖案繪制網格吧，沒錯，接下來就是見證奇跡的時候了。選擇油漆桶工具，

在左上角的油漆桶子菜單里面選擇圖案，并點擊旁邊的倒三角符號，在下拉菜單中去找到你剛才定義的圖案，一般會是在最后一個。

8，然后在背景圖層上面再新建一個圖層用以填充網格圖案，用選中的油漆桶圖案在新建的圖層上面點擊就好了，你會發現網格就填充好了，如下圖所示。

9，我們來看看我們做出來的這張圖和之前的那張圖。

10，通過對比，我們可以看出，為什么人家的網格那么好看呢，我們的網格好像不是很好看呢。為什么我們的網格線那么粗，人家的網格就那么細致呢，同樣都是1像素的單位，為什么看起來就不一樣呢？難道在PS里面還可以選擇0.5像素嗎？或者更小的像素嗎？

有的同學會說，調一下新建的網格背景的透明度就好了，你可以試試喲，即使調了透明度，效果還是不理想，即使你放大縮小看，依然沒有人家的好看。

我覺得那一定是哪里出了問題了，為了解決掉這一問題，我們繼續分析吧.....

11，我們來放大看看我們的網格背景，看看他到底為何那么粗，誰讓他那么粗的，誰允許他那么粗的？我們放大到3200%，可以看到在參考線下，我們能看到一像素的網格是多大了。這一步調出參考線（快捷鍵ctrl+r），設置參考線單位為像素。

12，通過放大網格背景來看，我們終于發現了貓膩，原來有的直線占據了2像素，有的直線占據了1像素，所以才導致了最終的效果顯示那么粗狂，一點也不符合我們的審美有木有。定義圖案的時候我們明明是畫的一像素直線啊，即使在縱向和橫向都是如此，

為什么油漆桶刷出來就出現了2像素的直線了呢？我們不妨回到定義圖案PSD文檔去看看是怎么回事。

13，觀察上圖有木有得出一點思考，2像素是從哪里冒出來的，說好了的一像素呢？經過分析，我得出的結論是問題出在這里，如下圖紅色標注所示。當我們去掉這兩條直線重新定義圖案看看會出現怎樣的效果。

14,去掉這兩條直線以后，整個網格圖案就是未閉合的圖案，此時我們再用同樣的方法去重新定義圖案，并給圖案取個名字方便識別。然后回到之前的畫布，再去用油漆桶工具刷一次，看看是怎么樣的效果吧。

15，通過再一次重新定義圖案，再一次油漆桶粉刷，我們得出下圖效果。（記得降低網格圖層整體透明度到30%左右），順便對比一下之前的圖，看看效果有么有提升。

16，經過重新定義圖案，我們發現問題就是出在了那里對不對，原因是為什么呢，是因為閉合的網格圖案在用油漆桶工具粉刷的時候自動合并了相同的網格，造成了邊緣疊加，也就是說1像素的直線經過疊加就變成了2像素的直線，為了解決這一問題，我們在網格圖案定義的時候去掉邊緣直線，讓圖案在用油漆桶粉刷的時候不用重合邊緣就行了。

至于主要網格和次要網格的區分，就取決于你在定義圖案的時候，對邊緣直線和網格內部直線透明度的區分了。

17，設計有時候就是這么好玩，一像素的區分就會帶來不一樣的整體效果，尤其是在UI設計這個行業，需要太多的細節把控。希望這篇文章能給設計行業的新朋友們帶來不一樣的思考角度，這篇文章也送給自己。希望小伙伴們喜歡，希望編輯給我上首頁啊有木有。高清晰分辨率五碼教程有木有...

也希望各位大牛把你們學到的知識拿出來分享一點哦，多多交流。

第一期寫教程，求板磚，求交流，求朋友，求推薦，求分享。

再說了，點一下又不會懷孕...