事情的來(lái)源是今早 9 點(diǎn)零三分，我還在夢(mèng)里吃著澳龍，突然微信的震動(dòng)把我震醒了。我一拿手機(jī)，原來(lái)是我的恩師胡曉波給我發(fā)來(lái)一條消息，讓我試著能不能寫(xiě)一篇關(guān)于卡通 LOGO 的教程。當(dāng)然我是一個(gè)很樂(lè)于分享的好人，所以有了今天的這篇分享。
準(zhǔn)備好了嗎？我要進(jìn)去……哦不，我要開(kāi)始了！
首先先去網(wǎng)上找一些關(guān)于青蛙的素材，當(dāng)然，你可以找照片，也可以找一些青蛙的卡通形象參考。然后在網(wǎng)上我看到了這張圖，覺(jué)得非常有意思?；④|一震，決定把這個(gè)拿來(lái)當(dāng)動(dòng)作參考。
在做卡通logo的時(shí)候，找照片素材最好是找姿態(tài)、動(dòng)作比較有故事性、有意思、有特點(diǎn)的，這樣出來(lái)的形象也比較生動(dòng)。
接著，把這張照片墊底，試著草圖一下它，把它的輪廓先用 AI 鋼筆工具勾出來(lái)，這樣就得到了一個(gè)初始的外輪廓。
再處理下這個(gè)外輪廓，得到這個(gè)初始的輪廓后，感覺(jué)這個(gè)形象完全可行，那么我們現(xiàn)在需要把它的線(xiàn)條變的更順滑，整體的形象顯得更可愛(ài)（既然是卡通，可愛(ài)一點(diǎn)會(huì)更好看）。
重點(diǎn) 2：
怎么能讓一個(gè)形象變得 Q 萌可愛(ài)？長(zhǎng)時(shí)間的研究卡通，我得出這么一個(gè)結(jié)論：形象偏矮胖、敦厚、圓潤(rùn)，就比較能突出可愛(ài)的特征，把你勾勒的初始輪廓適當(dāng)壓扁，讓它變矮胖。
經(jīng)過(guò)線(xiàn)條的優(yōu)化（使其圓滑），外輪廓的壓扁處理以后，就得到了最后的這個(gè)結(jié)果。
整體形象確定以后，再給青蛙畫(huà)五官，這里，我們?cè)偃ゾW(wǎng)上找一些青蛙的卡通形象的處理方式（或者不局限于找青蛙也可以找一些與青蛙形象相近的動(dòng)物，例如蜥蜴等等）。
重點(diǎn) 3：
卡通的五官，處理方式其實(shí)很簡(jiǎn)單，盡量用幾何圖形去作為臉部的五官特征。
在這個(gè)案例上，因?yàn)橹黧w是青蛙，所以不能單純用一個(gè)小圓點(diǎn)去作為青蛙的眼睛，我們可以看到青蛙眼睛的特征，是有一個(gè)較大的眼白與較小點(diǎn)的眼珠。所以這邊的處理方式，就是一個(gè)白色的大圓+黑色小圓。
單單這個(gè)形象還是不太夠，雖然這個(gè)坐姿已經(jīng)比較生動(dòng)了，我們可以根據(jù)這個(gè)形象展開(kāi)聯(lián)想，讓它更充滿(mǎn)故事性和趣味性，這里觀(guān)察青蛙的姿勢(shì)，這個(gè)屁股的角度，可以讓它坐在跟大自然有關(guān)的物體上，加上這個(gè)雙手護(hù)胸的動(dòng)作，讓它叼一根樹(shù)枝，更能體現(xiàn)悠閑的氣質(zhì)。
重點(diǎn) 4：
卡通吉祥物的標(biāo)志，利用本身的的姿態(tài)動(dòng)作，適當(dāng)展開(kāi)聯(lián)想，加一些小物件可以讓它更生動(dòng)，更有趣。
接下來(lái)就是上色跟補(bǔ)充一些細(xì)節(jié)了。如果配色較差，可以去網(wǎng)上找一些配色的參考。這里我找到一個(gè)卡通的配色，剛好也是綠色為主，適合青蛙，且背景也可以參考它做一個(gè)疊底。
最后，選個(gè)自己覺(jué)得較為合適的字體，如果會(huì)做字體的話(huà)最好是自己做個(gè)字兒，再做個(gè)排版，就OK 啦~
重點(diǎn) 5：
卡通 LOGO 的排版，不要太復(fù)雜，因?yàn)榭ㄍ?biāo)志本身的圖形具象，排版簡(jiǎn)單更好看，用字的字體氣質(zhì)要符合圖形。
前面的案例，想必大家都已經(jīng) get 到了步驟，還我還是要再演示一下這個(gè)案例，嘻嘻。
還是一樣的，這張照片是我偶然看到的，覺(jué)得非常有感覺(jué)就保存到手機(jī)了。在做這個(gè) LOGO 前突然想到有這么一張圖，立馬開(kāi)始操作。
其實(shí)大家在日常生活中看到比較有意思的圖片，都可以保存下來(lái)，說(shuō)不定哪天它就能變成一個(gè)好看的 LOGO 是不是呢？
好了不說(shuō)廢話(huà)，開(kāi)始勾輪廓！
這張圖的松鼠，看起來(lái)還是比較飽滿(mǎn)的，所以在后期調(diào)整優(yōu)化曲線(xiàn)的時(shí)候會(huì)比較輕松，但是這個(gè)圖的外輪廓，相比第一個(gè)案例的青蛙，是比較復(fù)雜的，這里需要耐心一些。
這里繪制的外輪廓，線(xiàn)條都不是合并的，但是我們發(fā)現(xiàn)，這個(gè) LOGO 是需要做一些高光跟陰影的，所以這里先給大家普及一個(gè)基礎(chǔ)知識(shí)。
三種描邊模式，我們選擇第三種——使描邊外側(cè)對(duì)齊，因?yàn)槲以诮o圖形做剪切陰影或者是高光時(shí)，不可能 100% 沿著輪廓去勾勒，這樣太累了，所以一般會(huì)超出外輪廓一些，再去做剪切，這樣能省不少時(shí)間。
重點(diǎn) 6：
卡通 LOGO 的繪制，基本都是用到外輪廓，這樣好做高光跟陰影的剪切。
回到主題，我們接著畫(huà)這個(gè)松鼠。
剛剛我們已經(jīng)把草圖大概勾勒出來(lái)了，現(xiàn)在把這個(gè)草圖墊底，讓它形成一個(gè)合并的狀態(tài)（注意先觀(guān)察草圖找好錨點(diǎn)的起點(diǎn)，否則很難讓整個(gè)輪廓連起來(lái)），并且過(guò)程中、優(yōu)化線(xiàn)條曲線(xiàn)（這一步還是有點(diǎn)難度的，鋼筆工具不太熟的同學(xué)需要多練習(xí)）。
勾勒完成后的線(xiàn)條是圖 1 這樣的，不少同學(xué)會(huì)有疑問(wèn)，為什么有些地方會(huì)呈現(xiàn)雙線(xiàn)的狀態(tài)？別急，把它換成外描邊模式你就明白了。
因?yàn)橥饷柽吥Ｊ剑?dāng)有兩條相近的線(xiàn)條時(shí)，是有可能重疊的，這樣就能形成一些細(xì)節(jié)線(xiàn)條。
接著，我們繼續(xù)調(diào)整有些不完美的地方，比如重疊到的地方線(xiàn)條粗細(xì)不統(tǒng)一等等，調(diào)整完后我們看下效果。
到了這步以后，其實(shí)最難的點(diǎn)已經(jīng)被你拿捏了，剩下的就是補(bǔ)一些細(xì)節(jié)。另外，松鼠的尾巴，這邊是沒(méi)有按照?qǐng)D片的線(xiàn)條去處理的，因?yàn)楝F(xiàn)在這個(gè)圖形是往下走的趨勢(shì)，如果尾巴還是往下垂，那整個(gè)圖形的重心就不平衡了。
這邊尾巴的處理也可以網(wǎng)上找一些參考，因?yàn)樯厦嬲f(shuō)的平衡問(wèn)題，所以我把松鼠尾巴處理成往上走的趨勢(shì)。
大體造型已經(jīng)完成，現(xiàn)在剩下的就是填補(bǔ)五官、填充顏色，加高光陰影。
重點(diǎn) 7：
陰影跟高光這部分，其實(shí)不需要過(guò)于嚴(yán)謹(jǐn)。沒(méi)有美術(shù)功底的同學(xué)也不用發(fā)愁，在一些有交錯(cuò)，遮擋的部位加陰影，在頭頂或者身體外邊緣加高光，基本是沒(méi)有什么大問(wèn)題的。
這樣圖形就完成了，最后加上排版就完成了。
第三個(gè)案例跟前兩個(gè)其實(shí)很相似，都是我在網(wǎng)上看到比較有意思的照片，下載下來(lái)做成卡通標(biāo)志。廢話(huà)不多說(shuō)，上圖了。
其實(shí)我個(gè)人很喜歡做猴，當(dāng)然大部分原因是因?yàn)槲覑?ài)人叫……猴子，emmm好像離題了，收！
因?yàn)楹镒颖旧硎且环N帶著調(diào)皮、聰明、智慧性質(zhì)的動(dòng)物，做猴 LOGO 其實(shí)可以讓它賦予多種性格。
如上兩個(gè)案例的方法，先大概繪制一下猴子的外輪廓，看一下圖形大概的感覺(jué)（這里還是與第一個(gè)案例說(shuō)的，圖形整體看起來(lái)比較瘦高，可愛(ài)氣質(zhì)會(huì)偏弱,我們可以嘗試壓扁）。壓扁后我覺(jué)得是我想要的一個(gè)高度，但是壓扁后頭部也會(huì)變形，那么接下去只要我們把這個(gè)壓扁后的猴子輪廓復(fù)制一個(gè)，再使用第一版繪制的頭部就 OK 了（這里不做具體演示）。
重點(diǎn) 8：
卡通類(lèi)型的 LOGO，一般身體都會(huì)比較短，頭比較大，圓，這樣可愛(ài)的氣質(zhì)才會(huì)突顯。
經(jīng)過(guò)一番調(diào)整操作后得到這樣一個(gè)輪廓，但是現(xiàn)在這猴子是沒(méi)有尾巴的，所以我們要給它添加一根又粗又長(zhǎng)……的尾巴。
這樣得到了一個(gè)最終的輪廓形態(tài)。接下來(lái)就是給它畫(huà)上臉，五官，還有增加一些高光細(xì)節(jié)了。
這里看你想給猴子定義什么樣的表情氣質(zhì)。原照片的這猴子，表情略帶無(wú)辜，我覺(jué)得還蠻不錯(cuò)的。那么我們嘗試一下畫(huà)上表情，注意簡(jiǎn)化。
委屈、無(wú)辜的表情，如果你不知道怎么畫(huà)才能表現(xiàn)出來(lái)，可以對(duì)著鏡子裝個(gè)委屈的表情看下，或者度娘一下委屈、無(wú)辜的照片。一般委屈無(wú)辜，眼睛的形狀都是呈現(xiàn)一個(gè)眼角往下的狀態(tài)。
加完五官以后，現(xiàn)在整個(gè)猴子的大致形象已經(jīng)出來(lái)了，那現(xiàn)在這個(gè)姿勢(shì)，需要加點(diǎn)什么才能讓它變完整。原照片上，是兩根分叉的樹(shù)干，其實(shí)照著畫(huà)也沒(méi)什么不妥，那我們就給它畫(huà)上樹(shù)干，再上個(gè)色。
畫(huà)完樹(shù)干，上完色后，整個(gè)圖形是不穩(wěn)的。原因是分叉的樹(shù)干其實(shí)是個(gè) V 字形，所以我們?yōu)榱俗屗€(wěn)住，在底部加一個(gè)類(lèi)似陰影的形狀去壓住它就完全 OK了。
本以為到這，就完成了。端詳許久，總覺(jué)得還差點(diǎn)啥，感覺(jué)這猴兒還不夠靈性。這時(shí)候我突然想到我前幾天買(mǎi)的毛線(xiàn)帽，然后想著，天冷了，給猴兒個(gè)帽子吧……
畫(huà)完后，又看了許久，不禁發(fā)出感嘆，我 TMD 真是個(gè)天才……最后老規(guī)矩，加排版，完事兒！
前面的都是根據(jù)一些照片去做的吉祥物卡通標(biāo)志，其實(shí)創(chuàng)造性不屬于特別高，我個(gè)人其實(shí)更喜歡是這類(lèi) MIX 標(biāo)志，把兩種不相關(guān)的物體結(jié)合起來(lái)，但卻不違和，反而更顯趣味創(chuàng)造性。
這個(gè)案例的靈感來(lái)源是我在 BE 上看到一個(gè)我很喜歡的設(shè)計(jì)師做的一個(gè)標(biāo)志（下圖） ，把老鼠與胡蘿卜結(jié)合，非常有意思。
做這個(gè) LOGO 之前，我就一直想做個(gè)胡蘿卜的創(chuàng)意性標(biāo)志（出于對(duì)波哥的愛(ài)），這類(lèi)型的卡通 LOGO，有時(shí)候就是靈感一瞬間迸發(fā)的事兒。但是沒(méi)靈感的時(shí)候，我都會(huì)去網(wǎng)上瞎看，有時(shí)候看著看著，就能想到做啥了。偶然間看到幾張?zhí)箍说恼掌?，靈雞一動(dòng)，把胡蘿卜跟坦克結(jié)合，因?yàn)閯偤锰箍说呐诠埽梢杂煤}卜代替（想到這里，我露出了姨母笑）。
那么胡蘿卜跟坦克的造型怎么畫(huà)呢？首先還是打開(kāi)你的網(wǎng)頁(yè)，可以先搜一下胡蘿卜的造型，再搜坦克的圖片（這里找到的坦克圖片，已經(jīng)是手繪圖了，所以我們要把它概括簡(jiǎn)化一下)。
我先不用管胡蘿卜的部分，因?yàn)楹}卜的角度是要根據(jù)坦克輪子的角度來(lái)做，所以我們先把坦克的部分繪制一下。仔細(xì)觀(guān)察坦克底座的構(gòu)造，拆解繪制。
到這里大家可能會(huì)有點(diǎn)困惑，這樣的圖片我要怎么下手？不要急，其實(shí)不難。上面我們已經(jīng)把坦克底座的部分拆解，現(xiàn)在只需要繪制一排車(chē)輪跟輪子上面的鐵蓋。這里需要注意的是，因?yàn)樘箍说奶卣魇置黠@，就是一根長(zhǎng)長(zhǎng)的炮管與底部的一排輪子，所以只要把這兩個(gè)特征能抓出來(lái)，基本不難看出是坦克了。
重點(diǎn) 9：
當(dāng)你要把一個(gè)實(shí)物/動(dòng)物圖片轉(zhuǎn)化成卡通風(fēng)格時(shí)，要仔細(xì)觀(guān)察它原來(lái)的線(xiàn)條，使其更幾何化，去繁從簡(jiǎn)。
坦克部分處理完就可以搞這個(gè)胡蘿卜了，這里就不用做太多演示了，胡蘿卜這么好畫(huà)！注意跟坦克合上的角度就 OK 了！
這個(gè)角度先畫(huà)個(gè)草圖，放上去試試合不合適。
可以！
再觀(guān)察下胡蘿卜的細(xì)節(jié)，因?yàn)樗洚?dāng)炮管，所以我們不加上面的葉子，但是這樣會(huì)不會(huì)看不出是胡蘿卜？那我們可以觀(guān)察下胡蘿卜身體部分有什么細(xì)節(jié)，再加上胡蘿卜的橙紅色，說(shuō)看不出我不信！
特征：胡蘿卜身上的劃痕
別急，現(xiàn)在看不出胡蘿卜不要緊，上色以后一切都會(huì)好的~
好了，可以合體了！注意各個(gè)組件的圖層關(guān)系。
上色！排版！完事兒！
這個(gè)案例跟上個(gè)案例其實(shí)非常相似，都是 MIX 系列的卡通 LOGO 這個(gè) LOGO ，這個(gè) LOGO 靈感來(lái)源于我偶然在網(wǎng)上看到了這張圖片，以獼猴桃代替了鸚鵡的翅膀，配色也完全不違和，是非常優(yōu)秀的作品了。
萌生了想長(zhǎng)做一個(gè)類(lèi)似的 LOGO，當(dāng)然我們不能再用獼猴桃的元素了。想想，其實(shí)很多水果可以做這樣的「代替品」。但是這里需要注意的是，什么樣的水果切開(kāi)，還非常具有特征，讓人一眼就能辨識(shí)出來(lái)。最后我選了西瓜，西瓜可以有半圓，也可以有三角形，這樣的話(huà)，鳥(niǎo)的翅膀形態(tài)發(fā)揮空間就很大了。切開(kāi)后的西瓜籽加上紅色的瓜瓤十分具有辨識(shí)度。
當(dāng)然我們先要做的是「鳥(niǎo)」這個(gè)主體的造型。這邊還是先去網(wǎng)上找一下鳥(niǎo)的圖片，最終，我選用這張圖片來(lái)作為這個(gè) LOGO 的主體（因?yàn)樗旧韴D片就有可愛(ài)的氣質(zhì)，更方便我們后面創(chuàng)作）。
這里我只提取了這只鳥(niǎo)的身體跟嘴的部分，翅膀我們要用西瓜代替的，所以暫時(shí)先不去繪制。確定好身體部分以后，我們?cè)賴(lài)L試先畫(huà)切開(kāi)的一半的西瓜。這里也不難，網(wǎng)上搜一下西瓜，很多素材可以參考著畫(huà)。
畫(huà)好的西瓜，我們?cè)賴(lài)L試旋轉(zhuǎn)角度，跟鳥(niǎo)的身體部分合體一下。
看起來(lái)真可以??！
現(xiàn)在的造型看起來(lái)是不是還不戳！是吧~但是還沒(méi)完！一般展翅的鳥(niǎo)兒，爪子是什么狀態(tài)？別慌，繼續(xù)度娘！
可以看到，展翅后的鳥(niǎo)兒，爪子都是往前伸。我們秉著卡通能簡(jiǎn)化就簡(jiǎn)化的原則，把爪子處理成線(xiàn)的形式即可。加以上色，「西瓜鳥(niǎo)」就出來(lái)了。
圖形這樣已經(jīng)是完成了，現(xiàn)在就剩下排版。當(dāng)我加上文字以后，發(fā)現(xiàn)這個(gè) LOGO 越看越顯得空，那咋辦？加個(gè)背景色塊其實(shí)就解決了（這里的背景色塊,也是根據(jù)鳥(niǎo)的身體走勢(shì)做的橢圓）！
重點(diǎn) 10：
當(dāng)你的卡通 LOGO 做完后發(fā)現(xiàn)整體看起來(lái)不飽滿(mǎn)，嘗試加個(gè)背景色塊，屢試不爽。
總結(jié)Tips：
- 在做卡通 LOGO 的時(shí)候，找照片素材最好是找姿態(tài)，動(dòng)作比較有故事性，有意思，有特點(diǎn)的，這樣出來(lái)的形象也比較生動(dòng)。
- 怎么能讓一個(gè)形象變得 Q 萌可愛(ài)？形象偏矮胖、敦厚、圓潤(rùn)，就比較能突出可愛(ài)的特征，把你勾勒的初始輪廓適當(dāng)壓扁，讓它變矮胖。
- 卡通的五官，處理方式其實(shí)很簡(jiǎn)單，盡量用幾何圖形去作為臉部的五官特征。
- 卡通吉祥物的標(biāo)志，利用本身的的姿態(tài)動(dòng)作，適當(dāng)展開(kāi)聯(lián)想，加一些小物件可以讓它更生動(dòng)，更有趣。
- 卡通 LOGO 的排版，不要太復(fù)雜，因?yàn)榭ㄍ?biāo)志本身的圖形具象，排版簡(jiǎn)單更好看，用字的字體氣質(zhì)要符合圖形。
- 卡通 LOGO 的繪制，基本都是用到外輪廓，這樣好做高光跟陰影的剪切。
- 陰影跟高光這部分，其實(shí)不需要過(guò)于嚴(yán)謹(jǐn)，在一些有交錯(cuò)，遮擋的部位加陰影，在頭頂或者身體外邊緣加高光，基本是沒(méi)有什么大問(wèn)題的。
- 卡通類(lèi)型的 LOGO，一般身體都會(huì)比較短，頭比較大，圓，這樣可愛(ài)的氣質(zhì)才會(huì)突顯。
- 當(dāng)你要把一個(gè)實(shí)物/動(dòng)物圖片轉(zhuǎn)化成卡通風(fēng)格時(shí)，要仔細(xì)觀(guān)察它原來(lái)的線(xiàn)條，使其更幾何化，去繁從簡(jiǎn)。
- 當(dāng)你的卡通 LOGO 做完后發(fā)現(xiàn)整體看起來(lái)不飽滿(mǎn)，嘗試加個(gè)背景色塊，屢試不爽。
初試卡通，或許效果沒(méi)有很好，但是都是能靠多看，多練，練會(huì)的。喜歡它，你就能靜下心去做它，練它，興趣是最好的老師。所以如果你也喜歡卡通類(lèi)型的 LOGO，讓我們干起來(lái)吧！
原文地址：胡曉波工作室（公眾號(hào)）
作者：小章魚(yú)
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》五個(gè)案例教會(huì)你怎么做卡通 LOGO （一）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)