以迪士尼公主系列为例:看剧情AR素材的创意与设计过程

不懂技术怎么做产品?15天在线学习,补齐产品经理必备技术知识,再也不被开发忽悠。了解一下>

近期“天天P图”合作迪士尼公主系列IP,推出“为自己加冕”的主题营销推广,从创意剧情出发,配合精致细腻的动画特效,搭建了效果华丽的自拍AR素材,受到众多用户的喜爱。本文将从剧情创意与动画设计等层面切入,与大家分享此次与迪士尼合作的案例。

一、项目背景

此次合作营销的主题为“为自己加冕”,侧重表达迪士尼智慧勇敢独立的现代精神公主。与以往纯粹重美颜、美妆、装饰表达的案例不同,我们尝试通过触发剧情与闪亮的变身特效,来突出呈现用户加冕为公主时的变身感与自信美。

从众多迪士尼公主中,我们挑选了中国观众最熟悉的5位公主角色,推出了3款以剧情为亮点,具有互动性,适合用户表演的自拍AR素材,及共4款侧重妆容与头戴小饰品的妆容自拍AR素材。

下文将主要讲述3款剧情AR素材的创意与设计过程~

剧情动效设计 | 天天P图迪士尼公主系列

二、剧情创意与元素设定

首先针对5个合作公主分别分析,挑选出相对适合剧情表达,能表现出公主美好品格,与新颖的相机素材特征的3个公主。

(1)艾莎公主:冰雪女王,拥有与生俱来的冰雪魔力。关键角色是妹妹安娜,雪宝。关键剧情是抛下使用魔力的恐惧,解放内心对的自我束缚释放自我,施展冰雪魔法,唱起《随他吧》。关键人物是妹妹安娜,挚友雪宝。

相机剧情创意点:让用户随着冰雪魔法特效与原版音乐氛围体验一次艾莎释放自我的美

(2)白雪公主:善良美丽,深受动物喜爱。关键剧情道具是魔镜与毒苹果。关键角色是坏皇后,七个小矮人与王子。

相机剧情创意点:通过魔镜道具,让坏皇后黑暗的画面镜头反转到白雪公主所在的场景,突出用户变身白雪公主的美好。

(3)贝儿公主:爱好看书,善解人意,能看到野兽善良的一面。关键剧情道具是魔法玫瑰。关键角色是野兽,茶杯母子,烛台,钟管家等。

相机剧情创意点:看书的用户无意中打开一本童话书,成为了打破玫瑰魔法的贝儿公主

最后选择白雪公主,艾莎和贝儿作为此次趣味剧情相机素材的主角。根据每个迪士尼公主独有的性格爱好,筛选角色最有记忆点的特征,定制相应剧情。

剧情动效设计 | 天天P图迪士尼公主系列

整体设定不止于让用户变美,更赋予用户个性化演绎空间。新增托举手势相机新能力,支持艾莎公主和贝儿公主的动作触发,动作结合更具角色代入感。

剧情动效设计 | 天天P图迪士尼公主系列

1. 白雪公主剧情设定

张嘴触发剧情反转——背景音乐坏皇后问魔镜“谁最美”,反转戴白雪公主头饰,变公主。

坏皇后设计流程细节:

根据收集到的皇后图片资料和坏皇后与魔镜的黑暗魔法属性,赋予皇后暗色系配色与带有魔法特征的质感表现。

在素材设计的过程中,先从基础元素起步,在保证素材精致感的同时,最大的还原原版迪士尼造型,后带入使用场景之中,考虑剧情走向,添加背景元素与魔法火焰细节,烘托黑暗魔法氛围。最后再随着剧情渐入高潮,魔镜显灵魔法四射,为后面反转白雪公主转变氛围的预备。

剧情动效设计 | 天天P图迪士尼公主系列

白雪公主设计流程细节:

白雪公主的配色非常明确,直接选取迪士尼提供的白雪公主视觉规范配色。快速手绘前景草图,利用3D建模渲染还原森林场景空间,后期优化光影,植物质感细节。动画前段考虑与魔镜的衔接过渡。

剧情动效设计 | 天天P图迪士尼公主系列

2. 艾莎剧情设定

手势触发——用户伸手,掀起魔法雪花吹到屏幕上,屏幕冻住,前景氛围飘雪,用户带上皇冠。

设计流程细节:

艾莎以动效为主视觉,前期需考虑好动效元素,静态稿只是动态效果的参考,后期动效再根据具体实现的效果灵活调整。

剧情动效设计 | 天天P图迪士尼公主系列

3. 贝儿剧情设定

手势触发——用户摊开手,出现一本书摊开法力四射,飞出玫瑰花瓣全景飘落。

设计流程细节:

