Illustrator(AI)設(shè)計(jì)制作卡通立體效果的小熊圖標(biāo)實(shí)例教程

今天很高興請到了我們可愛的太空熊做為麻豆,他將會協(xié)助我一起為大家展示一下卡通角色造型圖標(biāo)的設(shè)計(jì)流程與方法。OK,廢話不多說,我們先來看一下最終的效果圖。
WOW,太空熊坐在曲奇月面上,旁邊插pockey旗幟,背景是布滿星辰的外太空,太有FEEL了:),那么這么可愛的圖標(biāo)是如何完成的呢?現(xiàn)在我們開始從頭分解一下它的設(shè)計(jì)流程。首先是創(chuàng)意階段。
視覺元素
我需要做一個(gè)以太空熊為主題的圖標(biāo)教程,于是我開始了構(gòu)思,首先太空熊是我們必不可少的元素,但為避免單調(diào),我增加了月面、外太空、旗幟這3個(gè)視覺元素作為輔助,以此來增加圖標(biāo)的細(xì)節(jié)和氣氛。
視覺風(fēng)格
元素確定了,接下來需要對圖標(biāo)的表現(xiàn)風(fēng)格進(jìn)行初步的定義,首先我可以確定的是圖標(biāo)整體是往卡通活潑的風(fēng)格上去靠的,那么各個(gè)元素間的關(guān)系和聯(lián)系如何是把控呢?在這里我的解決方法是加入一些幽默和詼諧的元素融入到設(shè)計(jì)當(dāng)中,曲奇月面、POCKY旗幟、攝影背景。這3個(gè)原本獨(dú)立的元素現(xiàn)在很好的組合到了一起,與太空熊搭配起來,儼然變成了一組很完整的卡通攝影造型。
圖標(biāo)造型
Ok,我們現(xiàn)在進(jìn)入具體的圖標(biāo)設(shè)計(jì)環(huán)節(jié),設(shè)計(jì)圖標(biāo)簡單的來說可以分為3個(gè)階段:1.造型,2.體感,3.質(zhì)感。其中造型階段是決定整個(gè)圖標(biāo)方向的重要一步,不同的造型直接決定了圖標(biāo)的后期細(xì)節(jié)表現(xiàn)和圖標(biāo)的氣質(zhì),在這里我以偏30度的造型角度來塑造整體圖標(biāo)。
線條造型
和繪畫一樣,我們前期需要以簡單的圖形對圖標(biāo)各個(gè)元素的關(guān)系和透視進(jìn)行大概的確立。
差不多了就可以對造型進(jìn)行細(xì)化。
Ok,圖標(biāo)的造型基本上差不多,是不是感覺有點(diǎn)簡陋?沒關(guān)系,接下來我們要開始對圖標(biāo)加入光影的細(xì)節(jié)了,這是輔助確立圖標(biāo)氣質(zhì)和風(fēng)格重要的一步。
光影體感
在之前線條造型的基礎(chǔ)上補(bǔ)足一些過渡的圖形讓整體造型更加的整體和完整,之后就是見證奇跡的時(shí)刻了,同學(xué)們現(xiàn)在用你們的鼠標(biāo)點(diǎn)選漸變工具,然后全選圖形對它整體應(yīng)用由白到灰的橢圓形漸變,效果如下,
WOW,是不是密密麻麻不知所措了?沒關(guān)系,耐著性子慢慢調(diào)整吧,把漸變中心和范圍對照受光面進(jìn)行統(tǒng)一和微調(diào),調(diào)整完后如下圖,
有點(diǎn)像3D的白模渲染:)
加入細(xì)節(jié)投影,明確各塊面的透視關(guān)系。
質(zhì)感造型
終于到了上色階段,按照之前確立的明暗關(guān)系對各個(gè)塊面進(jìn)行色彩定義。
在色彩的基礎(chǔ)上加入各個(gè)元素的質(zhì)感與細(xì)節(jié)。
最后添加高光,反光和更多的細(xì)節(jié)。
OK,到這里為止就是太空熊圖標(biāo)整體的設(shè)計(jì)流程和思路了,主要以流程分解為主,中間略去了很多細(xì)節(jié)的技法表現(xiàn),但無傷大雅,留給同學(xué)們自己去琢磨和發(fā)揮的空間,多探索多練習(xí),你會從中獲得更多的啟發(fā)和鍛煉。那么我們下次再見:)
相關(guān)文章
AI( Illustrator)快速繪制逼真的房車圖標(biāo)
這篇AI快速繪制房車圖標(biāo)教程是我剛剛學(xué)習(xí)過的,教程僅僅使用了簡單的七個(gè)步驟就繪制出了一個(gè)房車的造型,原作者的靈感來源是《絕命毒師》中的房車造型2013-09-26AI創(chuàng)建規(guī)則圖標(biāo)技巧教程
這篇AI創(chuàng)建規(guī)則圖標(biāo)技巧教程對于正在學(xué)習(xí)UI設(shè)計(jì)的朋友們來說非常有用,我最近也在學(xué)習(xí)UI設(shè)計(jì),APP圖標(biāo)最近挺火,不與時(shí)俱進(jìn)不行了2013-09-19Illustrator(AI)模仿制作逼真的mediaplayer11媒體播放器圖標(biāo)實(shí)例教程
mediaplayer11.0 是微軟媒體播放器的最新版本, 作為VISTA 系統(tǒng)自帶的播放工具。它的圖標(biāo)質(zhì)感很強(qiáng)。下面我們來使用AI做mediaplayer11.0 的圖標(biāo)2013-07-31Illustrator(AI) CS設(shè)計(jì)繪制矢量精致網(wǎng)頁運(yùn)用圖標(biāo)組合實(shí)例教程步驟詳解
教程中所應(yīng)用到的軟件主要有 Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop等。我們用Adobe Illustrator CS 進(jìn)行圖標(biāo)設(shè)計(jì)2013-07-28Illustrator(AI)設(shè)計(jì)繪制精致可愛的矢量三維圖標(biāo)實(shí)例教程
本章教大家利用Illustrator繪圖軟件中的三維功能來設(shè)計(jì)繪制三維圖標(biāo),當(dāng)然以此類推可以制作更多中的三維圖片2013-07-26Illustrator制作OSX風(fēng)格磁鐵圖標(biāo)
在設(shè)計(jì)一個(gè)圖標(biāo)之前,在腦海中應(yīng)有個(gè)大體的意象,意象形成后,可以通過畫些草稿圖來具象圖標(biāo)2013-07-10- 本教程使用AI制作質(zhì)感超炫的紅色立體@圖標(biāo),教程不算難,適合初學(xué)者學(xué)習(xí),喜歡的朋友可以一起來學(xué)習(xí)吧2013-05-31
SPACEBEAR繪制卡通可愛太空熊麻豆造型圖標(biāo)解析
Hi all! 今天很高興請到了我們可愛的太空熊做為麻豆,他將會協(xié)助我一起為大家展示一下卡通角色造型圖標(biāo)的設(shè)計(jì)流程與方法。OK,廢話不多說,我們先來看一下最終的效果圖。2013-04-03- 這篇AI實(shí)例教程將向朋友們介紹用AI繪制卡通士兵圖標(biāo)的方法,這是一篇國外翻譯教程,學(xué)習(xí)制作難度適中,適合有一定AI基礎(chǔ)的朋友學(xué)習(xí),繪制完成的效果也很漂亮,喜歡的朋友快2013-02-07
Illustrator使用3D工具和參考線來創(chuàng)建立體的圖標(biāo)
當(dāng)我們在做一些立方造型的時(shí)候會用到一些帶顏色的參考線,來保持個(gè)圖標(biāo)形體間的大小相似。2013-02-06