經(jīng)常有朋友在說(shuō),能把一款軟件用精,那他就很牛逼了。我覺(jué)得,真的要精通一款軟件可不是那么容易的!比如,精通PRO—E ,會(huì )建模是熟練使用,會(huì )編程參數才是高級,一般設計師也就只能建模,算的上熟練使用。
好了,我們現在來(lái)說(shuō)Photoshop (簡(jiǎn)稱(chēng)PS ),ps真的功能很強大,能用于很多行業(yè)。能用它來(lái)修圖美化,能用來(lái)排版,能用于游戲原畫(huà)制作,能處理渲染圖…..對于我們UI設計,是必須熟練使用的畫(huà)圖軟件。下面我會(huì )把我這幾年的使用及學(xué)到的總結出來(lái)的細節和技巧列出,大家看的時(shí)候可以練練手,如果你經(jīng)常繪圖標,那么我的這篇ps教程文章對你將會(huì )很有用。
鋼筆工具
1、控制節點(diǎn)的調整(文章中網(wǎng)格設置為“編輯–>首選項–>參考線(xiàn)”)
鋼筆工具畫(huà)畫(huà)的節點(diǎn)分2部分:
1).是主節點(diǎn),控制形狀大致方向。
2).是調整路徑曲線(xiàn)弧度的。
我記得在cs 3中選中1節點(diǎn),是可以按鍵盤(pán)“上下左右”進(jìn)行微調的,且不受網(wǎng)格影響。也就是說(shuō),調整力度是小于1px的,若用鼠標選中1節點(diǎn)移動(dòng),最小距離是1px,大家可以在cs3中試試。
我現在用的是cs6 Exted版,就不能像cs3中那樣小于1px的調整。就是說(shuō),在cs6中無(wú)論鍵盤(pán)或者鼠標移動(dòng),它最小距離都是1px。
節點(diǎn)2,當我們用【直接選擇工具】點(diǎn)擊圖標時(shí),打開(kāi)控制節點(diǎn)。在沒(méi)有開(kāi)啟網(wǎng)格時(shí),節點(diǎn)2按住鼠標左鍵是可以隨意移動(dòng)的,注意此時(shí)你的移動(dòng)距離是可以小于1PX的。當網(wǎng)格打開(kāi),你的移動(dòng)單位距離只能是上下左右1PX。大家注意這個(gè)細節,在做小圖標時(shí)候,這個(gè)技巧的微調,會(huì )讓你的圖標更清晰,銳度更高。
還要提醒大家注意的是,按住Ctrl+T縮小圖標時(shí)候,在你縮小后不要覺(jué)得就完事了,你還需要微調節點(diǎn)位置,避免出現過(guò)多亞像素,使圖標更清晰。效果如下:
如上圖所示:原圖標放大,路徑是對準了像素格的(右上角為100%狀態(tài)整體效果圖)
縮小后的圖標在放大打開(kāi)網(wǎng)格,會(huì )發(fā)現有亞像素的存在了(左上角為100%狀態(tài))
在做100PX以上的圖標時(shí),你隨意放大或者縮小是不容易用肉眼看到這些亞像素的。但是,當你做小圖標時(shí)就能很容易出現亞像素,所以做完后我們還要稍微調整節點(diǎn)位置,讓它對準像素格,我們在看下效果對比吧:

2、用路徑繪制對稱(chēng)圖標
在我們用路徑繪制對稱(chēng)圖形時(shí)候,有兩種方法,他們各有各的好處。我們來(lái)說(shuō)下面這個(gè)圖標的做法:

方法一:拼接
觀(guān)察這個(gè)“安全”圖標,先分析結構,是由2個(gè)半盾構成的,然后中間減去了一個(gè)勾。所以呢我們繪制如下:

方法二:半封閉復制
先分析結構,盾是連貫的,然后中間減去了一個(gè)勾。繪制如下:

