轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   m.0391cbd.com  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，   請點這里

在設(shè)計網(wǎng)頁和程序界面的時候，為了確保每一個像素的顏色、紋理和位置都準(zhǔn)確地呈現(xiàn)，大多數(shù)設(shè)計師都會被搞得疲憊不堪。一不小心，一些很常用的操作像移動、旋轉(zhuǎn)和粘貼就會讓你的辛勤勞動付之東流。但是，如果能對你的工作流程做些小小的改動，就能在項目中始終保持作品的高質(zhì)量。

像素完美之旋轉(zhuǎn)

如果你不夠小心，那么在Photoshop中旋轉(zhuǎn)圖層就會使像素遭到明顯的破壞，出現(xiàn)模糊。

使用自由變換工具（或其他工具）把圖層旋轉(zhuǎn)90度或270度后，像素最終的顯示效果將取決于圖層的尺寸。如果圖層的寬和高都是偶數(shù)，你就可以幸免于難。如果圖層的寬和高都是奇數(shù)，也不會有問題。但是如果圖層的寬是奇數(shù)，高是偶數(shù)或者寬是偶數(shù)，高是奇數(shù)，那么你將會看到如下情景：

本例中原始圖層的尺寸為20×9像素：偶數(shù)×奇數(shù)。盡管位圖和矢量圖層在旋轉(zhuǎn)后的效果不一樣，但兩者都變得不可用了。這是由于圖層旋轉(zhuǎn)的中心點沒有落在某個像素邊界上導(dǎo)致的。

一種解決方法

當(dāng)圖層的寬高為奇數(shù)×偶數(shù)或偶數(shù)×奇數(shù)時，旋轉(zhuǎn)后就會出現(xiàn)問題。因此，我們需要某種方法來保證圖層的寬高是偶數(shù)×偶數(shù)或奇數(shù)×奇數(shù)。也許你所想到的解決方法就是給要旋轉(zhuǎn)的圖層增加一個正方形的位圖蒙版或者添加更多的像素。除此之外，你還可以通過在另外一個圖層上繪制一個正方形后跟原始圖層同時旋轉(zhuǎn)來解決這個問題。

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

一種更簡單的方法

在使用自由變換工具時，把旋轉(zhuǎn)的中心點挪到左上角（或其他任意一個頂角）就能確保它會落在某個像素的邊界上，這樣便能保證每次旋轉(zhuǎn)后的結(jié)果都是完美的。為此，你需要在選擇自由變換工具后在參考點設(shè)置按鈕上單擊下任意頂角再進(jìn)行旋轉(zhuǎn)。這是目前為止最簡單有效的方法。

位圖蒙版和矢量蒙版也會因為這個問題受到影響，因此要小心使用。但其實它只影響那些通過編輯菜單中的“自由變換”或者“變換”進(jìn)行旋轉(zhuǎn)的圖層。如果使用圖像→ 圖像旋轉(zhuǎn)對整個畫布進(jìn)行旋轉(zhuǎn)則不會出現(xiàn)這個問題。

為了讓工作變得更輕松，我就為你悉心制作了一些Photoshop動作和工作流程。

像素完美之矢量粘貼

如果你在Illustrator中繪制了一幅像素對齊的原圖，然后作為形狀圖層粘貼到Photoshop里，你可能已經(jīng)留意到結(jié)果不僅不像預(yù)期的那樣（一幅絕對清晰的圖像），而且是糟糕透頂。下面教你如何解決這個問題。

下圖是在Illustrator里構(gòu)造完美，像素與網(wǎng)格對齊的原圖，尺寸正是我們想用在Photoshop中的大小。

以下是同樣的路徑幾次粘貼到Photoshop后的效果。顯而易見，僅有左上的圖形是清晰的，其他圖形的像素不是沿x軸就是沿y軸或者兩個方向上都偏移了半個像素。

哪里出錯了呢？

