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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
超详细总结 :贪吃龙表情的诞生全过程
0.0°
2018-09-14 原创文章 经验/观点 举报 2039 13 10 1

我画表情包的原因:自我提升 + 自我满足 + 万一会火呢

Image title


霸王龙,有个帅气的英文名:T-Rex。我画的这位是T-Rex家族的一只未成年小奶龙,霸气不足软萌有余。


严格来说,这篇文章主要是自我总结设计思路和制作方法,不算教程,但也会讲到一些制作动画和压缩gif的技巧。当然我的方法不是标准答案,只是方法之一,希望能给其他人带来一点参考。

Image title


所谓自我提升: 


作为一个设计师,多做练习没有坏处。我想通过这次画表情包可以更熟练的使用Ai,以及练习角色动作的绘制。画表情包,只是一个小目标。


所谓自我满足:


做自己喜欢的东西就是一种自我满足。在工作上不能随你喜好去做事情,但是在自己的世界里可以。所以我每隔一段时间就总想创造些什么。


万一会火呢:


可能画表情包都会有这样的想法吧。虽然对大多数原创者来说,表情包并不是条发家致富之路,但如果能火总归有些收获。其实看成功案例能总结出一些规律:色彩单一、线条简洁,萌,或贱萌。这样的表情包接受程度高,大概因为代入感强的关系。对比起来小恐龙不太有优势,但出于前面提到的两个原因,我还是打算画这样的小恐龙。

Image title


开始前的准备工作


在开始画表情包前,需要先了解微信表情规范。

表情数量:16或24个;尺寸:240*240;不建议含有的内容:医疗、美容、保健等。

这些都是开始前需要知道的信息,建议在微信表情开放平台仔细看下规范。



  / STEP 1 

 选择自己感兴趣的题材 


我原先一直没有找到特别想画的东西。直到最近侏罗纪世界2出来后,我看到去年在环球影城买的软萌小恐龙。既然那么喜欢它,为什么不给它画一套表情包呢?

Image title


兴趣驱动力很强大。因此也建议你们第一套表情包选择自己最喜欢、最想画的题材,女朋友也好,宠物也好,总之是能让你像打了鸡血一样画到深夜的东西。


画你喜欢的东西还有个好处,你很了解它,或者是有不错的参照物。


我手绘功底不咋的,趴着的姿势不会画,后来让小恐龙给摆了个姿势就明白了。这可是宝贵的第一手资料,和去网上搜一个别人画好的姿势照着画的体验是不一样的。

Image title


Image title



Image title

饿扁变瘦的样子和“饱“放在一起,对比明显



  / STEP 2 

 设定主角的性格和特征 


角色设定影响着主题和内容。比如我就想做一个贪吃小恐龙的形象,那么表情包大部分的内容就是围绕着吃。如此,目标用户也明确了:吃货,特别是爱吃肉的朋友。

同时因为这是一只霸王龙,手短是不可避免的家族基因,也是主要的萌点。

Image title

网络图片





  / STEP 3 

 不停的画 


大概想清楚了之后可以开始画草稿。多画草稿,才能找到最佳方案。

不太会画画的也不要怕动笔,你看我刚开始画的是这样子的。

Image title

灵魂画手之作


Image title

我的草稿风格比较狂躁,画多之后小恐龙才慢慢的成形。其他朋友还是建议草稿阶段尽可能画的精细些,方便下一步骤上电脑勾勒线条。



  / STEP 4 

 在电脑上成型 


我选择了:Ai画表情包,Ae做动画,Ps制作Gif。大家可以用顺手的软件,不过如果要用AE做动画,我强烈建议用Ai勾线。因为导入矢量图形方便做动画,并且图形工具比PS智能很多。

Image title


Ai我比较初级,画的方法比较野生,就不多说误导大家了。可以在各大设计网站上搜索“Ai教程”有针对性的学习。

勾好线后,可以导出png格式发到微信上看一看。我因此舍弃了一些过于复杂的细节。

Image title

  

可以看到草稿中我画的牙齿比较多,还有肚脐眼,我本来还打算把爪子画出来。但放到手机上看的时候,细节太多显得繁琐,不突出。


作为表情包,细节取舍很重要。更何况恐龙是蛋生不是胎生,并没有肚脐眼(???),因此舍弃了这个萌点。

Image title



 

/ STEP 5  

 用AE快速做动画 


