腾讯联合迪士尼设计了3款千万热度的AR素材,为你揭秘创作全过程! - 优设网 - UISDC

腾讯联合迪士尼设计了3款千万热度的AR素材,为你揭秘创作全过程!

2019/07/12 6666评论区

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

项目背景

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

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

剧情创意与元素设定

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

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

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

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

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

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

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

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

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

1. 白雪公主剧情设定

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

坏皇后设计流程细节

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

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

白雪公主设计流程细节

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

2. 艾莎剧情设定

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

设计流程细节

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

3. 贝儿剧情设定

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

设计流程细节

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

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

1. 材质渲染

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

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

2. 光影层次

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

3. 立体动效

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

4. 动画后期

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

多维度多层次动效氛围

1. 时间维度

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

2. 质感搭配

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

3. 3D粒子

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

4. 多层音效

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

成果展示

点击查看视频

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

项目心得

1. IP形象合作

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

2. 资源整合优化心得

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

解决方案:

  • 压缩图片尺寸大小,日常输出中常见,如将长为 1024px 尺寸等比压缩到长为 512px。
  • 减少帧速率,如 2 秒动画共 60 帧(帧速率30),减少到 24 帧(帧速率12)动画时长不变,整体序列帧图片数减少,包变小。
  • 减少图片层级,如减少叠加模式,多层次效果的素材可能会用到 add,screen 等等叠加模式,尽量只使用 1-2 种叠加模式。并尽量多的合并图层输出,使整体序列帧数量减少,相机渲染速度更快。

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

3. 设计技巧心得

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

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

体验时刻

天天P图与迪士尼的合作,此次除了 3 款剧情 AR 素材,同时也一并推出了 4 款妆容结合精致边框的公主系列妆容素材、3 款梦幻城堡为主题的海报相框素材,以及丰富的公主系列套装贴纸,欢迎大家下载体验。

欢迎关注「腾讯ISUX」的公众号:

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/tencent-isux-ar-design-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里