photoshop cs6畫素的虛實

2019-12-14 07:33:15

3月份，Photoshop CS6 Beta版(下文簡稱PS CS6)發佈公測，有著多項驚豔的新特性，工作中整天和畫素打交道，感觸比較深的特性就是PS CS6支援向量物件繪製、變換時畫素自動對齊網格。

當然，物件繪製、變換時畫素對齊網格並不是Photoshop CS6獨有的功能，只是更智慧更好用了，Photoshop CS6的畫素自動對齊網格功能在繪圖過程中，無疑方便了很多，不必再擔心圖形邊緣會出現模糊，但是我們在實際的圖形設計過程中會發現，還是會經常需要調整一些路徑沒有完全對齊到網格產生的半透明的過渡畫素，用來平滑圖形邊緣減少鋸齒感，或讓圖形看上去更飽滿、更細膩，我們稱其為次畫素(或亞畫素，Sub-pixel，一般用於螢幕顯示技術等領域)，如下圖所示。

趁著PS CS6正式版還未普及，以PS CS5為例，和大家探討向量路徑圖形繪製時如何讓畫素對齊網格，如何利用路徑調整次畫素改善圖形的飽滿度的一些經驗，希望對大家有所啟發和幫助。

1

畫素對齊網格

2

物件繪製時畫素對齊網格

畫素對齊網格最大的作用就是避免繪製圖形時出現虛邊，解決圖形模糊的問題，尤其是將畫布放大數倍去摳介面、圖示細節時，精度可以達到畫素級，讓設計師將精力更多的集中在創意表達層面，不必因為擔心模糊而謹慎的去操作，從而提高工作效率。

在PS CS5初始狀態時，只有當畫布在100%比例下，也就是實際畫素比例時，畫出來的圖形才不會模糊，放大或縮小畫布到其他比例下，即使開啟網格進行輔助，畫出來的圖形也會模糊，如圖2所示，藍色圖形與紫色圖形分別為100%畫布下不開啟網格，和非100%比例畫布下開啟網格隨意繪製的相同大小的矩形，我們能明顯的看到紫色圖形邊緣非常的模糊。

這時的網格沒有起到作用，是因為在PS CS5初始狀態時，網格的引數不是以畫素為單位，而是毫米，如圖-3，偏好設定視窗可以通過主選單中「編輯>偏好設定>常規」或快捷鍵Ctrl+K來開啟。

想要在常規圖形(矩形、圓角矩形、圓形)繪製過程中，使畫素在任何情況下都對齊網格，在PS CS5的偏好設定視窗中，對「參考線、網格和切片」索引標籤的網格引數進行簡單的設定，並配合快捷鍵就可以做到。

　　圖3中可以看到格線間隔的預設值是25毫米，將單位改為畫素，這時單位前面的數值會自動變為1，這時的格線並未與畫布上的畫素格對齊，需要手動重新輸入數值，且格線間隔數值與子網格數值必須相等，圖4展示的是在3200%比例下，兩種不同數值網格所呈現出的效果，可根據自己的喜好進行調整。網格可通過主選單「檢視>顯示>網格「來顯示或隱藏，快捷鍵為Ctrl+’(回車左側的引號鍵)。

完成了如上設定，最後確保」主選單>檢視>對齊」及「對齊到>網格「兩個選項已勾選，「對齊到>網格「選項在開啟顯示網格的情況下才可編輯。

　　畫素對齊網格設定完成，以後在非100%檢視下繪製常規圖形，只要開啟網格輔助，就不會出現模糊情況。畫素對齊網格在PS CS5中還是存在一定的局限性，受到圖形形狀的約束，當使用線條工具、多邊形工具、自定義形狀工具繪製一些帶有傾斜邊緣或非直角的圖形時，還是無法保證所有角點和邊緣對齊網格，當然這裡的模糊更多的是防鋸齒效果，可以利用網格手動調整。

物件變換時畫素對齊網格

　　PS CS5中，長寬都是奇數或都是偶數時，進行90°變換時都可以對齊畫素，當長寬數值分別是奇數和偶數時，再進行順時針或逆時針90°變換就會使圖形模糊，無法對齊到畫素，這時可以先旋轉，然後開啟網格進行輔助，不要退出自由變換模式，拖動物件，這時邊緣就會自動吸附對齊網格，如下圖：

　　舉個小例子，看看次畫素在圖形設計中的作用，拋磚引玉。

　　在介面設計中，經常會繪製下拉式選單等控制元件上的三角形箭頭形狀，最常見的做法就是用鉛筆工具點象素畫出來，如圖7-a所示，看上去很清晰，但在解析度較小的螢幕上看，會稍顯生硬、有鋸齒感，影響介面的細膩度；用路徑對齊網格繪製箭頭，如圖7-b所示，解決了鋸齒問題，但看上去體量感被削弱了，不夠飽滿；圖7-c中所示的效果，是對次畫素微調後的效果，既消除了鋸齒，而且在體量感上不輸第一種方案的效果。

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

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