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

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

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

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

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

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

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

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

一種解決方法

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

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

一種更簡(jiǎn)單的方法

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

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

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

像素完美之矢量粘貼

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

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

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

哪里出錯(cuò)了呢？

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

一種解決方法

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

一種更簡(jiǎn)單的方法

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

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

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

智能對(duì)象

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

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

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

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

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

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

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

掌控你的像素

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

想要知道更多photoshop的特殊技巧或特征嗎？請(qǐng)?jiān)谠u(píng)論欄里告知我們！

（本文翻譯自smashingmagazine）

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