在我們復制用鋼筆工具繪制的半封閉圖形時(shí)候,不要選擇圖層Ctrl+J,因為在cs6中這樣復制圖形會(huì )變形。所以,我建議大家按照Alt+左鍵拖動(dòng)復制!,這樣復制出來(lái)才是一樣的。
方法三:添加描點(diǎn)和刪除描點(diǎn)繪制完整路徑
在我們用形狀繪制圖形時(shí)候,使用直接選擇工具刪除多余的路徑錨點(diǎn),從而去除多余的路徑線(xiàn),在需要刪除中間一段路徑的時(shí)候,需要選用鋼筆工具進(jìn)行添加錨點(diǎn),然后用直接選擇工具選中進(jìn)行刪除。
具體如下:在你要刪除的線(xiàn)段中間添加描點(diǎn)(【鋼筆工具】或者【直接選擇工具】均可),在用直接選擇工具刪除描點(diǎn)。
我們選擇繪制一個(gè)相機圖標:

1.先用圓角矩形工具繪制圓角矩形圓角設置為2px,填充顏色,效果如下圖所示;

2.我們對比著(zhù)左邊做好的做,在右邊繪制。打開(kāi)網(wǎng)格,選擇【直接選擇工具】,添加描點(diǎn)(注意對稱(chēng),在要刪除的那段上要添加3個(gè)描點(diǎn))

3.使用【直接選擇工具】刪除多余的形狀上錨點(diǎn),這樣去除多余的線(xiàn)段(刪除那段中間的描點(diǎn),兩端點(diǎn)留下)

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

4.使用【鋼筆工具】把剩下的線(xiàn)段畫(huà)完(注意:2描點(diǎn)的指控點(diǎn)一定要拖到節點(diǎn)去,不然用鋼筆工具從2點(diǎn)接著(zhù)畫(huà)的時(shí)候會(huì )彎曲)

5.得到完整相機輪廓,有沒(méi)有感覺(jué)非常的完整呢?

6.選擇【橢圓工具】,在選擇減去

,按住shift+左鍵拖圓,大家注意,這些步驟是在一個(gè)圖層完成的

圖標描邊
在PS CS6出來(lái)后就已經(jīng)新增加了一項描邊功能。使用這個(gè)工具能使圖標畫(huà)出來(lái)非常的便捷,在繪制圖標時(shí)相互結合選擇時(shí)也需要一定抉擇。當你繪制較小圖標時(shí),描邊1px到2px可以選擇【圖層–>描邊】這樣制作icon更快捷,更節省時(shí)間。但是當你描邊太大,就會(huì )有直線(xiàn)邊。

而當你考慮到以后可能需要放大或者打印出來(lái)。此時(shí),你就要選擇【形狀描邊】或者【畫(huà)一個(gè)圖塊再用減法】因為這樣隨意你放大縮小他都不會(huì )失真,還有就是“畫(huà)一個(gè)圖塊用減法”放大或者縮小是按比例放大和縮小。

1、虛線(xiàn)描邊,2px,對齊(內描邊)

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

3、描邊形狀可以繪制開(kāi)放式路徑圖標
繪制圖標時(shí)候會(huì )用到間斷的形狀這時(shí)候可以用路徑描邊樣式,是支持開(kāi)發(fā)路徑描邊的。我們就用開(kāi)放路徑描邊來(lái)繪制下面圖表中的3個(gè)(注意:下面圖標還能用“減法”繪制)

繪制“郵件”圖標
1.用鋼筆工具先畫(huà)出形狀

2.調整描邊屬性,4點(diǎn)粗,內描邊,圓頭端點(diǎn),圓角點(diǎn)

3.效果圖如下:

4.同理繪制其他圖標(注意:一個(gè)圖標有多部分組成時(shí),可能需要多個(gè)圖層的單獨路徑

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

用形狀來(lái)平均距離
大家在排版、布局、測距離時(shí),普遍會(huì )用標尺工具和參考線(xiàn)。其實(shí)呢,我一般會(huì )用或者平均距離。在ps CS6中,可以隨意調整矩形工具大小,具體君下:

我們要的距離是32px,我們只需要按住Alt+左鍵拖動(dòng),就能精確的排列這4個(gè)圖標的間距了。

選中【矩形工具】,我們還可以隨意調整矩形的長(cháng)寬,他就相當于一把隨意的尺子。

選擇工具

我們來(lái)看下面圖標(按住Ctrl和路徑選擇工具切換使用)

聯(lián)系客服