3月份，Photoshop CS6 Beta版(下文簡稱PS CS6)發(fā)布公測(cè)，有著多項(xiàng)驚艷的新特性，工作中整天和像素打交道，感觸比較深的特性就是PS CS6支持矢量對(duì)象繪制、變換時(shí)像素自動(dòng)對(duì)齊網(wǎng)格。

當(dāng)然，對(duì)象繪制、變換時(shí)像素對(duì)齊網(wǎng)格并不是PS CS6獨(dú)有的功能，只是更智能更好用了，PS CS6的像素自動(dòng)對(duì)齊網(wǎng)格功能在繪圖過程中，無疑方便了很多，不必再擔(dān)心圖形邊緣會(huì)出現(xiàn)模糊，但是我們?cè)趯?shí)際的圖形設(shè)計(jì)過程中會(huì)發(fā)現(xiàn)，還是會(huì)經(jīng)常需要調(diào)整 一些路徑?jīng)]有完全對(duì)齊到網(wǎng)格產(chǎn)生的半透明的過渡像素，用來平滑圖形邊緣減少鋸齒感，或讓圖形看上去更飽滿、更細(xì)膩，我們稱其為次像素 (或亞像 素，Sub-pixel，一般用于屏幕顯示技術(shù)等領(lǐng)域)趁著 PS CS6正式版還未普及，以PS CS5為例，和大家探討矢量路徑圖形繪制時(shí)如何讓像素對(duì)齊網(wǎng)格，如何利用路徑調(diào)整次像素改善圖形的飽滿度的一些經(jīng)驗(yàn)，希望對(duì)大家有所啟發(fā)和幫助。

一、像素對(duì)齊網(wǎng)格

1.?對(duì)象繪制時(shí)像素對(duì)齊網(wǎng)格

像素對(duì)齊網(wǎng)格大的作用就是避免繪制圖形時(shí)出現(xiàn)虛邊，解決圖形模糊的問題，尤其是將畫布放大數(shù)倍去摳界面、圖標(biāo)細(xì)節(jié)時(shí)，精度可以達(dá)到像素級(jí)，讓設(shè)計(jì)師將精力更多的集中在創(chuàng)意表達(dá)層面，不必因?yàn)閾?dān)心模糊而謹(jǐn)慎的去操作，從而提高工作效率。

在PS CS5初始狀態(tài)時(shí)，只有當(dāng)畫布在100%比例下，也就是實(shí)際像素比例時(shí)，畫出來的圖形才不會(huì)模糊，放大或縮小畫布到其他比例下，即使打開網(wǎng)格進(jìn)行輔助，畫 出來的圖形也會(huì)模糊，如圖2所示，藍(lán)色圖形與紫色圖形分別為100%畫布下不打開網(wǎng)格，和非100%比例畫布下打開網(wǎng)格隨意繪制的相同大小的矩形，我們能 明顯的看到紫色圖形邊緣非常的模糊。

這時(shí)的網(wǎng)格沒有起到作用，是因?yàn)樵赑S CS5初始狀態(tài)時(shí)，網(wǎng)格的參數(shù)不是以像素為單位，而是毫米，如圖-3，選項(xiàng)窗口可以通過主菜單中“編輯>選項(xiàng)>常規(guī)”或快捷鍵Ctrl+K來打開。

想要在常規(guī)圖形 (矩形、圓角矩形、圓形) 繪制過程中，使像素在任何情況下都對(duì)齊網(wǎng)格，在PS CS5的選項(xiàng)窗口中，對(duì)“參考線、網(wǎng)格和切片”選項(xiàng)卡的網(wǎng)格參數(shù)進(jìn)行簡單的設(shè)置，并配合快捷鍵就可以做到。

圖3中可以看到網(wǎng)格線間隔的默認(rèn)值是25毫米，將單位改為像素，這時(shí)單位前面的數(shù)值會(huì)自動(dòng)變?yōu)?，這時(shí)的網(wǎng)格線并未與畫布上的像素格對(duì)齊，需要 手動(dòng)重新輸入數(shù)值，且網(wǎng)格線間隔數(shù)值與子網(wǎng)格數(shù)值必須相等，圖4展示的是在3200%比例下，兩種不同數(shù)值網(wǎng)格所呈現(xiàn)出的效果，可根據(jù)自己的喜好進(jìn)行調(diào) 整。網(wǎng)格可通過主菜單“視圖>顯示>網(wǎng)格“來顯示或隱藏，快捷鍵為Ctrl+’(回車左側(cè)的引號(hào)鍵)。

