雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

六步完成卡通ui設(shè)計(jì),讓設(shè)計(jì)變得更簡(jiǎn)單

Time: 2020-02-24

 卡通一直都是非常受人們歡迎的一種設(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)重要的左右。


1.jpg

(圖片來(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é)效果~


2.jpg

(圖片來(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ò)的哦!


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)