這本紀念碑谷團隊出品的《完美像素使用手冊》終于全劇終了！前三集我們聊了很多設計原則，第四集加了PS的操作技巧，今天完結篇繼續放出60多個PS和AI的實戰方法，對這類最全面，最毫無保留，最生動有趣的界面設計指南，強烈建議收藏學習。

雖然這個冊子確實出來挺久了，大概14年的時候優設網就有推薦過它：http://www.hx168888.com/pixel-perfect-precision-handbook（內附PDF英文原版），但里面的知識依然沒有過時。

前兩集回顧：

1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
2. 《中文版來了！值得每個設計師收藏的《完美像素使用手冊》之細節篇》
3. 《第三集！值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
4. 《第四集！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

對象顏色

設置形狀圖層和文本時，最好用對象本身的設置來改變顏色，而不是用顏色疊加。這樣做的好處：一是改顏色時候不需要加載圖層樣式窗口，二是在圖層工具欄里也更容易找到對象。如下圖。

對象漸變

漸變效果也是一樣的道理。用漸變填充圖層，盡量不要用圖層效果。

對象漸變（仿色）

不管用什么方法做漸變，Dither（仿色）選項都要選。這樣顏色漸變會看起來更自然，不會有拼接的感覺。PS CS5一個圖層只能做一次漸變仿色，CS6及以上版本，可以做兩次。

圖層樣式簡潔

不要把一個對象的圖層效果分成多層做。要做在一個圖層里，看起來整齊，復制粘貼的時候也方便。

縮放圖層效果

可以通過Image size（圖像大小）來縮放整個文件大小，但是有時可能需要單獨縮放某些圖層看效果。如果縮放其中一個對象，樣式不會自動調整，但是能通過Scale Effects（縮放效果）來改變。（需要知道原始圖形的增加或者減少比例才能使兩個匹配）這個選項可以通過右擊當前圖層的fx找到。

圖層效果（描邊）

乍一看好像只有通過“描邊”選項才能實現描邊效果。其實還有很多其他方法，比如，使用內、外發光或陰影，設置阻塞值為100%，就OK啦！描邊是在對象外緣，內陰影和內發光在內側，外發光和投影在外側。不過圓角或者弧形的阻塞值不要太寬，會導致邊緣粗糙。

圖層效果vs矢量描邊

如果想畫出來的圖看著舒服，得在形狀圖層上加一個矢量描邊（CS6才可以哦），這樣畫出來的邊緣更細膩（寬度越寬效果越明顯），而且還可以選擇各種款式：圓、方、斜邊、虛線！如果是給iOS做設計的話，這就太實用了，可以把non-Retina描邊設置成0.5px，直接縮放到0.5px；如果是Retina的話，可以直接縮放到1px。

復合矢量圖形

如果要畫復合矢量圖形，直接用Illustrator要比在PS里面復制粘貼形狀方便得多。在Illustrator里面把原始邊描好直接粘貼到PS里面就好了。如果矢量對象不止一個形狀，比如說一個多顏色的圖標，那就需要粘貼成智能對象了。

從Illustrator粘貼

從Illustrator粘貼形狀圖層可能會把對象從原位置移動個0.5px，這樣邊緣就比較模糊（CS6及以上版本不存在這個問題），需要手動微調。

圖層混合模式

做效果時，不要把圖層混合模式用在之后要合并的圖層上。下面例子中“強光”被輸出成了一個單獨的圖層，所以單獨顯示的時候，就不能顯示混合效果，變成了一個白色到黑色的漸變。

圖層混合模式

要重做效果，最好的解決辦法就是用的圖層跟下方的圖層獨立開來。

文本對齊

段落

如果有一個整段文字，那就把它放進一個整個的段落文本框里，而不要人工換行（點文本）。如果文字和字體改變的話，這個就要重新設置了，但是如果段落文本框畫得大小合適，文本就會自動變形。

轉換成段落文字

在文本命令下能把點文字轉化成段落文字，也能反轉。在PS CS5里面，這個在圖層-文字-菜單命令里。

連字符

大部分設備不支持連字符，所以設計里最好就不要用了。

間距

默認的間距有點太擠了，所以要挪點空出來。上面的例子中把自動設置改成了20pt，是不是看起來舒服多了~

