卡通一直都是非常受人們歡迎的一種設(shè)計(jì)風(fēng)格，而人們也開(kāi)始把這種設(shè)計(jì)風(fēng)格放在了ui界面設(shè)計(jì)中，因此也有了越來(lái)越多卡通形式的ui設(shè)計(jì)，下面我們跟隨小編一起來(lái)了解一下卡通ui設(shè)計(jì)的相關(guān)資料吧。

卡通ui設(shè)計(jì)步驟一設(shè)計(jì)構(gòu)思

在復(fù)雜的作品也要從簡(jiǎn)單的開(kāi)始，拿起你的鉛筆，畫(huà)出你想要的卡通造型。無(wú)論是做什么設(shè)計(jì)，肯定 不可能空穴來(lái)風(fēng)，憑空想像，特別是對(duì)自己不太熟悉的東西，所以千萬(wàn)別忘了找參考素材哦!

卡通ui設(shè)計(jì)步驟二草圖繪制

新建AI文件把圖片置入到文件當(dāng)中。一定要點(diǎn)擊嵌入，規(guī)整的圖形思維，然后用鋼筆工具照著草圖描邊細(xì)化，注意描邊粗細(xì)的把握，大形體之間的描邊要粗，小形體之間的描邊要細(xì)一些，具體情況可自行斟酌，最后一點(diǎn)，對(duì)齊描邊選項(xiàng)一定是居外描邊，這對(duì)畫(huà)面風(fēng)格起到至關(guān)重要的左右。

（圖片來(lái)自網(wǎng)絡(luò)）

卡通ui設(shè)計(jì)步驟三初稿設(shè)計(jì)

最重要的一步：輪廓勾勒。其實(shí)用的是 UI 繪制 icon 手法和思維。所以在輪廓勾勒的時(shí)候要注意：一定要用布爾運(yùn)算!

也就是說(shuō)，凡是涉及到出線部分，一定是用各種圓疊加切割的，而不是用鉛筆工具勾勒 。鋼筆工具勾或放也可以，但這不是小魔女的插畫(huà)風(fēng)格~個(gè)人比較喜歡的是規(guī)整的圓，整齊的方。

以稍微復(fù)雜一些的身體為例，它其實(shí)是由很多的圓形、橢圓形疊加而成的。最后一行的不規(guī)則形狀，其實(shí)是1/4圓。初稿設(shè)計(jì)的時(shí)候直充的顏色都只是大致的顏色，有一些回寫的色卡，一般都是先用這些顏色 ，之后再根據(jù)整個(gè)畫(huà)面重新去做調(diào)整。

卡通ui設(shè)計(jì)步驟四上固有色

這一步相對(duì)很簡(jiǎn)單就是把白色填充改成不同的固有色就好，如果是為了印刷需要，那么CMYK的色值注意取5進(jìn)制的整數(shù)，對(duì)了還有鞋部的細(xì)節(jié)，勾選虛線，加細(xì)節(jié)效果~

（圖片來(lái)自網(wǎng)絡(luò)）

卡通ui設(shè)計(jì)步驟五增加明暗

雖然是矢量卡通形象，但是如果能加好明暗關(guān)系也能讓畫(huà)面更加豐富，如何加明暗呢?依胳膊這個(gè)局部為例子。

第一步當(dāng)然是先要把暗部畫(huà)出來(lái)，超出胳膊部分的圖形可以隨意一些，反正一會(huì)兒也是要剪去的!

第二步，把原有的胳膊CTRL+C復(fù)制，然后CTRL+C原位復(fù)制粘貼。

第三步，同時(shí)選中胳膊和陰影部分選擇路徑查找器當(dāng)中的交集功能，大工搞成!

如果我們之前的描邊對(duì)齊方式不是居外描邊而是居中就會(huì)有最后一圖的錯(cuò)誤情況!所以切記!

卡通ui設(shè)計(jì)步驟六大功告成

造型已經(jīng)做好了，在加點(diǎn)文字和背景吧!大功告成!

其實(shí)卡通ui設(shè)計(jì)的步驟還是相對(duì)比較簡(jiǎn)單的，不過(guò)設(shè)計(jì)出來(lái)的卡通ui效果卻是非常不錯(cuò)的，而且它的市場(chǎng)反響也是非常不錯(cuò)的哦!