• <option id="wk2ow"><bdo id="wk2ow"></bdo></option>
  • <legend id="wk2ow"><object id="wk2ow"></object></legend>
  • <label id="wk2ow"></label>

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    類似文章有:

    “尺規作圖”新手入門教程與SubScribe插件的推薦使用

    UI設計中的細節及技巧

    作者:duanjian

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

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    鋼筆工具

    1、控制節點的調整(文章中網格設置為“編輯–>首選項–>參考線”)

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    鋼筆工具畫畫的節點分2部分:

    1.是主節點,控制形狀大致方向。

    2.是調整路徑曲線弧度的。

    我記得在cs 3中 選中1節點,是可以按鍵盤“上下左右”進行微調的,且不受網格影響。也就是說,調整力度是小于1px的,若用鼠標選中1節點移動,最小距離是1px,大家可以在cs3中試試。

    我現在用的是cs6 Exted版,就不能像cs3中那樣小于1px的調整。就是說,在cs6中無論鍵盤或者鼠標移動,它最小距離都是1px。

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    節點2,當我們用【直接選擇工具】新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧點擊圖標時,打開控制節點。在沒有開啟網格時,節點2按住鼠標左鍵是可以隨意移動的,注意此時你的移動距離是可以小于1PX的。當網格打開,你的移動單位距離只能是上下左右1PX。大家注意這個細節,在做小圖標時候,這個技巧的微調,會讓你的圖標更清晰,銳度更高。

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    還要提醒大家注意的是,按住Ctrl+T縮小圖標時候,在你縮小后不要覺得就完事了,你還需要微調節點位置,避免出現過多亞像素,使圖標更清晰。效果如下:

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    如上圖所示:原圖標放大,路徑是對準了像素格的(右上角為100%狀態整體效果圖)

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    縮小后的圖標在放大打開網格,會發現有亞像素的存在了(左上角為100%狀態)

    在做100PX以上的圖標時,你隨意放大或者縮小是不容易用肉眼看到這些亞像素的。但是,當你做小圖標時就能很容易出現亞像素,所以做完后我們還要稍微調整節點位置,讓它對準像素格,我們在看下效果對比吧:

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    2、用路徑繪制對稱圖標

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    方法一:拼接

    觀察這個“安全”圖標,先分析結構,是由2個半盾構成的,然后中間減去了一個勾。所以呢我們繪制如下:

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    方法二:半封閉復制

    先分析結構,盾是連貫的,然后中間減去了一個勾。繪制如下:

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    在我們復制用鋼筆工具繪制的半封閉圖形時候,不要選擇圖層Ctrl+J,因為在cs6中這樣復制圖形會變形。所以,我建議大家按照Alt+左鍵拖動復制!,這樣復制出來才是一樣的。

    3、添加描點和刪除描點繪制完整路徑

    在我們用形狀繪制圖形時候,使用直接選擇工具新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧刪除多余的路徑錨點,從而去除多余的路徑線,在需要刪除中間一段路徑的時候,需要選用鋼筆工具進行添加錨點,然后用直接選擇工具選中進行刪除。

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

    我們選擇繪制一個相機圖標:新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    1.先用圓角矩形工具繪制圓角矩形新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧圓角設置為2px,填充顏色,效果如下圖所示;

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    3.我們對比著左邊做好的做,在右邊繪制。打開網格,選擇【直接選擇工具】,添加描點(注意對稱,在要刪除的那段上要添加3個描點)

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    簡單就是下圖:

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    5.得到完整相機輪廓,有沒有感覺非常的完整呢?

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    6.選擇【橢圓工具】,在選擇減去新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧,按住shift+左鍵拖圓,大家注意,這些步驟是在一個圖層完成的新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    ?圖標描邊

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    2、角點樣式效果

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    3、描邊形狀可以繪制開放式路徑圖標

    繪制圖標時候會用到間斷的形狀新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧這時候可以用路徑描邊樣式,是支持開發路徑描邊的。我們就用開放路徑描邊來繪制下面圖表中的3個(注意:下面圖標還能用“減法”繪制)

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    繪制“郵件”圖標

    1.用鋼筆工具先畫出形狀

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    2.調整描邊屬性,4點粗,內描邊,圓頭端點,圓角點

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    3.效果圖如下:

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    4.同理繪制其他圖標(注意:一個圖標有多部分組成時,可能需要多個圖層的單獨路徑新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    我們順帶提下“減法”的繪制

    這種方法就是之前說的用【鋼筆工具】來繪制那些較細的“線圖標”,必要時會用到【添加描點】【刪除描點】等工具,好處就是便于調整!

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    用形狀來平均距離

    大家在排版、布局、測距離時,普遍會用標尺工具和參考線。其實呢,我一般會用 新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧或者平均距離。在ps CS6中,可以隨意調整矩形工具大小,具體君下:

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    選擇工具

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

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

    新手入門【UI設計】教程篇之:Photoshop圖標設計中的細節與技巧

    結語:

    寫的有點多了,相信大家也累了。用了ps這幾年,從不會到熟練,中間也付出了很多,從最開始的了解各個工 具到后來能做出自己想要的效果,都離不開辛勤的練習、學習。平時呢我除了用ps外,手還要練著PRO—E軟件。 沒辦法,自己是工業設計專業出生,總是忘不了自己還會做三維,捏在手里總不會壞。

    寫這篇文章呢,只是想把我這幾年學到的技巧+自己親身遇到問題+探索解決告訴大家,有好的就要分享相信里面的問題大家也遇到過,也有些細節大家在閱讀這篇文章前已經掌握,希望大家推薦給更多人學習這些細節.



    屬性標簽: ,

    歡迎留言

    頁面生成消耗的時間 0.472 秒,此頁面一共查詢了 110 次數據庫!緩存時間:2021-03-12 11:26:30你的IP為:205.164.17.218 午夜福利啪啪片,色yeye免费高清在线视频,亚洲手机在线人成视频,欧美激情网