PS教程：旋轉或者翻轉令像素圖不模糊的小技巧

在photoshop中旋轉、粘貼以及輕移像素時保持像素的完整性。關於怎樣理解像素的完整性本文將在後面進行分析。本文講述的主要是像素級別的圖像處理，主要針對的是網頁以及用戶界面按鈕和部件的繪製，有的段落專業術語的講解可能有些枯燥，對網頁設計或者界面設計領域不熟悉或者不感興趣的同學大可以跳過了。

在設計網頁以及程序界面時，大多數的設計師對於像素的優化可能會覺得煩躁不堪。他們經常要確保每個像素的顏色、紋理以及位置是否準確，需要查看像素是否有毛邊。如果你不夠小心，一些很常見的操作（諸如移動、旋轉、粘貼）也會破壞你辛辛苦苦完成的作品，使它們陷入混亂。但是，如果在工作流程上做一些小小的改變，你就可以從項目的開始到結束保證作品的質量不會受損。

在旋轉過程中保持像素的完美

在photoshop中旋轉圖層時，如果你不夠小心，旋轉之後的像素很有可能會糊掉。

比如說我們使用自由變換工具或者其他工具將圖層旋轉90度或者270度，圖層邊緣的質量往往取決於圖層的具體尺寸。如果一個圖層的寬和高都為偶數，或者都為奇數，比如說4*4或者5*5，在旋轉過程中是不會出現問題的。但是如果寬為偶數高為奇數或者寬為奇數高為偶數的話，就會出現如下圖所示的問題。

在本例中原始圖層的尺寸為20×9像素，寬為偶數，高為奇數。旋轉之後一部分像素糊掉了，但這樣的結果顯然不是我們想要的。一般的旋轉方法並沒有產生出清晰的像素邊緣。

一種改進的辦法

之所以產生這樣的後果是因為圖層的寬為偶數高為奇數或者寬為奇數高為偶數，那麼只要保證旋轉的部分寬和高都為偶數或者都為奇數就可以了。由此在圖層外圍框選一個正方形的選區之後再旋轉，或者添加一排像素之後旋轉就可以解決這個問題了。甚至你也可以在原圖形的正上方新建一個圖層繪製一個正方形，選中這兩個圖層之後整體旋轉，然後刪除掉新建的圖層。

總而言之，只要圖層的寬和高是偶數×偶數或者奇數×奇數就可以了。

一種更容易的辦法

使用自由變換工具時，將參考點位置更改為左上角或者四角中的任意一個。這樣每次旋轉參考點都將處於圖層的邊角，旋轉之後的像素也將擁有完美的邊緣。要進行這一步，先按下ctrl+t，進入自由變換模式，然後在「選項」面板中點擊左上角的小方塊或者其他三個角的任意一個，之後再進行旋轉。這種方法是我目前所知的最為簡單有效的方法。

不管是點陣圖還是矢量圖形在旋轉的過程中都會導致一部分像素糊掉，所以在對圖像進行旋轉時一定要加以注意。

在粘貼過程中保持像素的完美

如果你在illustrator中繪製圖形時選擇了對齊像素網格，然後在photoshop中將其粘貼為形狀，大多數情況下你會發現情況並不如你所願，形狀的邊緣不夠清晰，形狀的邊緣沒有對齊到像素的邊緣。下面我來告訴你如何解決這個問題。

下圖是我在illustrator中細心繪製的形狀，在繪製時選擇了「對齊像素網格」，它的尺寸也是我想要在photoshop中實現的尺寸。

下圖則是同樣的路徑粘貼在photoshop中的效果，請注意為什麼只有左上角的圖形邊緣是清晰銳利的，而其他圖形不是在x軸上跨出了半個像素就是在y軸上跨出了半個像素。

問題出在哪裡呢？

photoshop處理粘貼行為主要有兩種方式，如果你繪製了一個選區，那麼剪貼板中內容的中心點將與選區的中心點對齊。如果你沒有創建選區，那麼剪貼板中內容的中心點將與你當前窗口區域的中心點對齊。（窗口區域和文檔區域是不同的）你對文檔的縮放程度以及當前窗口的內容位於文檔的哪個區域都會影響到粘貼的結果。

一種改進的方法

本例中作品的尺寸為寬32像素高12像素，在photoshop中框選一個32×12像素的選區，這樣在粘貼時就可以約束路徑完美地粘貼到選區中並與像素邊緣對齊。這個方法每次都會奏效只是有些繁瑣。

一種更為簡便的方法

框選的選區不一定非得和要粘貼的內容尺寸相等，在本例中框選一個2×2像素的選區就可以奏效了。因為寬和高均為偶數的選區與寬和高均為偶數的剪貼板內容在中心點上是完全對齊的，而這正是我們想要的結果。同樣的，如果剪貼板內容的寬和高均為奇數的話，我們只需要框選一個1×1像素的選區就夠了。如果這段話沒有解釋清楚的話請看下圖

如果你懶得去計算粘貼對象的尺寸的話，那麼你就隨意繪製一個選區，比如2×2，然後進行粘貼，如果圖像在x軸上產生了模糊，那麼重新繪製一個1×2的選區再次粘貼。如果圖像僅僅在y軸上產生了模糊，那麼將選區修改為2×1，再次粘貼。如果圖像在x軸和y軸上都產生了模糊，那麼重新繪製一個1×1的選區再次粘貼。

上面的步驟聽起來可能有些複雜，不過在實際應用中卻非常快捷。最多只需要粘貼兩次就能從illustrator中粘貼一個邊緣清晰銳利的圖形了。需要學習軟體的同學，大家可以百度搜索錦子會，去錦子會博客下載更多學習資源！如想要了解我的，請百度搜索羅錦，歡迎了解更多我的設計之路！

智能對象

將對象作為智能對象粘貼則不會出現如上所說的問題（至少在photoshop cs5中不會）。我之所以喜歡粘貼為形狀圖層乃是因為它們便於操控，可編輯性強，形狀不會失真。

譯者註：對齊像素網格的功能只存在於illustrator cs5中（illustrator cs4中有沒有我不是很清楚），在繪製對象時illustrator文檔的解析度必須與photoshop文檔的解析度相同，這樣從illustrator中將對象粘貼到photoshop中時才能保持原始的尺寸。

(責任編輯：鍾小英)

加我備註：學習PS

想學PS又很懶？【10G】省時教程和資源免費送！

點我獲取

每天學點PS·點綴生活色彩

PS｜攝影｜設計｜視覺｜藝術｜創意

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 羅錦 的精彩文章: