恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
打造属于你自己的微信表情
0.0°
2016-10-07 原创文章 教程 举报 31233 516 554 44

关于微信表情制作的一些经验分享

Image title

Image title



       在微信里,每个人都离不开表情,似乎表情已经离不开我们的生活。最初接触的表情应该是QQ中的emoji表情了,表情不仅能形象生动的表达在聊天坏境中难以言喻的情绪表达,也能缓解文字聊天过程中出现的“词穷”的尴尬。当然,现在的表情也随着互联网的发展,尺度也越来越“污了”。- =(当然我觉得今后也是表情设计的一种趋势和方向,内心的小婊砸已经开始翻腾。)

Image title

        在做第一套表情的时候,我查了很多网上资料,并没有找到关于表情制作的相关教程。对于一个没有动画经验的设计师来说,做一个gif表情(当然微信表情也支持静态表情)真的让我费劲了心思,走了不少弯路。慢慢的,自己也摸索出一套做表情的小方法和技巧,在这里供大家参考和交流。


    

设计工具的选择



那言归正传,工欲善其事,必先利其器。起初,我试过AE和FLASH(半桶水),遇到了各种问题(绘制、导入、图层、动效、文件大小等等),最终由于学艺不精而放弃。

以下2个软件对于设计师来说肯定不陌生, AI是我最喜欢的设计工具。前者用来绘制表情形象,后者用来合成动效gif。


Image title



绘制形象




我这里以我家的小豹仔为例,绘制形象的过程在这里就不多说啦,我用到的方法很简单,都是用基本的几何形状拼接而成。之前也出过我绘制插画的小方法http://www.ui.cn/detail/95287.html。



Image title


逐帧动画


逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。

那么问题来了,我们需要绘制不同的帧画面,而且是连续的。AI的优势在于多画板而且绘制的图形是矢量的图层也是分开的,这也是最终选择 AI的原因。多画板能确保你绘制的图形是连续的。巧用ctrl+c,ctrl+f能确保一个画板的元素完好的复制到另一个画板。画板大小为240*240(这是微信表情规定的制作尺寸)


Image title


对于我们这种非专业动画设计师来说,需要对简单的动画知识稍微做一些功课。比如关节的运动,身体的运动等。当然,一些简单的动画也会有很好的效果。

通过旋转,缩放,移动等改变关键部位的状态(多图层,直接选择图层多好处)。同时 AI的妙处在于使用直接选择工具,移动物体形状的锚点,从而改变位移和形状而达到过度帧的效果。


Image title



同样的方法绘制下一个画板,从而不断的增加动作连续的过渡帧。



Image title



这样连续的关键帧就制作好了。但是gif一般是连续循环的。第一帧和最后一针过渡也非常重要。我通常把帧数控制在4、8左右,这里用数字表示下规律为:1、2、3、2和1、2、3、4、5、4、3、2,这样首尾就连续起来了。当然特殊情况也可以定义其他数量的帧,原则是一样的。


Image title


这解决了连贯性和重复绘制出现的误差。接着用同样的方法,可以改变其他部位的形状和位移,如下:



Image title

接着就是导出了序列帧,ai的导出功能非常方便,文件>导出png(勾选画板,全部)  就可以了:而且给你序列的顺序都命名好了,是不是很赞~~

Image title

接着就该PS登场了,新建画布240*240px,分辨率72。把上面4个序列帧文件直接拖入ps就好,然后窗口>时间轴,打开时间轴,创建时间轴,然后转换为帧动画,由于微信表情规范需添加2像素的白色外描边,需先给图片添加描边效果。


Image title

新建帧,第一帧对应的是豹仔-01.png,以此类推。每帧对应显示相应的图片。按空格预览,不断的调整参数(这里就不多说明了)。


Image title


最后,文件 >导出》储存为web所用格式,选择导出文件为gif,循环次数设置为永远。一个简单的表情效果制作完成,预览如下:


Image title

教程做了一个很简单的例子,适合新手或第一次想尝试制作表情的设计师们。我想,设计原理都是一样的,更复杂的表情需要设计师自己的开动自己的脑瓜。《豹仔啦啦》表情包就是基于这个思路制作完成的,已在微信表情商店上架,喜欢的可以去看看~~


Image title





Image title

Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title


Image title




对于如何做好一个表情,什么表情会成为爆款呢?微信官网推出的一个文章《如何做一套好的表情》http://software.it168.com/a2015/1029/1772/000001772876.shtml 我觉得写的非常棒,对于表情设计的思路和原则做出了一些总结,推荐大家去好好看下。

也欢迎大家一起讨论和交流表情制作的技巧,互相学习,一起成长。






Image title







更新:2016-10-07

收藏

516人已收藏

老狼老狼老狼

兵马未动,设计先行。

  • 26

    作品

  • 1619

    粉丝

  • 55

    关注

  • 劈叉鸭又来啦
  • 劈叉鸭来啦
  • 一只爱劈叉的鸭子
  • 狗了个汪

    猜你喜欢

      2016-10-07 原创文章 教程 举报 31233 516 554 44

      打造属于你自己的微信表情

      0.0°

      你确定要举报打造属于你自己的微信表情

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年09月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      554
      516
      44

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录