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

來源:站酷 作者:duanjianlove 學習:25735人次

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

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

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

UI設計細節(jié)及技巧
1、控制節(jié)點的調整(文章中網(wǎng)格設置為“編輯 - 首選項 - 參考線”UI設計細節(jié)及技巧

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

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

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

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

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

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

UI設計細節(jié)及技巧
2、用路徑繪對稱圖標
在我們用路徑繪制對稱圖形時,有兩種方法,他們各有各的好處,我們來說下面這個圖標的做法。

UI設計細節(jié)及技巧
方法一:拼接
觀察這個安全圖標,先分析結構,是由兩個半盾構成,然后中間減去了一個勾,所以呢我們繪制如下:

UI設計細節(jié)及技巧
方法二:半封閉復制
先分析結構,盾是連貫的,然后中間減去了一個勾,繪制如下:

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

UI設計細節(jié)及技巧
在我們復制用鋼筆工具繪制的半封閉圖形時,不要選中圖層按CTRL+J,因為在CS6中這樣復制的圖形會變形。所以,我建議大家按住ALT+左鍵拖動復制,這樣復制出來的才是一樣的。

3、添加描點、刪除描點給完整路徑
在我們用形狀繪制圖形時,使用直接選擇工具UI設計細節(jié)及技巧刪除多余的路徑描點,從而去除多余的路徑線,在需要刪除中間一段路徑的時候,需要先用鋼筆工具進行添加錨點,然后用直接選擇工具選中進行刪除。

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

我們現(xiàn)在繪制一個相機圖標UI設計細節(jié)及技巧

1、先用圓角矩形工具繪制圓角矩形UI設計細節(jié)及技巧圓角設置2px,填充顏色,效果如下

UI設計細節(jié)及技巧
2我們對比著左邊做好的做,在右邊繪制。打開網(wǎng)格,選擇直接選擇工具,添加描點(注意對稱,在要刪除的那段上要添加三個描點)

UI設計細節(jié)及技巧
3、使用直接選擇工具,刪除多余的路徑描點,這樣去除多余的路徑線段(刪除那段中間的描點,兩端點留下)

UI設計細節(jié)及技巧
簡單就是下圖:

UI設計細節(jié)及技巧
4、使用鋼筆工具把剩下的線段畫完(注意:兩描點的控制點一定要拖到節(jié)點去,不然用鋼筆工具從兩點接著畫的時候會彎曲)

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

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

UI設計細節(jié)及技巧
5、得到完整相機輪廓,有沒有感覺很完整!

UI設計細節(jié)及技巧
6、選擇橢圓工具,再選擇減法UI設計細節(jié)及技巧,按住SHIFT+左鍵拖圓,大家注意,這些步驟是在一個圖層完成的UI設計細節(jié)及技巧

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

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
User_TlDe~b4pM42018-12-24 09:27
非常好
朱大哥2018-09-05 11:43
太棒了
獨角獸2018-01-09 12:22
給我半跟煙2017-05-28 11:26
現(xiàn)在就是要這兒~~
夼人就是我2017-05-28 07:18
我要看內容內容
易水寒08032017-05-28 03:39
做不好
自由撰稿人20092017-05-27 10:00

關注大神微博加入>>

網(wǎng)友求助,請回答!