贝儿素材在基础元素设计时,直接通过3D输出动画,再利用AE做特效后期补全魔法光效。在玫瑰花盛开的一瞬间,增添魔法爆破的粒子特效效果,为剧情高潮部分。

剧情动效设计 | 天天P图迪士尼公主系列

三、引入3D增强原画与动画视觉表现

1. 材质渲染

相比于传统2D手法的两种优势:

  1. 可快速产出较复杂材质,如金属,玻璃等真实基础质感。如下图的皇冠;以及最右边的雪花材质,由中心点实心收拢,向外变更透明折射率更高,让雪花充满细节的同时不会零碎。
  2. 可通过不同的打光方式,快速调整和营造想要的素材氛围。如魔镜从下方打光营造一种阴森沉重感。

剧情动效设计 | 天天P图迪士尼公主系列

2. 光影层次

初步获得配色体积层次后,运用PS增添细腻光感,阴影与质感细节,快速获得光影立体感的视觉效果。

剧情动效设计 | 天天P图迪士尼公主系列

3. 立体动效

3D方法快速输出复杂透视的动画,比传统2D手法更高效。

剧情动效设计 | 天天P图迪士尼公主系列

4. 动画后期

添加动态粒子,发光等动画特效,使元素层次更富的同时,更贴近迪士尼的梦幻视觉风格。

剧情动效设计 | 天天P图迪士尼公主系列

四、多维度多层次动效氛围

1. 时间维度

起步态,中间态,结束态不同时间维度的动效逻辑。(以艾莎手势魔法触发动画为例)

剧情动效设计 | 天天P图迪士尼公主系列

2. 质感搭配

固态,气态,光效,粒子不同质感动效氛围搭配。(以艾莎手势魔法触发动画为例)

剧情动效设计 | 天天P图迪士尼公主系列

3. 3D粒子

AE粒子画中,单个粒子使用3D渲染的视频粒子,使整体粒子动效更有空间感和精致感。

剧情动效设计 | 天天P图迪士尼公主系列

4. 多层音效动效

配音根据动画分为3个阶段,触发前,触发过渡阶段,以及触发后。前后场景选取对应的动画电影原声,并配合相应特效质感的音效,触发用户听觉记忆,提高场景代入感。

剧情动效设计 | 天天P图迪士尼公主系列

五、成果展示

此次合作艾莎公主剧情版与白雪公主剧情版自上线之后使用量稳定TOP3,保存率同类型最高。截止6月25日下午,微博热门话题#迪士尼公主魔法妆#,话题阅读数达到了1323万,讨论数8千多。

项目心得

1. IP形象合作

在保证素材创意、质量,考虑用户喜好的同时,更要充分调查了解合作IP的形象背景,提前收集一些对方历史合作项目中的线上设计作品;保证IP形象的完整展示,准确还原IP形象标志性特征点,在此基础上再对设计进行深入优化。

2. 资源整合优化心得

剧情类相机AR素材,通常会因为需要特定的相机触发能力以及较长的序列帧时长,会占用更多的相机资源。为了保证用户在使用过程中体验流畅效果好,后期合理优化输出资源非常重要,这也考验到设计师对技术的理解与问题解决能力。

解决方案:

(1)压缩图片尺寸大小

日常输出中常见,如将长为1024px尺寸等比压缩到长为512px。

(2)减少帧速率

如2秒动画共60帧(帧速率30),减少到24帧(帧速率12)动画时长不变,整体序列帧图片数减少,包变小。

(3)减少图片层级

如减少叠加模式,多层次效果的素材可能会用到add,screen等等叠加模式,尽量只使用1~2种叠加模式。并尽量多的合并图层输出,使整体序列帧数量减少,相机渲染速度更快。

目前的压缩方法会使得图片精度减少很多,但是P图这边在魔法抠图模块和趣动视频模块已经使用了新的视频压缩方式,使得长视频相机素材也可以在保留高精度的同时,保持稳定的相机性能与较小的文件大小。后期我们P图团队也将继续推动技术来进行相机模块资源的优化与压缩。

3. 设计技巧心得

此次迪士尼系列趣味剧情素材,是第一次尝试大量使用3D的方法,结合后期,实现2D素材展示的一次尝试,也取得了理想的效果和数据结果。

随着3D的普及,技术的提升,3D能力已经成为设计师的延展视觉发挥空间的重要技能。我们在尝试用不同的视觉呈现方式为用户带来视觉上的新鲜感的同时,也是一个不断挑战自我,推动专业成长的机会。

 

作者:阿文,公众号:腾讯ISUX(ID:tencent_isux)

来源:https://mp.weixin.qq.com/s/sr6obaqQreyNfiEeLWUE3w

题图来自Unsplash,基于CC0协议

评论
欢迎留言讨论~!