赞助商
立即赞助

超详细的动态表情包新手绘制指南

手绘3年前 (2021)发布 流光
5.5K 0 0

今年本命年想做个表情包,但是之前没有做,在网上搜索教程时,没有找到很有用的。所以我大部分是看很喜欢的表情包,录屏逐帧来分析的。

在表情做完后,想要做个记录结,分享样想做表情新手朋友。

我是AI画原画,AE制作画,最后PS导gif。

透底的图用AE导出,记得在「输出模块」置中选「视频输出:通道 → RGB+Alpha」这才能保存不透度。

一. 确定表情包内容

表情商上架的「表情专辑」种:16个表情,24个表情。

常见的表包类型分以下几种:

超详细的动态表情包新手绘制指南

第一次制作,我选择了16表的表专辑。这样既不会因表太多拖延,也可以很好的练习卡通形象的风格把控动作设。

将要做的表情一一罗列出来,针对每一个表情设定具的时间节点。拆分工量。

这样短时「设计 → 制作 → 看到成」有利于我们完成长期计划,避免拖延和懒惰。

二. 卡通形象设计

微信商店专辑表情设计尺寸为:240 x 240 px ,要<100KB。

图片大小:由图片色彩数量,色彩面积,图形复杂程和图形尺寸决定。

计表情包的卡通形象描线越复杂,色彩越多,面积越大的占用空间就越大。

gif时动作设的帧数就越少,可能造动画不流畅的卡顿感。

所以卡通形象设计简洁,有期的动设计。

过于精细物设计会使生距离感,严肃正感觉,而不能随意发送使用,反倒有适其反效。

超详细的动态表情包新手绘制指南

超详细的动态表情包新手绘制指南

上白二九的形象设计就比《百变乖巧》复一,期设计动时确有一头疼的地方。

三. 动作设计

表情包在我们常聊天使用中就是为直白简单表明我们的情绪和态度的。即时聊天的属和大小的,使他身不适合做太复的动画效果。

大多数表情都是逐帧动画做法,即将帧画出来,后连续播放来制作动态效。

一般一个表情做1~2个作即可,一个作3~4张图。再多则容易大小超限制。

表情包的计中,一些表情效果会比较好。例如,动物类的抖耳朵,摇尾巴,点头,眨眼睛等。

例如二被风吹的抖耳朵的图:

超详细的动态表情包新手绘制指南

如图所示,抖耳朵不需太的幅度差别,三耳朵状态叠右侧,差异并不,就已明显的效果了。所以设动作时,多注意动作变化幅度问题,避免卡顿感。

人眼识别连贯的动是1s,近25帧。

此动作变化张图顿时3帧即可,少于3帧容易捕捉不到这个状态,多于3帧有时会有缓慢卡顿感。

定格停顿的画面可根据容而定,一般5~10帧都可。

如二九这略复杂的形象,一个表情做15帧左右是保险的方案。也有殊的可以达30~50帧的情况,这种在动作中会有大量帧数的图形所占面积,且颜色布简。

例如狗吉这表:

超详细的动态表情包新手绘制指南

了避免我们完所表,后导出gif时,发超出限制太多这种悲剧,尽还采用保守的方案。或者多试终导出gif的小,尽早调整。

我在做每个原画绘的时是用AI绘的矢量图,样的处是方便图像做面的延展设计。例表情页面的横幅banner等,但是坏处是不动的地方感有死板。

为了改善这状态,我们可以让主体形象或者眉毛等细节做些细微抖动。

例如上或左右,抖幅需要太大,0.5~1px即可。

超详细的动态表情包新手绘制指南

在极帧数,做到较连贯的微小作,作幅很小,一般变2px左右即可,如「嚼东西的嘴巴」、「会的眼睛,眉毛」等变形。

若想有显的变化效果则4px也足够了。

超详细的动态表情包新手绘制指南

如果整体不变,只有某一部需要多次变化,例如吐舌头,可以将图形切,用AE中旋转的功能使舌头摆动,减工作量。

超详细的动态表情包新手绘制指南

此类似,还有四肢的摆动,眼珠转动等。

四. 常见问题

在将表情都做完后,最后一步导出gif图,最容易出问题的有以下三个方面。

1. 大超过100KB了

前面也一直在调这个,因为在做的过程中有三四个都出现了这个问题,非常头疼。

除了之提到的几原因,还一杀伤力非常的元凶就「文字」。

虽不推荐表情上有很描述非常具,使用场比狭窄的文字。但是在许情况下,有添加文字的必要。比,常问中的:谢谢,撕比吵架的表情包等等,文字出场很。

为文笔画多,复杂度高。所以很多图形较复杂gif添加文后容易大小限。

超详细的动态表情包新手绘制指南

有是在纯色背景上加文,可以参照上文「狗年大」表情。是这个适用范围相狭窄了,确实比透明底上加文,gif会小很多。

2. 没有表情加2px白色描边

微信表情制作规范要求,图像都要有2px白色描边。

超详细的动态表情包新手绘制指南

这个大家可以在做完所有动画,即将要从PS导出为gif时,将所有图层统编组,在「图层混合模」增加2px白色描边即可,简单便,搞定,而绝不会有漏掉情况。

3. 表情背景不透明

是可以不透明,要你背景不是满满240×240 px大小。换言,你背景也需要有2px白色描边。

这次的记录到这里就结了,第一次制作还有许多足,希望可和大多多交流。希望想要制作表情包的同看这篇可有一点收获。

最后,如果对二九兴趣,欢迎扫描下面的二维码下载,或表情商搜索《狗二九》即可。

超详细的动态表情包新手绘制指南

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

王M争:用户在使用产品过程中,难免会犯错。一个好的产品可以降低用户犯错的概率,并且提升错误被解决的效率。通俗点说就是帮...
容错性
很多人误解 UI设计师做的只是画图标和「填色」,也有一些刚入行 UI 的朋友,拿着原型图就开始做设计稿。其实 UI设计师也叫做...
App设计
王M争:苏宁金融是国内 O2O 金融的先行者,自己从事的也是互联网金融行业。为了进一步提升自己的产品思维,我就尝试着把 app ...
App分析
编者按:文章总结了想要提高审美和设计感,设计师必须要了解的美术基础。 一、美术的重要性 任何类别的设计师都需要有一定的...
历史
一直以来,Airbnb 爱彼迎都将用户的声音和诉求放在首要位置。因此,代表用户声音的用户研究团队在 Airbnb 爱彼迎是不可或缺的...
Airbnb
三木自习室:今天这篇译文是关于 MVP 产品和 MAP 产品的,在读到这篇文章之前,我确实只知道互联网产品有 MVP 产品这么一说,...
产品设计
这次呈上 Beforweb 合作作者 SL 的译文,《The Design Fidelity Conundrum》,原文来自 IBM 的设计师,探讨如何选择设计产出...
原型图
作为设计师,你是否遇到过这些问题:一直都在做产品的体验优化设计,但怎么知道是否真的有所改进?有 A、B 两种设计方案,要...
入门