文本修邊

PS里面文本修邊有很多種方法。可以每種都試試看看哪個渲染出的效果最好。“消除鋸齒-犀利”的效果不錯。

文本修邊（系統）

PS CC里面有修邊選項，能夠復制操作系統的次像素渲染，這樣就能看出，假設把文本放在瀏覽器里是什么樣子。PS里面的次像素是灰度，不是RGB。

列表

創建列表，特別是旁邊有圖的列表，把所有的描述放在一個文本框里比每行字都單獨用一個圖層要好，這樣對齊起來也方便，以后更新也好用。

快速預覽

手機的分辨率比電腦更高，意味著設計的尺寸要小一點。把文件縮放成手機屏幕大小，然后看看是不是有些東西尺寸要調調。

圖層面板（選項）

PS默認會把每個復制圖層的名字都會加一個"copy"（副本）。神煩。可以在圖層面板選項里把上面藍框框里的三項都點掉，這樣就好了。

命名圖層

命名要合理，很系統的命名別人看起來方便，客戶也覺得你很專業。建議：建一個命名一個，不要到最后再一起改。

整組圖層重命名

整組圖層重命名腳本。貌似很有實用的樣子。

圖層排序

命名要合理，排序也很重要。從上到下，從左至右，就跟看書一樣。

搜索

PS強大的搜索功能，你值得擁有。比如，命名圖層用前綴btn，icn之類，可以迅速過濾它們的內容，如果需要更新許多按鈕的風格，這招就方便多了。當然還有許多搜索類型，比如說“類別”，“效果”，“圖層顏色”等等。都可以一試。

顏色編碼

這就是一個圖層顏色編碼的例子，一般核心設計沒有顏色標簽，右擊任一圖層前面的小眼睛選擇顏色。

展開圖層效果

圖層效果都展開來有點亂亂的，所以還是疊在一起看比較方便。

清除所有空圖層

“文件 - 腳本”菜單里有一個刪除所有空圖層的命令，可好用了！

移除沒有使用的FX

做完設計以后，很可能還有很多沒有上的效果。通常需要一個一個刪除，但是用了Remove Unused FX這個插件，一鍵清除，一步到位。

鎖定圖層

鎖定圖層能保護對象。但是如果你要修改或者刪什么東西，又不知道哪個圖層被鎖定了就比較頭疼了。

圖層復合

圖層復合可以在一個文件里存儲設計的不同變形版本。

生成器

PS CC里面最好用的一個功能，只要加個文件擴展名就能輸出圖層或者整個組。在“文件 - 生成菜單”里面操作。

輸出腳本

不用PS CC也能輸出，可以用我們ustwo的Crop&Export腳本。

另存為Web格式

看看兩個不同的PNG文件有啥不一樣？“另存為”存出來的文件比“另存為web格式”的要大32kb，當然選后者比較合算。

減小文件大小

如果輸出的文件不需要透明度，那可以轉成8bit的PNG文件。下面的例子里，文件質量沒有損耗，但是文件大小縮小了一半多。

ImageOptim

一款適用與mac操作系統的軟件（前端開發中必備的圖片壓縮軟件）。

減少PSD文件大小

減少PSD大小的一個快速的方法就是隱藏所有的圖層。如果設計要求顯示某些元素，那可能就不方便了。當然還可以用ZIP壓縮PSD文件，這樣能縮成原始大小的10%。

RGB（565格式）

有些設備不像電腦屏幕一樣顏色多，漸變和過渡可能就看不大出，為了避免這個，可以用 Ximagic ColorDither 插件把圖轉成565格式。

565（批量處理）

很多文件一起做565過濾很費勁，所以可以用“動作和批處理工具”把這個過程自動化。

照常輸出文件，然后把用565的動作“記錄”保存，輸出結果用“另存為web格式”（省空間），不保存，關閉文件。然后，在這樣的設置環境下，運行批處理工具里的“動作”。所有過濾處理過的文件就都會輸出到原先的另存為Web文件夾里。

描邊

有時弧形的1px描邊看起來會比較單薄，為了增強存在感，又不實際增加px值，就增加一個“發光”的效果。差別很小，但是多少有點效果。

