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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

還有不懂的請聯(lián)系我

設(shè)計之路還很長，歡迎一起交流。

以上就是PS繪制高逼格網(wǎng)格背景教程，希望大家喜歡！

最新評論