第四集！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇

前三集我們聊了很多設計原則，今天讓我們再來看看具體怎么操作。Photoshop是我們（紀念碑谷團隊）以及所有設計師天天都在用的東西，所以接下來的部分會向大家展示一些PS的使用方法和技巧。

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

前兩集回顧：

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

關于設計指南，這里有一個絕對不能錯過的：

1. 《中文版來了！新版Material Design 官方動效指南》
2. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（二）》
3. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（三）》

PS顏色設置

在PS里面，進入編輯-顏色-設置，將工作空間>RGB改成顯示器 RGB-顯示。同時把Color Management Policies >RGB設為off

PS另存為web格式

在另存為web格式里，Convert to sRGB這個選項不能選，Preview預覽應該調到Monitor Color顯示器顏色。現在顏色應該就是都調一致了。

Color faker

如果上面講的那些都還沒有辦法滿足工作需求的話，那就試試App Store里面的Color faker吧。

形狀圖層

大愛圖層！矢量圖都是可以編輯的，能無損縮放改變形狀。而且矢量圖比Smart Objects或者位圖資源要多得多！

形狀圖層（其他矢量）

有些地方你可能想用位圖，比如layer mask圖層遮罩，其實你也可以試試用矢量圖，還能加快文件運行速度。還有就是，可以用不遮罩的形狀圖層做背景，如果畫布變大的話，填充的顏色就能自動縮放了。

形狀圖層（表現）

對比上面兩幅圖，會發現前一頁上輸出的圖層，矢量大小只用了113k內存，而用位圖差不多占了3.47M。你覺得哪個省空間呢？

Live Shape Properties

PS CC在屬性欄里面有新增加一項： Live Shape Properties。每個新創建的形狀圖層創建后都有自己的一套數據，比如尺寸位置什么的。如果你要改一個圓角半徑，那你只需要選定圖形，改個值就而已。當然，和以前的PS版本不同的是，現在如果你點Transform，更改圖片大小，圓角半徑會保持和以前一致而不會扭曲。給力吧！

邊角編輯器

如果是PS CC以前的版本，編輯邊角就要用到Corner Editor。安裝后，先選擇一個形狀圖層，點后點出文件-scripts-corner editor，改變半徑值。而且每個角都能設置不同的大小，這點和CC是一樣的。當然你還可以選用不同的樣式，不一定都要用圓角的。

圖層效果

大愛之二——圖層效果！可編輯，可縮放，能復制，能粘貼！你隨意感受下！

智能對象鏈接

和正常的智能對象工作原理差不多，只不過是連接外部文件的。這就使得整個項目的設計師都能使用相同的界面元素，也能及時更新。使用智能對象超鏈接也很簡單，從文件菜單欄選擇超鏈接，然后選擇你要連接的對象就可以了。

信息條

信息條能精確顯示數據，也能設置顏色和透明度的值，這樣在設計過程中能快速的檢查設計參數是否一致。

對齊像素網格

PS CS6和以上版本，在預設里都能把矢量轉成像素——勾選矢量工具與變換與像素網格對齊（默認就是選中的）。每個新畫好的形狀圖層都是自動精確到像素的。

對齊像素網格（快捷鍵）

或許你需要不時對形狀圖層進行像素改動，這個時候就可以設置快捷鍵。創建一個動作，然后分配一個功能鍵，單擊保存，然后進入偏好/首選欄，點擊矢量工具與變換與像素網格對齊選項。取消也是同樣的步驟。

形狀圖層選項

在PS CS5中，矩形和圓角矩形有個內置的選項能幫助精確像素： Snap to Pixels。點擊頂部工具欄圖形右邊的下拉菜單就能看到了。矩形和圓角矩形是兩個獨立選項，需要分別選中。

移動

PS CS5里使用鍵盤在形狀圖形上移動點時需當心，縮放系數不一樣，移動的多少就不一樣。為了保證移動精確到1px，需要縮放到100%，然后立馬按方向鍵。如果縮放系數是200%，那只會移動0.5px，邊角像下圖一樣模模糊糊的就不好了。CS6像素網格對齊時，不管縮放系數是多少，移動都是1px。

對齊

第一步就是視圖-對齊選項要勾選上，所有的對象在畫布上都是和其他東西以及參考線對齊的。Snap to對齊到這個子菜單能夠勾選對齊到什么。

對齊和分布

和很多其他的圖形應用一樣，PS有很多的對齊和分布選項。可以在圖層--對齊和圖層--分布菜單里進行設置。

網格

設計的時候，用網格比較好。比如下圖中10×10的網格，數起像素也方便。PS>預設>參考線，網格和切片選項進行設置。

一個參考線插件

為了方便建參考線，PS里面有個叫GuideGuide的插件，安裝好后，可以在窗口>插件菜單里找到。

參見：《PS 參考線插件GUIDEGUIDE下載及使用說明》

全局光（默認角度）

最容易出問題的就是全局光。一般對象默認的全局光設置是120度。復制到新文件里也是這樣，可能就會出問題了。為了避免這一點，關閉所有打開的文件，打開圖層>圖層樣式>全局光，把默認值改成90度就可以啦~

實時預覽

測試，測試，不停滴測試！當然不用每次都把東西全部拷貝到手機上，比如ios系統可以用Skala preview。

休息一下，未完待續。期待下一章喔

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

譯文地址：uik.me

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

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