圓圈淡出

圓圈淡出用“描邊”功能很容易就能做出來。填充類型：漸變色填充，樣式：角度。

快閃

讓一個對象快閃，可以用“內陰影”效果，“低透明度”。注意一點，因為這個形狀是以母圖層的上沿為基礎的，所以任何不直的地方都會直接被快閃代替。

內發光加入雜色

用內發光效果能夠給一個對象添加簡單的雜色文理。設置“來源”為“中心”，“大小”為0，然后可以通過雜色設置來調節數量。

提取logo

有時候logo不是現成的，就只能自己摳了。當然還可以找找公司網站看看有沒有PDF文件能下載的。用Illustrator打開，提取矢量logo。

星場

畫筆選項可以設置出不同效果，通過改變“大小”和“透明度”能出不同的效果。

樣式

增加樣式和紋理：畫幾個小方格，用正方形選區選中，然后選擇菜單里的“編輯 - 定義圖案”，就可以在圖層樣式 - 圖案里面找到剛剛自定義的圖案了。

Kuler插件

配色什么沒想法？試試Kuler吧，這個插件能夠讓你看看別人的配色，自己還能自創配色呢。

字符瀏覽器

鍵盤瀏覽器

路徑快捷鍵

有很多路徑快捷鍵可以提高工作效率。選擇兩個形狀圖層，按“Command + E”繪制路徑后，按“+”或者“Shift”添加另一個路徑。按“-”或者“Option”刪除一個路徑。繪制好后，就可以通過選擇再按“+”“-”號來增添或者刪減新路徑了。

鍵盤快捷鍵和菜單

用“編輯-鍵盤快捷鍵”來設置個性化的快捷方式。下圖就是“對齊-垂直居中”和“對齊-水平居中”的快捷鍵。另外一個常用的就是把“Command+Q”這個快捷命令移除，避免意外退出PS。

矢量工具不頂用時就要用Illustrator了。主要用于創建復雜圖形，再輸出到PS樣式里。這樣功能性和效果都更強了。

Illustrator顏色設置

打開“編輯-顏色設置”，把“工作空間”的“RGB”設置成“monitor RGB-Display”，同時，關掉“色彩管理”下面的“RGB”選項。

預設

在Illustrator里有很多預設可以改動。首先，把鍵盤增量設置為1px，這樣光標的移動就按這個標準量了。然后，打開“單位”選項，把“通用”和“描邊”都設置成“像素”，這樣所有的大小都是用像素來丈量的。字體就不管它了，還是按照“pt”設置。

網格

跟PS一樣，10×10的網格可能比較好用。這些設置可以在“預設 - 參考線和網格”選項里改。

對齊到網格

跟PS一樣，Illustrator也有對齊到網格這個工具，在“視圖”菜單欄下。

智能參考線

有時候需要突破像素網格的限制，可以試試智能參考線。比如下面的例子，圓上45°位置還需要一個錨點。可以在圖下方放一個三角形，打開智能參考線，鋼筆工具就能在兩個圖形重疊的地方形成一個錨點。

精確

變形窗口是設計師的好伙伴！有了這個窗口，你就可以看看圖形或者哪怕一個點大小、位置設計得對不對。同時寬度和高度選項里面一改動，其他的尺寸也會相應變動以保持比例。

像素對齊網格

使用時要確保菜單欄里面的“新對象對齊像素網格”是關著的，對于已有的圖形，像素網格對齊這個框沒有勾選。因為一旦勾選了像素網格對齊，可能一不注意，描邊時對象就開始亂飄了。

像素預覽

這里也要謹慎。如果點了“視圖-像素預覽”，可能像素不是很精確的形狀看起來都像是很精確的似的。

預覽模糊

不必過度擔心，有時候即使尺寸以像素來算的，Illustrator輸出的圖形邊緣還是可能模模糊糊的，看起來像個Bug把，但有一點好，如果圖形導進PS里面就不模糊了。

結構

如果不是要用來畫圖形，Illutstrator里不要每個圖層都命名，但是要有條理，不能一股腦全鋪開來。

能看到最后的朋友，給自己鼓掌~休息一下吧

歡迎關注譯者微信公眾號：UIBANG

譯文地址：uik.me

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com