以下内容阅读需要有AE基础。同样可以到各大网站搜索教程,或报班学习。我这里只讲思路、技巧,具体方法和参数需要自己去试一试。

*如果你不是用AE制作动画,可以跳过这一步阅读下一步中用PS压缩gif的技巧。


下面这个小龙的外轮廓的线条是通过添加AE自带路径效果“扭转”实现的。用这个方法的好处是可以快速看到效果,不需要去逐个调节线条节点。


Image title

Image title



我添加扭转效果的图层只是外轮廓的线条,里面的五官是配合动作进行的位移动画。

线条动画幅度并不大,但能让动作显得不那么呆板。


具体添加方法:展开轮廓图层的小三角,点击下图中标红的按钮。需要注意的是,这个图层必须是形状图层(名称前会有个五角星的符号)。如果你是从Ai导入,那么需要右键将图层转化为形状。

Image title


添加菜单里有很多路径效果可以添加。我常用的是“扭转”和“摆动变换”

Image title


有时候用扭转会使线条露出,这时我还用到效果菜单里的“网格变形”将线条拉回去。

至于摆动变换我最常用在文字动画上。可以看到下图中,每个字动的幅度都不一样。

Image title



其实他们全部位于同一个形状图层(文字图层可以右键转形状),再通过添加“摆动变换”,就能达到这种不同时运动的效果。

使文字上下移动只需展开摆动变换中的变换,在位置关键帧打点。(注意是摆动变换中的位置)

Image title


为了保证Gif能无缝循环,第一帧和最后一帧的参数最好一样。

再讲讲用表达式添加抖动效果的的方法。下面在跑步中加入晃动使动作更自然。

Image title


 

方法很简单,在“位置”、“缩放”属性添加表达式:wiggle(x,y)  

添加表达式的方法是:按alt点击下图中左边标红框的按钮。

Image title



参数仅供参考,根据实际调节



  / STEP 6  

 用PS压缩gif 


你是否碰到过导出的GIF过大或色彩失真的问题?其实用ps的话很好解决。


首先导出的视频帧数不要太高。贪吃龙用的是8帧/秒,长度一般在1秒内。


用ps打开视频文件,ctrl+shift+alt+S存储为web格式,格式设为gif。此时你可以观察优化后的图像右下角显示的大小是否达标(微信要求卡通表情在100kb以内)。

Image title


如果文件过大或色彩失真,你可以先选择256色。然后用左侧的吸管工具(快捷键 i )在左边图片上吸取主色。每吸一个颜色就锁上(下图中色板下方标红的按钮)。我在压缩小恐龙时,它的脸蛋周围出现锯齿,因此我就把粉色全锁上,情况就好很多。


Image title



锁完主要颜色后,再选择64色、32色时,失真的问题应该就解决了。


  / STEP7 

 发布事宜 


按照规范,还需要提交头图、缩略图等素材。具体要求自己去“微信表情开放平台”看哦。

提交后的审核时间是3-5个工作日,通过后会通知你去官网预约上架时间。

Image title


红框中的一句话我当时没有注意到。也就是说只要你愿意等足够多的时间,在新品推荐中,你的表情包会排的很前。所以,如果是和节日有关的表情包可以尽早提交哦。


有个有意思的细节是:提交审核后,我原先自己存在手机里看的小龙,也用不了了。

Image title



谢谢看到这里的朋友


由于我个人比较三分钟热度,许多时候做自己的东西都是做到一半就放弃了。所以这次我的策略是:无论如何都要先把贪吃龙做出来,细节打磨的问题留待下次练习。

像素眼的朋友可能会发现贪吃龙作画的一些问题。

没发现的朋友可以玩 "大家来找茬"...譬如说其中一只小龙多了指甲,另一只少了粉色脸蛋,你发现了吗?


另外,贪吃龙表情包及本公众号用的是免费字体“站酷快乐体”,非常感谢无私的字体制作者!


Image title

我的微信公众号:有意思笔记。欢迎扫码关注哦。

Image title




            

更新:2018-09-14

收藏

13人已收藏

  • 3

    作品

  • 5

    粉丝

  • 22

    关注

  • 双簧弹 | 子弹短信Bmoji设计
  • 论如何优雅结束聊天

    猜你喜欢

      2018-09-14 原创文章 经验/观点 举报 2039 13 10 1

      超详细总结 :贪吃龙表情的诞生全过程

      0.0°

      你确定要举报超详细总结 :贪吃龙表情的诞生全过程

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年07月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      13
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录