12月9日, 2014 2,477次
類似文章有：
UI設計中的細節及技巧
作者：duanjian
經常有朋友在說，能把一款軟件用精，那他就很牛逼了。我覺得，真的要精通一款軟件可不是那么容易的！ 比如，精通PRO—E ，會建模是熟練使用，會編程參數才是高級，一般設計師也就只能建模，算的上熟練使用。能說精通我覺得要達到林清安教授那樣才算精通吧！
好了，我們現在來說Photoshop (簡稱PS )，ps真的功能很強大，能用于很多行業。能用它來修圖美化， 能用來排版，能用于游戲原畫制作，能處理渲染圖…..對于我們UI設計，是必須熟練使用的畫圖軟件。下面我 會把我這幾年的使用及學到的總結出來的細節和技巧列出，大家看的時候可以練練手，如果你經常繪圖標，那么我的這篇文章對你將會很有用。
鋼筆工具
1、控制節點的調整（文章中網格設置為“編輯–>首選項–>參考線”）
鋼筆工具畫畫的節點分2部分：
1.是主節點，控制形狀大致方向。
2.是調整路徑曲線弧度的。
我記得在cs 3中 選中1節點，是可以按鍵盤“上下左右”進行微調的，且不受網格影響。也就是說，調整力度是小于1px的，若用鼠標選中1節點移動，最小距離是1px，大家可以在cs3中試試。
我現在用的是cs6 Exted版，就不能像cs3中那樣小于1px的調整。就是說，在cs6中無論鍵盤或者鼠標移動，它最小距離都是1px。
節點2，當我們用【直接選擇工具】
點擊圖標時，打開控制節點。在沒有開啟網格時，節點2按住鼠標左鍵是可以隨意移動的，注意此時你的移動距離是可以小于1PX的。當網格打開，你的移動單位距離只能是上下左右1PX。大家注意這個細節，在做小圖標時候，這個技巧的微調，會讓你的圖標更清晰，銳度更高。
還要提醒大家注意的是，按住Ctrl+T縮小圖標時候，在你縮小后不要覺得就完事了，你還需要微調節點位置，避免出現過多亞像素，使圖標更清晰。效果如下：
如上圖所示：原圖標放大，路徑是對準了像素格的（右上角為100%狀態整體效果圖）
縮小后的圖標在放大打開網格，會發現有亞像素的存在了（左上角為100%狀態）
在做100PX以上的圖標時，你隨意放大或者縮小是不容易用肉眼看到這些亞像素的。但是，當你做小圖標時就能很容易出現亞像素，所以做完后我們還要稍微調整節點位置，讓它對準像素格，我們在看下效果對比吧：
2、用路徑繪制對稱圖標
在我們用路徑繪制對稱圖形時候，有兩種方法，他們各有各的好處。我們來說下面這個圖標的做法：
方法一：拼接
觀察這個“安全”圖標，先分析結構，是由2個半盾構成的，然后中間減去了一個勾。所以呢我們繪制如下：
方法二：半封閉復制
先分析結構，盾是連貫的，然后中間減去了一個勾。繪制如下：
在我們復制用鋼筆工具繪制的半封閉圖形時候，不要選擇圖層Ctrl+J，因為在cs6中這樣復制圖形會變形。所以，我建議大家按照Alt+左鍵拖動復制！，這樣復制出來才是一樣的。
3、添加描點和刪除描點繪制完整路徑
在我們用形狀繪制圖形時候，使用直接選擇工具
刪除多余的路徑錨點，從而去除多余的路徑線，在需要刪除中間一段路徑的時候，需要選用鋼筆工具進行添加錨點，然后用直接選擇工具選中進行刪除。
具體如下：在你要刪除的線段中間添加描點（【鋼筆工具】或者【直接選擇工具】均可），在用直接選擇工具刪除描點。
我們選擇繪制一個相機圖標：
1.先用圓角矩形工具繪制圓角矩形
圓角設置為2px，填充顏色，效果如下圖所示；
3.我們對比著左邊做好的做，在右邊繪制。打開網格，選擇【直接選擇工具】，添加描點（注意對稱，在要刪除的那段上要添加3個描點）
3.使用【直接選擇工具】刪除多余的形狀上錨點，這樣去除多余的線段（刪除那段中間的描點，兩端點留下）
簡單就是下圖：
4.使用【鋼筆工具】把剩下的線段畫完（注意：2描點的指控點一定要拖到節點去，不然用鋼筆工具從2點接著畫的時候會彎曲）
5.得到完整相機輪廓，有沒有感覺非常的完整呢？
6.選擇【橢圓工具】，在選擇減去
，按住shift+左鍵拖圓，大家注意，這些步驟是在一個圖層完成的
?圖標描邊
在PS CS6出來后就已經新增加了一項描邊功能。使用這個工具能使圖標畫出來非常的便捷，在繪制圖標時相互結合選擇時也需要一定抉擇。當你繪制較小圖標時，描邊1px到2px可以選擇【圖層–>描邊】這樣制作icon更快捷，更節省時間。但是當你描邊太大，就會有直線邊。
而當你考慮到以后可能需要放大或者打印出來。此時，你就要選擇【形狀描邊】或者【畫一個圖塊再用減法】 因為這樣隨意你放大縮小他都不會失真，還有就是“畫一個圖塊用減法”放大或者縮小是按比例放大和縮小。
1、虛線描邊，2px，對齊（內描邊）
2、角點樣式效果
3、描邊形狀可以繪制開放式路徑圖標
繪制圖標時候會用到間斷的形狀
這時候可以用路徑描邊樣式，是支持開發路徑描邊的。我們就用開放路徑描邊來繪制下面圖表中的3個（注意：下面圖標還能用“減法”繪制）
繪制“郵件”圖標
1.用鋼筆工具先畫出形狀
2.調整描邊屬性，4點粗，內描邊，圓頭端點，圓角點
3.效果圖如下：
4.同理繪制其他圖標（注意：一個圖標有多部分組成時，可能需要多個圖層的單獨路徑
我們順帶提下“減法”的繪制
這種方法就是之前說的用【鋼筆工具】來繪制那些較細的“線圖標”，必要時會用到【添加描點】【刪除描點】等工具，好處就是便于調整！
用形狀來平均距離
大家在排版、布局、測距離時，普遍會用標尺工具和參考線。其實呢，我一般會用 
或者平均距離。在ps CS6中，可以隨意調整矩形工具大小，具體君下：
我們要的距離是32px，我們只需要按住Alt+左鍵拖動，就能精確的排列這4個圖標的間距了。
選中【矩形工具】，我們還可以隨意調整矩形的長寬，他就相當于一把隨意的尺子。
選擇工具
我們來看下面圖標（按住Ctrl和路徑選擇工具切換使用）
結語：
寫的有點多了，相信大家也累了。用了ps這幾年，從不會到熟練，中間也付出了很多，從最開始的了解各個工 具到后來能做出自己想要的效果，都離不開辛勤的練習、學習。平時呢我除了用ps外，手還要練著PRO—E軟件。 沒辦法，自己是工業設計專業出生，總是忘不了自己還會做三維，捏在手里總不會壞。
寫這篇文章呢，只是想把我這幾年學到的技巧+自己親身遇到問題+探索解決告訴大家，有好的就要分享相信里面的問題大家也遇到過，也有些細節大家在閱讀這篇文章前已經掌握，希望大家推薦給更多人學習這些細節.
