利用PS CS6的新功能保持icon細節(jié)飽滿完

一些本來尺寸很大，質(zhì)量很不錯的高清png圖片，經(jīng)過縮小轉(zhuǎn)為icon時卻變得慘不忍睹（圖標的細節(jié)損失嚴重）而當我們?nèi)タ茨切I(yè)人士制作的icon時，卻發(fā)現(xiàn)，對方制作的icon尺寸雖小，但是細節(jié)卻保持的非常好，這里面難道有什么技巧么？今天分享一篇關(guān)于利用Photoshop cs6網(wǎng)格對齊功能繪制高清icon的文章。

Photoshop CS6自發(fā)布以來，一直頗受好評，細心的朋友可能發(fā)現(xiàn)最新的PS CS6支持矢量對象繪制、變換時像素自動對齊網(wǎng)格，而且非常好用。PS CS6的像素自動對齊網(wǎng)格功能在繪圖過程中，無疑方便了很多，不必再擔心圖形邊緣會出現(xiàn)模糊，但是我們在實際的圖形設計過程中會發(fā)現(xiàn)，還是會經(jīng)常需要調(diào)整一些路徑?jīng)]有完全對齊到網(wǎng)格產(chǎn)生的半透明的過渡像素，用來平滑圖形邊緣減少鋸齒感，或讓圖形看上去更飽滿、更細膩，我們稱其為次像素 (或亞像素，Sub-pixel，一般用于屏幕顯示技術(shù)等領域)，如下圖所示。

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

1. 對象繪制時像素對齊網(wǎng)格

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

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

圖2

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

圖3

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

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

完成了如上設置，最后確保”主菜單>視圖>對齊”及”對齊到>網(wǎng)格”兩個選項已勾選，”對齊到>網(wǎng)格”選項在打開顯示網(wǎng)格的情況下才可編輯。

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

2. 對象變換時像素對齊網(wǎng)格

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