专栏首页腾讯社交用户体验设计剧情动效设计 | 天天P图迪士尼公主系列

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

腾讯ISUX

isux.tencent.com

社交用户体验设计

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

Part 01

项目背景

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

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

Part 02

剧情创意与元素设定

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

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

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

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

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

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

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

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

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

1.白雪公主剧情设定

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

坏皇后设计流程细节:

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

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

白雪公主设计流程细节:

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

2.艾莎剧情设定

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

设计流程细节:

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

3.贝儿剧情设定

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

设计流程细节:

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

Part 03

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

1.材质渲染

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

A. 可快速产出较复杂材质,如金属,玻璃等真实基础质感。

如下图的皇冠;以及最右边的雪花材质,由中心点实心收拢,向外变更透明折射率更高,让雪花充满细节的同时不会零碎。

B. 可通过不同的打光方式,快速调整和营造想要的素材氛围。如魔镜从下方打光营造一种阴森沉重感。

2.光影层次

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

3.立体动效

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

4.动画后期

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

Part 04

多维度多层次动效氛围

1.时间维度

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

2.质感搭配

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

3.3D粒子

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

4.多层音效动效

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

Part 05

成果展示

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

Part 06

项目心得

1.IP形象合作

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

2.资源整合优化心得

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

解决方案:

A. 压缩图片尺寸大小

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

B. 减少帧速率

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

C. 减少图片层级

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

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

3.设计技巧心得

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

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

Part 07

体验时刻

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


PS:ISUX 开通粉丝QQ群啦!

欢迎各大设计师加入和我们一起聊设计~

添加QQ群:764345161

或长按以下二维码

以下ISUX文章,你可能也感兴趣

AR,我们从设计说起

ABC狂奔曲 | 裂变游戏设计探索

沟通本源 | QQ8.0有生机的设计

2019-2020 设计趋势 · 用户体验篇

2019-2020 设计趋势·图形篇


感谢阅读,以上内容均由腾讯ISUX团队原创设计,以及腾讯ISUX版权所有,转载请注明出处,违者必究,谢谢您的合作。注明出处格式:

文章来自公众号:

腾讯ISUX 

 ( https://isux.tencent.com/articles/isux-pitu-motion-for-disney)

↓点击前往 ISUX 官网

本文分享自微信公众号 - 腾讯ISUX(tencent_isux)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 日访问百万级微信小程序优化技巧总结

    之前负责的锡慧在线小程序是一款公益性质在线教育类小程序,因疫情影响导致流量暴增,日访问过百万

    薛定喵君
    小程序微信缓存RedisCanvas
  • Spiral: 一个性能卓越的PHP/Golang混合开发框架

    春节期间,了解到一个“全新”的 WEB 开发框架:Spiral, 最开始引起我的兴趣是从同事那里听说了 RoadRunner. 然后去了解 RoadRunner 的时候看到了 Spiral. 之所以把“全新”用双引号引起来,是因为这个框架其实从 2013 年起就在它的开发团队以及一些企业客户中应用了,经历了各种实际应用场景的考验,Spiral 的功能及其丰富,性能与当前主流的 PHP 框架相比也相当出众。但这个框架源自俄国,在国内不算知名,他们团队开始重视和梳理开源,也应该是才开始的事情。

    小李刀刀
    PHPGoSymfony
  • kubernetes系列教程(二十)prometheus提供完备监控系统

    上一个章节中kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行介绍了在kubernetes中的监控架构,通过安装和使用metric-server提供kubernetes中的核心监控指标:提供node节点和pod容器CPU和内存的监控能力,核心监控指标提供的监控维度和指标相对有限,需要更好的扩展监控能力,需要使用自定义监控来实现,本文介绍prometheus提供更更加丰富的自定义监控能力。

    HappyLau谈云计算
    Kubernetes容器微服务云监控
  • 如何将设计思维应用到精益初创公司的软件开发

    我们所说的设计思维,是指由 IDEO 公司的 Tim Brown 提出,并且正在改变全世界组织的设计思维,简称 DT。(译者注:IDDO,当代最具影响力的设计公司之一)

    Aceyclee
    Serverless无服务器云函数
  • InnoDB 事务加锁分析

    一般大家对数据库事务的了解可能停留在事务的ACID特性以及事务4种不同的隔离级别层面上,而对于事务 4 种不同隔离级别如何实现了解相对较少。

    2020labs小助手
    MySQLSQL数据库MVCMVCC
  • FutureTask 核心源码解析

    研究源码,一般我们都从整体以及实例先入手,再研究细节,不至于一开始就“深陷其中而"当局者迷".

    JavaEdge
    HTTPJava
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过程。

    高树磊
    人脸识别图像处理
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐述。冷渗透介绍的是一个冷门的绕过思路和防御方案。这些积累,均来自于实战之中,希望有用。

    周俊辉
    HTTP网络安全安全网站
  • 程序员进阶必读,万字总结Mysql优化精华篇

    price decimal(8,2)有2位小数的定点数,定点数支持很大的数(甚至是超过int,bigint存储范围的数)

    程序员内点事
    全文检索缓存SQL数据库Python
  • 运维转型 | 运维人不再只是“救火英雄”

    各行各业都开启了数字化转型的进程,运维团队在这种时代的浪潮中又该何去何从?我在帮助一些企业落地了运维技术平台之后,开始反思这个问题,并将所思所想整理成本篇文章。

    嘉为科技
    企业运维自动化云计算

扫码关注云+社区

领取腾讯云代金券