越来越多的app结合ip来增加情感化设计，比如会员等级体系、新手指引、登录注册、周边延展等等。今天跟大家分享这组IP的设计过程，先来看看最终效果吧～

(资料图片仅供参考)

01IP风格设定

项目属性是教育类型，小孩、年轻人群为主。那么可爱的风格不会出错，以下是我从网上找的一些参考。

参考图来源于网络，仅做分析使用

通过参考分析，不难发现以上IP的共性特征：1 :0.5～1之间的头身比，造型圆润且以几何形的方式概括。

02造型绘制

1.图形组合

使用方、圆几何形绘制造型，通过重叠的形式，增加细节。比如：加个小口袋、头饰等等之类装饰。保证IP基础型简单，同时丰富整体造型。

2.头身比例

头身比例越大，整体的造型越趋近于胖墩墩、Q萌。这里我把IP的头身比设定为1:0.5，是不是更加幼龄、可爱些了。

线稿确定后，开始上色，我们设定IP的固有色为黄色，通过改变其明度的形式，给每个造型填充色块，如下图所示，最后，添加光影、结构线等方式打造伪3D效果，接下来一起看看如何塑造立体质感的吧～

03立体质感

3.光影

立体的质感一定是有体积的，通过加入亮面和暗面的方式，使其视觉“膨胀”，形成立体的效果。

以IP头部为例，设定左上角为主光源，那么左上方就会形成亮面。新建图层样式-内阴影，选择比固有色更亮一点浅黄色绘制亮面。

相对的，右下角的地方就会形成一个暗部区域，我们选取黄色的邻近色-橙色作为暗部内阴影的颜色，同时设置混合模式【正片叠底】，增加饱和度且不容易变脏哦。如下图所示，加入暗面后，立体效果明确些了～

最后，在暗部区域加上一些反光，让整体更透气。需要注意的是，反光颜色不要太亮，接近受光面的明度即可。

另外内阴影参数中，阻塞值也不要过大。太亮的颜色和过大的阻塞值，一来容易导致受光面曝光，二来由于内阴影之间会相互影响，过大的反光会掩盖暗部的颜色。

用同样的方式在脸部也加入亮面和暗面，立体效果初步形成～

虽然有了明暗，但立体感不够强。我们观察如下球体，右边的球体通过扩大亮部区域，加深明暗交界线。强化了黑白灰对比，让整体亮灰暗层级关系更明确，是不是立体感强多啦。

回到IP本身，同理，我们要强化整个头部的明暗对比关系。

①扩大亮部区域，越靠近光源的地方颜色明度越高。

新建图层，选择画笔工具，降低画笔透明度度一层一层的叠加进去。颜色上可以直接用吸管工具吸取亮部区域，稍微调整下明度和饱和度。

②加深明暗交界线，衬托反光区域更通透。

这一步通过加强明暗关系，亮部亮起来，暗部暗下去，画出头部和脸部的厚度，凸显立体质感。

4.边缘光、结构线

当有多个物体重叠时，除了绘制投影区分前后关系外，我们还可以加上边缘光和结构线来进一步拉开层级。如下图所示

同样的绘制方式，把IP的身体和四肢分别加上立体质感。扁平色稿到立体质感部分就塑造完成啦～

接下来一起看看表情设计的小技巧吧～

04IP延展-表情设计

下图是我在网络上搜索开心大笑和愤怒生气两组词得到的一些截图。右边动漫人物的表情都有一个共同点：夸大了嘴巴在五官中的占比，相对而言，夸张后的表情给人的感染力更强。

5.夸大比例

适当的夸大五官比例，有利于放大当前情绪的氛围。比如开心、惊讶、愤怒等，张的大大的嘴巴是不是使得整体表情张力强很多啦～

6.五官紧凑

五官之间的距离越舒展，看起来越显得成熟，反之，越幼龄。下图中紧凑的五官显得低龄、可爱些～

参考图来源于网络，仅做分析使用

细心的同学一定发现了，有些五官画眉毛，有些没画。通常来说，眉毛可以画也可以不画，

例如，下图表情中，有眉毛和没眉毛，传递出来的情绪有所差异。大家根据想要传达的具体情绪视情况而定。

如果IP定位很可爱、幼龄的风格，可以在眼睛的下方绘制一个小小的腮红，既丰富色彩，又提升了表情可爱值～

不管是IP造型还是表情动作，尽量简化用圆、方、三角、梯形等等这些基础的几何形状来绘制，就会简单很多啦。比如：用圆形表示开心大笑的眼睛，用半圆表示委屈的双眼等等。

最后我们来回顾一下知识点：

IP设计：①设定头身比例，②几何形构建造型，③质感塑造-光影关系、边缘光、结构线；

表情设计：①基础几何形绘制五官，②适当夸大比例，③五官紧凑。

以上就是此次IP设计以及表情延展的一些小技巧啦~ 抛砖引玉，希望对大家有一丢丢启发~

视觉课09期 试听课火热报名中！

菜心&慢热视觉课2.0版09期的试听课来咯，仅需9.9元，名额有限，先到先得！理论+实操，入股不亏！

上课时间：8月15日（周二）晚8点30。

课程详情点击左下角【阅读原文】即可查看，购买后记得扫上方二维码，或者添加微信：Amber-huihui(备注:试听课) 拉你进群，以免错过直播哦~