教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

如何繪制功能圖標(biāo)基礎(chǔ)篇?

更新時(shí)間:2018年12月13日15時(shí)33分 來源:傳智播客 瀏覽次數(shù):

  想想圖標(biāo)的繪制也是有歷史的,從剛開始ps用面切法運(yùn)用布爾運(yùn)算去切,有時(shí)候線條也是用面切面得到。隨著線性圖標(biāo)的火爆和普及,開始放棄面切法,轉(zhuǎn)用鋼筆工具直接繪制,還可以很好的控制線的直角和圓角。當(dāng)你會(huì)使用Ps繪制圖標(biāo)了,換成ai你會(huì)發(fā)現(xiàn)更加的快捷方便。隨著Sketch軟件在界面設(shè)計(jì)中有一席之地,在Sketch里快速繪制圖標(biāo)也是設(shè)計(jì)師需要掌握的一門技能。

  圖標(biāo)的繪制方法有面切法,鋼筆繪圖法,錨點(diǎn)法,圓切法。

  下面會(huì)從Photoshop、Illustrator、Sketch三個(gè)軟件去細(xì)講基本軟件工具。繪制案例想了很久要含有基本的知識(shí)點(diǎn),使用更多的工具。最后選擇的圖標(biāo)為齒輪、信號(hào),其中齒輪是最經(jīng)典的案例了,也是繪制圖標(biāo)的必修課。

  一、 Photoshop篇

  在ps里面繪制圖標(biāo)使用的基本工具有小白、小黑、布爾運(yùn)算、鋼筆工具、錨點(diǎn)。

  1.1 第一步打開ps,ctrl+k,勾選將矢量工具與變化和像素網(wǎng)格對(duì)齊。

  

  1.2 小黑、小白二人轉(zhuǎn)

  

  1.3 鋼筆工具、貝塞爾曲線

  貝塞爾曲線很多寫的文章太官方了,不太懂,也不知道如何下手。我還是總結(jié)我工作使用中應(yīng)該注意哪幾點(diǎn)。

  a、錨點(diǎn)倆邊的手柄要保持在同一水平線上。傾斜的錨點(diǎn)的手柄也要保持在同一水平線上。

  b、當(dāng)前手柄的長度不能超越下一個(gè)錨點(diǎn)的水平線。

  c、上下左右最邊上的肯定是錨點(diǎn)存在的點(diǎn),其他地方錨點(diǎn)的選擇需要多練習(xí)才能找到合適錨點(diǎn)的位置。

  c、鋼筆繪制的時(shí)候盡量不要讓倆個(gè)錨點(diǎn)靠的太近,會(huì)讓倆個(gè)錨點(diǎn)的手柄沒有施展的空間。

  最后如果你感覺貝塞爾曲線還是很難,可以先用Illustrator里面的鋼筆工具繪制,用多了就好了。我之前也感覺Photoshop里的鋼筆工具繪制好難用,今天寫教程做案例試了試還是很好用的,曲線也可以調(diào)整的很柔美。

  

  1.4 布爾運(yùn)算

  布爾運(yùn)算是通過繪制規(guī)則的形狀進(jìn)行合并、減去、相交、排除等方式得到新的形狀。

  

  1.5 主題圖標(biāo)面板繪制

  在主題設(shè)計(jì)的時(shí)候大神們的底板用的都很有特色。

  

  1.6 齒輪、信號(hào)案例演示

  

  二、 Illustrator篇

  在ai里面繪制圖標(biāo)使用的基本工具填充、描邊、鋼筆、路徑查找器、形狀生產(chǎn)器、對(duì)齊、錨點(diǎn)圓角、擴(kuò)展。

  2.1 cc2015自帶直角變圓角。

  

  2.2 路徑查找器的形狀模式等同于ps的布爾運(yùn)算(上面已講),路徑查找器下的6個(gè)工具在平時(shí)使用較少所以就忽略,感興趣的自己研究下。鋼筆錨點(diǎn)和ps使用是一樣的。

  

  2.3 路徑描邊可以通過擴(kuò)展讓線變成面,但是在繪制線性圖標(biāo)時(shí)不要把線進(jìn)行擴(kuò)展,因?yàn)榉糯罂s小不會(huì)改變線的粗細(xì),擴(kuò)展成面會(huì)隨著放大縮小而發(fā)生變化。有時(shí)候我們?cè)诶L制線性圖標(biāo)不好做的曲線,可以嘗試把這個(gè)形狀畫出來,然后再變成描邊就ok了。

  

  2.4 在繪制對(duì)稱圖標(biāo)的時(shí)候,有時(shí)候我們只需要繪制一半,通過鏡像復(fù)制,然后通過對(duì)齊-垂直或水平分布間距就可以很好的閉合在一起。( 對(duì)齊-顯示選項(xiàng)-對(duì)齊關(guān)鍵對(duì)象-垂直或水平分布間距 )

  

  2.5 形狀生產(chǎn)器工具,直接可以繪制有閉合可能的所有形狀。

  

  三、 Sketch篇

  在sketch里面繪制圖標(biāo)使用的基本工具編輯、旋轉(zhuǎn)、鋼筆、剪刀、布爾運(yùn)算、外形、變平。

  

  四、 Ai制作好如何轉(zhuǎn)到Ps和Sketch?

  4.1 Ai制作好轉(zhuǎn)到Ps,在Ai復(fù)制備份一個(gè),然后對(duì)象-擴(kuò)展,ctrl+c復(fù)制,ctrl+v粘貼到Ps里面選擇形狀圖層,不要選擇智能對(duì)象。再用小白工具調(diào)整細(xì)節(jié),讓每個(gè)錨點(diǎn)都和像素網(wǎng)格對(duì)齊。

  

  4.2 Ai制作好轉(zhuǎn)到Sketch,ctrl+c復(fù)制,ctrl+v粘貼到Sketch,調(diào)整參數(shù)盡可能是偶數(shù)整數(shù)。因?yàn)榇罅看嬖谛?shù)點(diǎn)的問題。改變數(shù)值還是要看下一圖標(biāo)整體感覺。

  

  五、 如何達(dá)到視覺平衡?

  很多人剛開始不會(huì)說按照規(guī)范來,主要在固定大小里面繪制就好了,其實(shí)這樣也可以,但是最終還是個(gè)別微調(diào)圖標(biāo)達(dá)到視覺上的統(tǒng)一。

  比如在56*56px固定大小的區(qū)域繪制好全部圖標(biāo),不要超出這個(gè)范圍。然后整體看哪些視覺比重大需要縮放,縮放是以2的倍數(shù)放大縮小。

  56-2的倍數(shù) 比如56px,54px,52px…

  

  六、 如何定義規(guī)范?

  比如在一定大小內(nèi),如何制定出一像素?

  以48*48大小為例。看似留了一像素,上下左右還是倆個(gè)像素,跟上面的視覺平衡是一樣的,都是以2像素為一個(gè)基準(zhǔn)。這種規(guī)范大一點(diǎn)的尺寸也是適用的比如88*88px。

  

  七、 如何統(tǒng)一風(fēng)格?

  圖標(biāo)的風(fēng)格我在《如何系統(tǒng)學(xué)習(xí)功能圖標(biāo)》基本都概括出來了,可以分析總結(jié)每個(gè)風(fēng)格的特點(diǎn),快速的制作,也有不少人發(fā)我看他們繪制的圖標(biāo),會(huì)用到倆三種風(fēng)格同時(shí)用到圖標(biāo)上面,還有就是總結(jié)出來的還沒嘗試學(xué)會(huì)就開始自己去嘗試新風(fēng)格,盡量還是不要先去嘗試新的風(fēng)格,之前整理的應(yīng)該夠用了。

  

  總結(jié)雖然講的都是簡(jiǎn)單的基本教程,但是也是必須要掌握的,



作者:傳智播客UI/UE設(shè)計(jì)培訓(xùn)學(xué)院

首發(fā): http://ui.itcast.cn

0 分享到:
和我們?cè)诰€交談!