莫b

今天给大家分享的案例是关于直播送礼物的案例。这次的案例是由大家共同完成的,作者主要负责最后的结果,需要构想整体创意、把控视觉风格和执行,然后最后输出动画脚本给到外包公司制作动画。

这次分享的是一个直播礼物,主角是西行记里面的金龙:

图片

需求方希望能够酷炫一点,因为礼物是比较贵的。
整个过程有一下几点分享给大家。

 

1. 这次的模式有点不同

这次的执行不是由我一个人来做,首先这种龙我是画不出来的,其次这种礼物动效是比较大的动效制作,我也执行不了,但是我要为最后的结果负责,所以需要构想整体创意、把控视觉风格和执行,然后最后输出动画脚本给到外包公司制作动画。
这次整体的设计流程如下:

图片

其中龙的插画由团队插画师丹丹来执行,动画由外包公司执行。

 

2. 创意想法

因为龙比较复杂,如果动画也做比较复杂的,那是非常麻烦的,所以必须要想一个比较讨巧的方式。
经过讨论之后,想到一个比较好的形式,一共两个画面。
第一个画面:
从屏幕底部喷射一到光柱,龙从底下飞出来,大概效果如下:

图片

第二个画面:
龙出现在屏幕中间,浮动,然后周围各种金光,闪电的效果:

图片

确定了整个创意之后,开始构想视觉调性。

 

3. 视觉风格定位

当我看到西行记里面金龙,最害怕的就是输出效果变成:系兄弟来砍我:

图片

如果变成这样,那就有点微土了,所以希望龙能够稍微简化一点,整体画面颜色别太黄金。
最初插画师输出的画面效果如下:

图片

龙的效果还是不错的,但因为这个礼物比较贵,需求方又希望能够酷炫一点,所以需要重新再考虑下视觉调性。
金龙,再加一些酷炫的电光元素,场景设在白天可能不太合适,光啥的基本看不清,所以最后还是设定在夜景。
我们先看下最终的定帧输出效果:

图片

过程中感谢慢热的指导建议,接下来我们详细的来聊一聊。

 

4. 设计执行

执行过程基本分了三大部分:背景光柱、山体、修饰元素。
背景光柱:

图片

这一部分是整体氛围的基础,一共分了很多层,最开始的淡黄、到中间的黄色,再到最里面的黄橙色,范围越来越小,颜色越来越实。
除此之外,下面光源的地方再加点修饰元素,让整体更加饱满:

图片

 

山体:
山体是最耗时间的,除了山的大小、虚实外,还要考虑每个山体元素的立体感,我还在山上加了几颗树:

图片

让画面更加真实丰富一些。

 

修饰元素:
等这些画完之后,就差一点点缀的元素了,比如一些火苗、闪电之类的,火苗大家可以直接去设计网站下载一些素材,然后把图片变个图层模式就可以了:

图片

画面的执行大概就这么多了。

 

5. 动效

虽然动效的执行是外包来做,但我必须要把脚本描述清楚,当时大概给的脚本描述如下:
第一个部分:
光束冲出,龙的剪影上升飞过(龙剪影明天给到),这时候会有一些修饰物一起飞出,闪电之类的,不用太夸张暴力,稍加高级一些。
第二个部分
闪白后(或者有其他衔接方式也可以),龙悬浮在山的上面,并进行浮动,龙的浮动需要真实一些,尾巴、身体、胡须毛发,都需要动一动
此时火光浮现(飞舞的火花可以多一点,氛围感强),闪电闪烁。
中间调整了很多次,给大家展示一些最后效果吧,由于动图比较大,所以拆成3段展示:

整体效果还算ok。

 

总结

以前做东西经常一个人从头执行到最后,这次主要是体验了一下不同的合作模式,自己来把控时间、产出效果,最重要的是让不同人发挥不同价值,为一个小目标共同努力,感觉很棒!
继续加油!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
图片

转载请注明:学UI网 » 没想到第一次以这种模式完成需求,竟然献丑了!

登录收藏
 
你可能喜欢的:
S02E04: 体验创造价值,什么创造「体验的价值—— 阿里云设计中心年鉴S02E04: 体验创造价值,什么创造「体验的价值—— 阿里云设计中心年鉴
想抓住产品第一印象?看看这些引导页设计方法!想抓住产品第一印象?看看这些引导页设计方法!
S02E03: 数字构建世界,什么构建「数字的世界」—— 阿里云设计中心年鉴S02E03: 数字构建世界,什么构建「数字的世界」—— 阿里云设计中心年鉴
如何提升UI效果图空间感?如何提升UI效果图空间感?
设计定义专业,什么定义「设计的专业」—— 阿里云设计中心年鉴设计定义专业,什么定义「设计的专业」—— 阿里云设计中心年鉴
项目总结|临感VR中的「易撕线」项目总结|临感VR中的「易撕线」
尝试了N稿,微信选择了第一稿。尝试了N稿,微信选择了第一稿。
【作品合集】老虎帮课程总监-小龙老师作品《随》【作品合集】老虎帮课程总监-小龙老师作品《随》
底部导航动效设计的3大形式总结!底部导航动效设计的3大形式总结!
设计系统指南——搭建你的专属色彩系统设计系统指南——搭建你的专属色彩系统