背景教程，手把手教你做很有逼格的網(wǎng)格背景(5)

13，觀察上圖有木有得出一點(diǎn)思考，2像素是從哪里冒出來(lái)的，說(shuō)好了的一像素呢？經(jīng)過(guò)分析，我得出的結(jié)論是問(wèn)題出在這里，如下圖紅色標(biāo)注所示。當(dāng)我們?nèi)サ暨@兩條直線重新定義圖案看看會(huì)出現(xiàn)怎樣的效果。

14,去掉這兩條直線以后，整個(gè)網(wǎng)格圖案就是未閉合的圖案，此時(shí)我們?cè)儆猛瑯拥姆椒ㄈブ匦露x圖案，并給圖案取個(gè)名字方便識(shí)別。然后回到之前的畫(huà)布，再去用油漆桶工具刷一次，看看是怎么樣的效果吧。

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

16，經(jīng)過(guò)重新定義圖案，我們發(fā)現(xiàn)問(wèn)題就是出在了那里對(duì)不對(duì)，原因是為什么呢，是因?yàn)殚]合的網(wǎng)格圖案在用油漆桶工具粉刷的時(shí)候自動(dòng)合并了相同的網(wǎng)格，造成了邊緣疊加，也就是說(shuō)1像素的直線經(jīng)過(guò)疊加就變成了2像素的直線，為了解決這一問(wèn)題，我們?cè)诰W(wǎng)格圖案定義的時(shí)候去掉邊緣直線，讓圖案在用油漆桶粉刷的時(shí)候不用重合邊緣就行了。

至于主要網(wǎng)格和次要網(wǎng)格的區(qū)分，就取決于你在定義圖案的時(shí)候，對(duì)邊緣直線和網(wǎng)格內(nèi)部直線透明度的區(qū)分了。

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

也希望各位大牛把你們學(xué)到的知識(shí)拿出來(lái)分享一點(diǎn)哦，多多交流。

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

再說(shuō)了，點(diǎn)一下又不會(huì)懷孕...