UI設計細節(jié)及技巧

經(jīng)常有朋友在說，能把一款軟件用精，那他就很牛逼了，我覺得，真的要精通一款軟件可不是那么容易的！比如，精通PRO-E，會建模是熟練使用，會編程參數(shù)才是高級，一般設計師也就只能建模，算的上熟練使用。能說精通，我覺得要達到林清安教授那樣才算精通吧。

好了，我們現(xiàn)在來說photoshop(簡稱PS），PS真的功能很強大，能用于很多行業(yè)，能用它來修圖美化，能用來排版，能用于游戲原畫制作，能處理渲染圖，對于我們UI設計，是必須熟練使用的畫圖軟件。下面我會把我這幾年的使用及學到的總結出來的細節(jié)和技巧列出，大家看的時候可以練練手，如果你經(jīng)常繪圖標，那么我的這篇文章對你將會很有用。

1、控制節(jié)點的調(diào)整（文章中網(wǎng)格設置為“編輯 - 首選項 - 參考線”

鋼筆工具畫畫的節(jié)點分兩部分，一是主節(jié)點，控制形狀大致方向，二是調(diào)整路徑曲線弧度的。我記得在CS3中選中一節(jié)點，是可以按鍵盤上下左右進行身高的，且不愛網(wǎng)格影響。也就是說，調(diào)整力度是小于1PX的，若鼠標選中一節(jié)點移動，最小距離是1PX，大家可以在CS3中試試。

我現(xiàn)在用的是CS6 Exted版，就不能像CS3中那樣<1px的調(diào)整，就是說，在CS6中無論鍵盤或者鼠標移動，它最小距離都是1px。

節(jié)點2，當我們用直接選擇工具點擊圖標時，打開控制節(jié)點。在沒有開啟網(wǎng)格時，節(jié)點2按住鼠標左鍵是可以隨意移動的，注意此時你的移動距離是可以小于1px的。當網(wǎng)格打開，你的移動單位距離只能是上下左右1PX。大家注意這個細節(jié)，在做小圖標的時候，這個技巧的微調(diào)，會讓你的圖標更清晰，銳度更高。

還要提醒大家注意的是，按CTRL+T縮小圖標時候，在你縮小后不要覺得就完事了，你還需要微調(diào)節(jié)點位置，避免出現(xiàn)過多亞像素，使圖標更清晰，效果如下：

在做100px以上的圖標時，你隨意放大或者縮小是不容易用肉眼看見這些亞像素的。但是，當你做小圖標時就很容易出現(xiàn)亞像素，所以，做完后我們還要稍微調(diào)整節(jié)點的位置，讓它對準像素格，我們在看下效果對比：

2、用路徑繪對稱圖標
在我們用路徑繪制對稱圖形時，有兩種方法，他們各有各的好處，我們來說下面這個圖標的做法。

方法一：拼接
觀察這個安全圖標，先分析結構，是由兩個半盾構成，然后中間減去了一個勾，所以呢我們繪制如下：

方法二：半封閉復制
先分析結構，盾是連貫的，然后中間減去了一個勾，繪制如下：

在我們復制用鋼筆工具繪制的半封閉圖形時，不要選中圖層按CTRL+J，因為在CS6中這樣復制的圖形會變形。所以，我建議大家按住ALT+左鍵拖動復制，這樣復制出來的才是一樣的。

3、添加描點、刪除描點給完整路徑
在我們用形狀繪制圖形時，使用直接選擇工具刪除多余的路徑描點，從而去除多余的路徑線，在需要刪除中間一段路徑的時候，需要先用鋼筆工具進行添加錨點，然后用直接選擇工具選中進行刪除。

具體如下：在你要刪除的線段中間添加描點（鋼筆工具或者直接選擇工具均可），再用直接選擇工具刪除描點。

我們現(xiàn)在繪制一個相機圖標

1、先用圓角矩形工具繪制圓角矩形圓角設置2px，填充顏色，效果如下

2我們對比著左邊做好的做，在右邊繪制。打開網(wǎng)格，選擇直接選擇工具，添加描點（注意對稱，在要刪除的那段上要添加三個描點）

3、使用直接選擇工具，刪除多余的路徑描點，這樣去除多余的路徑線段（刪除那段中間的描點，兩端點留下）

簡單就是下圖：

4、使用鋼筆工具把剩下的線段畫完（注意：兩描點的控制點一定要拖到節(jié)點去，不然用鋼筆工具從兩點接著畫的時候會彎曲）

5、得到完整相機輪廓，有沒有感覺很完整！！

6、選擇橢圓工具，再選擇減法，按住SHIFT+左鍵拖圓，大家注意，這些步驟是在一個圖層完成的