UI設(shè)計(jì)細(xì)節(jié)及技巧(4)

在ps CS6出來(lái)以后就已經(jīng)新增加了一項(xiàng)搭邊功能，使用這個(gè)工具能使圖標(biāo)畫(huà)出來(lái)非常的便捷，在繪制圖標(biāo)時(shí)相互結(jié)合選擇時(shí)也需要一定抉擇。當(dāng)你繪制較小的圖標(biāo)時(shí)，描邊1PX到2PX可以選擇“圖層-描邊”，這樣制作ICON更快捷，更節(jié)省時(shí)間。但是當(dāng)你描邊太大，就會(huì)有直線邊。

而當(dāng)你考慮到以后可能需要放大或者打印出來(lái)。此時(shí)，你就要選擇“路徑描邊”或者“畫(huà)一個(gè)圖塊再用減法”因?yàn)檫@樣隨意你放大縮小他都不會(huì)失真，還有就是“畫(huà)一個(gè)圖塊減法”放大或者縮小是按比例放大和縮小。

1、虛線描邊，2px，對(duì)齊（內(nèi)描邊）

2、觸點(diǎn)樣式效果

3、描邊路徑可以繪制開(kāi)放式路徑圖標(biāo)
繪制圖標(biāo)時(shí)會(huì)用到間斷的路徑，這時(shí)候可以用路徑搭邊樣式，是支持開(kāi)放路徑描邊的。我們就用開(kāi)放路徑描邊來(lái)繪制下面圖表中的三個(gè)（下圖圖標(biāo)還能用“路徑減法”繪制）

繪制郵件圖標(biāo)
1、用鋼筆工具先畫(huà)路徑

2、調(diào)整描邊屬性，4點(diǎn)粗，內(nèi)描邊，回頭端點(diǎn)，圓角點(diǎn)。

3效果圖如下：

4、同理繪制其它圖標(biāo)（注意，一個(gè)圖標(biāo)有多部分組成時(shí)，可能需要多個(gè)圖層的單獨(dú)路徑）

4、我們順帶提下“路徑減法”的繪制
這種方法就是之前說(shuō)的用鋼筆工具“來(lái)繪制那些較細(xì)的”線圖標(biāo)，必要時(shí)會(huì)用到“添加描點(diǎn)”、刪除描點(diǎn)工具，好處就是便于調(diào)整。

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

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

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

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

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

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

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

在做100px以上的圖標(biāo)時(shí)，你隨意放大或者縮小是不容易用肉眼看見(jiàn)這些亞像素的。但是，當(dāng)你做小圖標(biāo)時(shí)就很容易出現(xiàn)亞像素，所以，做完后我們還要稍微調(diào)整節(jié)點(diǎn)的位置，讓它對(duì)準(zhǔn)像素格，我們?cè)诳聪滦Ч麑?duì)比：

2、用路徑繪對(duì)稱圖標(biāo)
在我們用路徑繪制對(duì)稱圖形時(shí)，有兩種方法，他們各有各的好處，我們來(lái)說(shuō)下面這個(gè)圖標(biāo)的做法。

方法一：拼接
觀察這個(gè)安全圖標(biāo)，先分析結(jié)構(gòu)，是由兩個(gè)半盾構(gòu)成，然后中間減去了一個(gè)勾，所以呢我們繪制如下：

方法二：半封閉復(fù)制
先分析結(jié)構(gòu)，盾是連貫的，然后中間減去了一個(gè)勾，繪制如下：

在我們復(fù)制用鋼筆工具繪制的半封閉圖形時(shí)，不要選中圖層按CTRL+J，因?yàn)樵贑S6中這樣復(fù)制的圖形會(huì)變形。所以，我建議大家按住ALT+左鍵拖動(dòng)復(fù)制，這樣復(fù)制出來(lái)的才是一樣的。

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

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

我們現(xiàn)在繪制一個(gè)相機(jī)圖標(biāo)

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

2我們對(duì)比著左邊做好的做，在右邊繪制。打開(kāi)網(wǎng)格，選擇直接選擇工具，添加描點(diǎn)（注意對(duì)稱，在要?jiǎng)h除的那段上要添加三個(gè)描點(diǎn)）

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

簡(jiǎn)單就是下圖：

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

5、得到完整相機(jī)輪廓，有沒(méi)有感覺(jué)很完整��！

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

大家在排版、布局、測(cè)距離的時(shí)候，普遍會(huì)用標(biāo)尺工具和參考線。其實(shí)呢，我一般會(huì)用來(lái)測(cè)或者平均距離。在ps cs6中，可以隨意調(diào)整矩形工具大小，具體看如下：

我們要的距離是32px，我們只需要按住ALT+左鍵拖動(dòng)，就能精確的排列著四個(gè)圖標(biāo)的間距

先中矩形工具我們還可以隨意調(diào)整矩形的長(zhǎng)寬，他就相當(dāng)于一把隨意的尺子。

我們來(lái)看下面圖標(biāo)（按住CTRL和路徑選擇工具切換使用）

寫(xiě)的有點(diǎn)多了，相信大家也累了，用了ps這幾年，從不會(huì)到熟練，中間也付出了很多，從最開(kāi)始的了解各個(gè)工具到后來(lái)能做出自己想要的效果，都離不開(kāi)辛勤的練習(xí)，學(xué)習(xí)。平時(shí)我除了用ps外，手還要練著PRO-E軟件，沒(méi)辦法，自己是工業(yè)設(shè)計(jì)專業(yè)出生，總是忘不了自己還會(huì)做三維，捏在手里總不會(huì)壞。

寫(xiě)這篇文章，只是想把我這幾年學(xué)到的技巧加自己親身遇到的問(wèn)題+摸索解決告訴大家，有好的就要分享相信里面的問(wèn)題大家也遇到過(guò)，也有些細(xì)節(jié)大家在閱讀這篇文章前已經(jīng)掌握，希望大家推薦給更多人學(xué)習(xí)這些細(xì)節(jié)。