Photoshop的粘貼方式分兩種形式。如果你預(yù)先繪制了一個選區(qū)，那么剪貼板的內(nèi)容被粘貼后其中心會與選區(qū)的中心對齊。如果沒有繪制選區(qū)，那么粘貼后會跟視圖的中心對齊。你對文檔的縮放程度和視圖位于文檔哪個位置都會影響最終的效果。

一種解決方法

本例中的測試原圖寬32像素，高12像素。在photoshop中預(yù)先繪制一個32×12像素的矩形選區(qū)然后粘貼便可強行將像素精準(zhǔn)地放置在我們需要的地方并做到網(wǎng)格對齊。這種方法屢試不爽。

一種更簡單的方法

其實矩形選區(qū)并不需要跟你原圖的尺寸一致。本例中，一個2×2像素大小的選區(qū)同樣有效，因為寬和高同為偶數(shù)的矩形選區(qū)的中心與寬和高同為偶數(shù)的剪貼板內(nèi)容的中心都會精準(zhǔn)地落在某個像素的邊界上，這正是我們想要的結(jié)果。如果原圖的寬和高同為奇數(shù)，那么一個1×1像素的矩形選區(qū)就可以了。

要是你無暇顧及要粘貼的原圖尺寸，那就繪制一個適當(dāng)大小的矩形選區(qū)，譬如繪制一個2×2像素的選區(qū)然后粘貼。如果圖像只在沿x軸方向發(fā)生了模糊，那就把選區(qū)改成1×2像素然后粘貼。如果只在沿Y軸方向發(fā)生了模糊，就把選區(qū)改成2×1像素然后粘貼。如果在沿X軸和Y軸都發(fā)生了模糊，那么把選區(qū)改成1×1像素后再粘貼。

這可能聽起來有些復(fù)雜，但在實際操作中是非常快捷的；你最多只需粘貼兩次就能從Illustrator中獲得清晰銳利的矢量路徑了。

智能對象

將元素轉(zhuǎn)為智能對象后粘貼也不會出現(xiàn)上述的問題（至少在Photoshop cs5中不會）。但我喜歡用形狀圖層，因為它們允許更多的操控和編輯以及擁有更好的消除鋸齒功能。

像素完美之矢量微調(diào)

在微調(diào)錨點時，photoshop會表現(xiàn)出一些奇怪的行為，并跟你對視圖的放大程度相關(guān)。當(dāng)縮放為100%的時候，使用直接選擇工具進(jìn)行微調(diào)將使你的矢量點地移動一個像素。當(dāng)放大到200%的時候，微調(diào)將使矢量點移動半個像素。當(dāng)放大到300%的時候，移動1/3個像素。

這樣的行為似乎是有目的性的，但這并不是我常常想要的。絕大多數(shù)時候，我需要像素以整數(shù)級增加的方式來進(jìn)行微調(diào)。下面就教你不用將窗口縮小到100%就實現(xiàn)的方法。

打開你的文檔，然后通過窗口→排列→為××新建窗口來創(chuàng)建第二個窗口。你可以調(diào)整下新窗口的大小和位置。

在新窗口中像平時那樣編輯，隨意地放大視圖。現(xiàn)在你可以按下Ctrl + `切到那個視圖縮放為100%的窗口，選擇直接選擇工具，然后按下Ctrl + `切回進(jìn)行微調(diào)。由于另一個窗口中視圖縮到了100%，所以在新窗口中微調(diào)時會只會使選定的矢量點移動一個像素。

請注意，如果按住shift鍵的同時用直接選擇工具來微調(diào)，錨點會以10個像素級移動，無論你的視圖被放大了多少。而且，多數(shù)情況下用鼠標(biāo)拖動錨點可以讓像素對齊網(wǎng)格，但也不總是如此。

掌控你的像素

使用正確的技巧能讓精準(zhǔn)放置像素變得簡單而輕松。記住，你才是掌控者。對像素發(fā)號施令讓它們整齊就列的人是你。拒絕像素的不完美。

想要知道更多photoshop的特殊技巧或特征嗎？請在評論欄里告知我們！

（本文翻譯自smashingmagazine）

本文由kiki（關(guān)注微博）翻譯投稿，感謝kiki！