卡通一直都是非常受人們歡迎的一種設計風格，而人們也開始把這種設計風格放在了ui界面設計中，因此也有了越來越多卡通形式的ui設計，下面我們跟隨小編一起來了解一下卡通ui設計的相關資料吧。

卡通ui設計步驟一設計構思

在復雜的作品也要從簡單的開始，拿起你的鉛筆，畫出你想要的卡通造型。無論是做什么設計，肯定 不可能空穴來風，憑空想像，特別是對自己不太熟悉的東西，所以千萬別忘了找參考素材哦!

卡通ui設計步驟二草圖繪制

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

（圖片來自網絡）

卡通ui設計步驟三初稿設計

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

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

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

卡通ui設計步驟四上固有色

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

（圖片來自網絡）

卡通ui設計步驟五增加明暗

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

第一步當然是先要把暗部畫出來，超出胳膊部分的圖形可以隨意一些，反正一會兒也是要剪去的!

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

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

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

卡通ui設計步驟六大功告成

造型已經做好了，在加點文字和背景吧!大功告成!

其實卡通ui設計的步驟還是相對比較簡單的，不過設計出來的卡通ui效果卻是非常不錯的，而且它的市場反響也是非常不錯的哦!