完成了如上設(shè)置，最后確?！敝鞑藛?gt;視圖>對(duì)齊”及“對(duì)齊到>網(wǎng)格“兩個(gè)選項(xiàng)已勾選，“對(duì)齊到>網(wǎng)格“選項(xiàng)在打開顯示網(wǎng)格的情況下才可編輯。

像素對(duì)齊網(wǎng)格設(shè)置完成，以后在非100%視圖下繪制常規(guī)圖形，只要打開網(wǎng)格輔助，就不會(huì)出現(xiàn)模糊情況。像素對(duì)齊網(wǎng)格在PS CS5中還是存在一定的局限性，受到圖形形狀的約束，當(dāng)使用線條工具、多邊形工具、自定義形狀工具繪制一些帶有傾斜邊緣或非直角的圖形時(shí)，還是無法保證所 有角點(diǎn)和邊緣對(duì)齊網(wǎng)格，當(dāng)然這里的模糊更多的是防鋸齒效果，可以利用網(wǎng)格手動(dòng)調(diào)整。

2.?對(duì)象變換時(shí)像素對(duì)齊網(wǎng)格

PS CS5中，長寬都是奇數(shù)或都是偶數(shù)時(shí)，進(jìn)行90°變換時(shí)都可以對(duì)齊像素，當(dāng)長寬數(shù)值分別是奇數(shù)和偶數(shù)時(shí)，再進(jìn)行順時(shí)針或逆時(shí)針90°變換就會(huì)使圖形模糊， 無法對(duì)齊到像素，這時(shí)可以先旋轉(zhuǎn)，然后打開網(wǎng)格進(jìn)行輔助，不要退出自由變換模式，拖動(dòng)對(duì)象，這時(shí)邊緣就會(huì)自動(dòng)吸附對(duì)齊網(wǎng)格。

二、利用次像素讓圖形更飽滿

舉個(gè)小例子，看看次像素在圖形設(shè)計(jì)中的作用，拋磚引玉。

在界面設(shè)計(jì)中，經(jīng)常會(huì)繪制下拉菜單等控件上的三角形箭頭形狀，最常見的做法就是用鉛筆工具點(diǎn)象素畫出來，如圖7-a所示，看上去很清晰，但在分 辨率較小的屏幕上看，會(huì)稍顯生硬、有鋸齒感，影響界面的細(xì)膩度；用路徑對(duì)齊網(wǎng)格繪制箭頭，如圖7-b所示，解決了鋸齒問題，但看上去體量感被削弱了，不夠 飽滿；圖7-c中所示的效果，是對(duì)次像素微調(diào)后的效果，既消除了鋸齒，而且在體量感上不輸?shù)谝环N方案的效果。

沒看出差別？我們將三種方案放在一起對(duì)比下，見圖8，從左至右依次為圖7中的a、b、c方案，我們看到中間的b方案雖然沒有了鋸齒，但體量上明顯小于a、c方案，而c方案同時(shí)具備無鋸齒、相等的體量感兩個(gè)優(yōu)點(diǎn)。

通過放大圖片我們可以看到在次像素上的差別，要達(dá)到方案c的方法其實(shí)很簡單，看看下圖放大的效果和路徑你就明白了。

只要將角點(diǎn)上的路徑錨點(diǎn)分別向外移動(dòng)一點(diǎn)，讓原本顏色比較淡的次像素稍微加深就可以了，操作時(shí)，放大畫布讓調(diào)節(jié)更細(xì)微和精確，選中錨點(diǎn)，輕點(diǎn)多次鍵盤上的方向鍵來移動(dòng)即可，這個(gè)方法不局限于箭頭形狀，大家可以開啟像素眼去發(fā)現(xiàn)更多的應(yīng)用場(chǎng)景。

總結(jié)

啰嗦了這么多，希望這些小的點(diǎn)能對(duì)大家工作有所幫助和啟發(fā)。我們總是希望利用現(xiàn)有的資源做更多的事，不斷的探索設(shè)計(jì) 中的更多可能性，關(guān)注設(shè)計(jì)細(xì)節(jié)的展現(xiàn)，無論是PS CS5還是即將發(fā)布的 CS6，每一項(xiàng)功能改進(jìn)都激動(dòng)人心，使操作更加得心應(yīng)手，也幫助設(shè)計(jì)師能夠在更智能的環(huán)境中專注于創(chuàng)意表達(dá)，提高輸出效率，相信 Adobe CS6設(shè)計(jì)套裝在各個(gè)方面都不會(huì)讓人失望，讓我們一起期待。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享題目：網(wǎng)格對(duì)齊的方法
本文地址：http://jinyejixie.com/news38/309238.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、動(dòng)態(tài)網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、做網(wǎng)站、響應(yīng)式網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)