联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

卡通UI设计步骤详解,手把手教你做好设计

Time: 2020-01-14


近年来卡通UI的市场行情是非常不错,越来越多的人也开始把目光转向了卡通UI的设计,但是对于很多新手来说却不知道要如何下手,下面我们跟随小编一起来了解一下卡通UI设计的相关资料吧。


卡通UI设计步骤


步骤一、设计构思

  再复杂的UI设计作品也要从简单的开始,拿起你的铅笔,画出你想要的卡通造型。无论是做什么设计,肯定不可能空穴来风,凭空想像,特别是对自己不太熟悉的东西,所以千万别忘了找参考素材哦!


  步骤二、草图绘制

  新建AI文件把图片置入到文件当中。一定要点击嵌入,规整的图形思维,然后用钢笔工具照着草图描边细化,注意描边粗细的把握,大形体之间的描边要粗,小形体之间的描边要细一些,具体情况可自行斟酌,最后一点,对齐描边选项一定是居外描边、居外描边、居外描边,重要的事情说三遍!


1.jpg

(图片来自网络)


  步骤三、初稿设计

  最重要的一步:轮廓勾勒。其实用的是 UI 绘制 icon 手法和思维。所以在轮廓勾勒的时候要注意:一定要用布尔运算!

  也就是说,凡是涉及到出线部分,一定是用各种圆叠加切割的,而不是用铅笔工具勾勒 。钢笔工具勾或放也可以,但这不是小魔女的插画风格~个人比较喜欢的是规整的圆,整齐的方。

  以稍微复杂一些的身体为例,它其实是由很多的圆形、椭圆形叠加而成的。最后一行的不规则形状,其实是1/4圆。初稿设计的时候直充的颜色都只是大致的颜色,有一些回写的色卡,一般都是先用这些颜色 ,之后再根据整个画面重新去做调整。


  步骤四、上固有色

  这一步相对很简单就是把白色填充改成不同的固有色就好,如果是为了印刷需要,那么CMYK的色值注意取5进制的整数,对了还有鞋部的细节,勾选虚线,加细节效果~


2.jpg

(图片来自网络)


  步骤五、增加明暗

  虽然是矢量卡通形象,但是如果能加好明暗关系也能让画面更加丰富,如何加明暗呢?依胳膊这个局部为例子。

  第一步当然是先要把暗部画出来,超出胳膊部分的图形可以随意一些,反正一会儿也是要剪去的!

  第二步,把原有的胳膊CTRL+C复制,然后CTRL+C原位复制粘贴。

  第三步,同时选中胳膊和阴影部分选择路径查找器当中的交集功能,打工搞成!

  如果我们之前的描边对齐方式不是居外描边而是居中就会有最后一图的错误情况!所以切记!


  步骤六、大功告成

  造型已经做好了,在加点文字和背景吧!大功告成!


3.png

(图片来自网络)


  其实卡通UI设计在UI设计行业中还算是一种相对比较简单的设计,所以大家如果有兴趣的话可以选择去尝试一下,看看自己能否独立完成设计哦!


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开