年前养蛙的游戏风靡一时,很喜欢那个画风,刚好组里要做一个h5蹭热点,分享一下制作过程,给需要的小伙伴。
1.思考
1)需求
其实蛙游戏的界面和层级关系都非常简单。抛去院子里的场景h5里不用,主界面其实很简单,四角几个icon,一个形象,一个房间内部背景图,几个弹窗完事。
2)风格
因为这次有特定明确的目标要求还算比较简单,但一个小经验分享下,制作前一定要和负责人敲定风格,甚至你可以多给他看几种可能符合他需求的作品,双方都明确了在开工,不然很容易出现改改改的情况。
3)时间
一个追热点的h5周期本身就短,融合过年回家的话题,一个字要快。
2.制作
1)背景线稿
仿照原来的房间格局,设计还原一个城市人类居住的温馨房间。
线稿真需要耐心,期间如果什么元素实在想不出来可以找找图,例如扶梯绿植;另外需要活动的元素记得分层,例如人物行李和桌上杂物。
(左图为参考拓印房间布局的线稿,右图为新建层添加元素后完成的效果)
2)背景上色
根据风格需求,上色没有体面/肌理效果,注意整体搭配温馨,加一些细节花纹效果就好了。精进一下,在窗外/猫的旁边/人物的手部分层加入对应场景的两帧的动效。
(左图为平铺颜色后效果,右图为添加花纹和人物颜色效果)
3)制作icon
4)制作弹窗
3.总结
没写过经验分享大家多多包含,这次制作过程中其中遇到的种种问题和解决方法,我在下边叨叨一下。
1)总会有意想不到的问题出现,你要做的是努力去解决它。其实这次本身的目标是做是一个小程序,希望大家玩起来,但到上传审核后才被小程序后台打回来,理由是被划定成游戏,不符合小程序范畴,才改成h5,最终没有辜负大家的劳动成果。
2)作为一个德智体美劳全面发展的设计,除了ps的功夫,可以多方面积累自己的能力用在工作中。例如学习用户体验,对于链接的跳转或者某处的点击反馈能有自己的思考,提出有价值的建议;学习动效设计,增加作品的细节亮点;了解技术知识,实现原理,和产品/前端良好沟通。
3)合理配合,尽量效率的达到目标。设计/技术/编辑/产品同时开工,小组内积极沟通进度,一边自己制作一边和同事配合组装拼接出成品。
上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。