前三集我們聊了很多設(shè)計(jì)原則，今天讓我們?cè)賮砜纯淳唧w怎么操作。Photoshop是我們（紀(jì)念碑谷團(tuán)隊(duì)）以及所有設(shè)計(jì)師天天都在用的東西，所以接下來的部分會(huì)向大家展示一些PS的使用方法和技巧。

雖然這個(gè)冊(cè)子確實(shí)出來挺久了，大概14年的時(shí)候優(yōu)設(shè)網(wǎng)就有推薦過它：http://76r.com.cn/pixel-perfect-precision-handbook（內(nèi)附PDF英文原版），但里面的知識(shí)依然沒有過時(shí)。

前兩集回顧：

1. 《值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之原理篇》
2. 《中文版來了！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之細(xì)節(jié)篇》
3. 《第三集！值得每個(gè)設(shè)計(jì)師收藏的《完美像素使用手冊(cè)》之易用性篇》

關(guān)于設(shè)計(jì)指南，這里有一個(gè)絕對(duì)不能錯(cuò)過的：

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

PS顏色設(shè)置

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

PS另存為web格式

在另存為web格式里，Convert to sRGB這個(gè)選項(xiàng)不能選，Preview預(yù)覽應(yīng)該調(diào)到Monitor Color顯示器顏色。現(xiàn)在顏色應(yīng)該就是都調(diào)一致了。

Color faker

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

形狀圖層

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

形狀圖層（其他矢量）

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

形狀圖層（表現(xiàn)）

對(duì)比上面兩幅圖，會(huì)發(fā)現(xiàn)前一頁上輸出的圖層，矢量大小只用了113k內(nèi)存，而用位圖差不多占了3.47M。你覺得哪個(gè)省空間呢？

Live Shape Properties

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

邊角編輯器

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

圖層效果

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

智能對(duì)象鏈接

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

信息條

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

對(duì)齊像素網(wǎng)格

PS CS6和以上版本，在預(yù)設(shè)里都能把矢量轉(zhuǎn)成像素——勾選矢量工具與變換與像素網(wǎng)格對(duì)齊（默認(rèn)就是選中的）。每個(gè)新畫好的形狀圖層都是自動(dòng)精確到像素的。

對(duì)齊像素網(wǎng)格（快捷鍵）

或許你需要不時(shí)對(duì)形狀圖層進(jìn)行像素改動(dòng)，這個(gè)時(shí)候就可以設(shè)置快捷鍵。創(chuàng)建一個(gè)動(dòng)作，然后分配一個(gè)功能鍵，單擊保存，然后進(jìn)入偏好/首選欄，點(diǎn)擊矢量工具與變換與像素網(wǎng)格對(duì)齊選項(xiàng)。取消也是同樣的步驟。

形狀圖層選項(xiàng)

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

移動(dòng)

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

對(duì)齊

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

對(duì)齊和分布

和很多其他的圖形應(yīng)用一樣，PS有很多的對(duì)齊和分布選項(xiàng)。可以在圖層--對(duì)齊和圖層--分布菜單里進(jìn)行設(shè)置。

網(wǎng)格

設(shè)計(jì)的時(shí)候，用網(wǎng)格比較好。比如下圖中10×10的網(wǎng)格，數(shù)起像素也方便。PS>預(yù)設(shè)>參考線，網(wǎng)格和切片選項(xiàng)進(jìn)行設(shè)置。

一個(gè)參考線插件

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

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

全局光（默認(rèn)角度）

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

實(shí)時(shí)預(yù)覽

測(cè)試，測(cè)試，不停滴測(cè)試！當(dāng)然不用每次都把東西全部拷貝到手機(jī)上，比如ios系統(tǒng)可以用Skala preview。

休息一下，未完待續(xù)。期待下一章喔

歡迎關(guān)注譯者微信公眾號(hào)：UIBANG

譯文地址：uik.me

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com