您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

成长值达到300分以上才可以发布哟!~

先看看别人的即刻>

从0到1的表情设计

原创文章 分类: 教程 版权:
2036 29 28 5
2019-03-11
22.6
普通推荐

这个是之前画的一个Q版头像。今天看到突然觉得很有意思,把它做成了个动图,在这里把设计的过程和制作成动图的方法记录一下!


插画设计


① 找一张你喜欢的照片进行简单的描绘,把大致的形象画出来。Q版就是卡通,卡通的特点就是低龄化的感觉,参考一些卡通漫画的特点,脑袋放大,五官逼近。

Image title


② 在AI中建个500*500px的画布,把手绘的线稿拖到AI里面用钢笔工具进行描边,描边不一定要很画的很细致,把五官位置、头发褶皱方向等简单绘制出来,这个时候不用管像不像,五官摆放位置合适不合适,基本上把线条大致关系处理好就可以了。

Image title


③ 下一步开始填色,把描边层放到上面,新建填色图层。开始填色前先调整,线条,眼睛大小,位置等。(眼睛鼻子等单独放到一个图层里并命名好,方便做动效)

Image title


Image title


④ 整体填色完后整理图层,你可以刚开始就分类好也可以画完再整理,看个人习惯,整理完了如右下图。

Image title



插画设计

① 接下来可以做个简单的动效,常用的表情有:高兴、生气、得意、发呆等。这个表情有点困惑不解的感觉,我想到——“这个人在干啥呢?”


好,就从打招呼开始吧,加上个文字上去。


再想下表情要怎么动,困惑的时候可能会摇头,眨眼等;这个表情看起来有点呆呆的,可以做歪头的循环动作。
Image title


② 我是用ae做动态表情,新建一个500*500px的合成,跟ai的画板保持一致,帧数设置为12帧每秒,也可以设置的高一点,帧数多了可能导出文件就会大一点。时间设置成五秒(实际一个表情用到两秒左右就够了)。

Image title

③ 导入刚才画好的AI文件。导入选择合成-保留图层大小。

Image title


④ 先做整体歪头的动作。建立个空对象,命名为头,然后将头部的所有图层都链接到这个空对象。

Image title


⑤开始k帧,先做一个左右摇头的动作,先把空对象的中心点用中心点选择工具移动到脖子位置。

Image title


⑥ 打开旋转属性,快捷键是R,选中空对象在0帧的时候打个关键帧,移动3帧再打个关键帧,把rotation调整到-6。这个时候有个停顿,我这里的停顿的时间是9帧,所以在第12帧的时候打个关键帧,值为-6,在15帧的时候再打个关键帧把rotation调回0,再停顿9帧,在24帧的地方结束工作区,正好是总共是24帧一个循环,两秒。

Image title

Image title


做完是这样的

Image title



⑦ 接着做五官表情的动作,丰富一下表情。做个眨眼的动效,只要调整缩放的参数就可以了,快捷键是s,在3帧的时候打个关键帧,移动两帧把第二个值改成10%,再移动两帧恢复成100%,在眨眼的时候眼皮要跟着动,所以调整下眼皮图层位置属性,快捷键P,操作和之前一样,数值移动4个单位。做完后复制前面三个关键帧移动9帧后粘贴,逐个图层操作。

Image title

Image title

Image title


⑧ 再调整眉毛动作,主要有两个属性,旋转和位置,参数如下,凭着感觉调就可以,也不一定要都是整数,我是直接拖动的,方法和上面一样。

Image title

Image title

Image title


——

最终效果如下,ae上面用到的功能都很基础,主要是K帧,还有一细节调整没有写出来,但是思路和上面的是一样的。

Image title


















Jackywoo

15粉丝/4关注

如何从0到1制作个人网站
0
乐意李

不好意思,谢谢

精彩!

扫描二维码
去手机端查看海报

Jackywoo

TA已经获得0枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了