天天P图“前世青年照”H5设计的故事 – 韦德1946
小男
还记得之前风靡朋友圈的“前世青年照”吗?这组来自天天P图APP的独特创意素材,既不取自图库,也未委托供应商,而是内部设计师全权承包。下面我们来跟随天天P图的团队一起,来看看这组素材背后, 是如何用超小成本,达成超预期大制作的。
在上一个不同寻常的周末,复古青年写真霸屏了QQ空间、微信等社交平台,撩拨了每个年龄层对自己复古青年形象的想象。
活动上线28小时,参与人数就破亿,助力天天P图登上了App Store总榜第一。

这组来自天天P图APP的独特创意素材,既不取自图库,也未委托供应商,而是内部设计师全权承包。在这里,我们要来说一说这组素材背后, 用超小成本,达成超预期大制作的故事。

 

 

起点

在构思青年形象之初,我们问了周围的人一个问题,如果让你回到20年代,你希望自己是什么样子?

—“做林徽因那样有才华的大美女,学识渊博游历欧洲”

—“当然是上海滩头号大亨”

—“我希望能穿上那时候好看的旗袍,再做个手推波浪的发型”

这让我们看到青年节除了学生形象之外,有更多可以塑造的形象。为了让更多用户参与进来,我们定了三个要素:

  • 1. 多角色——让用户拥有更多不同个性;
  • 2. 男女通吃——不同以往以女性主题为主的变脸,这次希望平时不P图的男用户也能参与进来;
  • 3. 老少咸宜——选经典的角色扮相,既能满足上一辈人回忆,又能让年轻人乐于尝试。

 

服装造型设定

为了将复古造型拿捏得更准确,我们研究了大量二三十年代电视剧电影剧照,翻阅了很多老照片之后,总结了出了几套经典的服装风格。

  • 青年女学生——蓝色布衫 黑色布裙 玛丽珍鞋 麻花辫,有着传统、青涩的女性气质最具有民国青年特征。
  • 男长衫——长衫是根据明朝士大夫常穿的道袍遵循清朝服制改作的,主要把道袍的肥大改的相对窄瘦,大领改成小领。保留了对襟立领旗装的风格,是民国时期莘莘学子的标配。
  • 连衣裙——大户家庭的千金在那时会穿搭连衣裙、遮阳帽、小挎包,还有当时还很小众的露肩荷叶装饰上衣加中裙,穿衣风格可以说是非常洋派。
  • 西装——公子哥则大多喜欢穿西装三件套。
  • 旗袍——诞生于20年代的旗袍更是不可或缺,被誉为中国国粹和女性国服。为了节省经费,团队小伙伴更是拿出了自己压箱底的仿古旗袍。

于是就有了铁骨铮铮的爱国志士、向阳而生的莘莘学子、追求自由的新青年、婉约灵秀的上海名媛等造型。

 

老照片的风格研习

为了更好地还原老照片的风貌,我们还找到到了杨威所著的《留影的背后——老照片中的相关布景》。书中有大量珍贵的老照片以及对旧时照相馆的描述。

 

以前照相不如现在随意,照相的人都是执意希望将一个瞬间定格成一个完美的永恒,姿态保守而庄重。我们在拍摄前便列出了所需拍摄的老照片里的人物姿态。

 

鲁迅在他的杂文《论照相之类》(1924)中,描述早期照相馆拍照的场景,“人呢,或立或坐,或者手执书卷”。在很多老照片里,拍摄的女性一般执扇,男性拿线装书,通过使用书籍、道具来体现拍摄者所拥有的学识文化或生活风貌。所以除了着装之外,我们便额外准备了书籍、折扇等道具来完善细节。

 

仿旧的色调也做过多种尝试。二三十年代的老照片以黑白为主,因为历久所以泛黄,细节丢失严重。直接模仿(如风格四),用户的样貌会呈现得不够好看。而彩色照片(如风格三)则是到了八十年代才初兴,年代感不够厚重。所以在优化黑白风格的基础上,减少偏黄,增强了对比度,最终选择了风格二。

 

初试

我们先快速搭了简易的灯光进行尝试,以便快速确定风格。伦勃朗光的布光方式相比平直的光线,能更好地优化脸型,让五官更立体。但在实际“变脸”时,明显的光源倾向,会让用户的照片和模板难以融合。

考虑到这个问题,在实际拍摄时,设置了一盏人物正上方的主光,打出蝴蝶光,为了弱化阴影,在人物前方还补了一张反光板。同时为了稍增加五官立体感,主光稍侧,再从人物侧面补上一点光,来补上侧面的阴影。

实战

在会议室临时搭建影棚

相机连台机,实时查看效果,边拍边优化

模特的拍摄和动作指导

另外这次拍摄的8位模特中有5位是我们鹅厂员工,其中还有我们天天P图的设计师小姐姐和开发小哥哥。

 

后期素材调优

这次拍摄的模特本身的五官和脸型比例都非常好了,但要适合不同用户的五官和脸型,还需要进一步的调整。用户的一句“毫无违和感”也是活动转发的关键。

下图是五官矫正和肤色优化。

 

最后

小结一下,变脸素材拍摄的几个关键点:

1. 代入感:在细节上能让用户信服的穿越;

2. 受众面:尽可能的铺开受众范围,更能有众乐乐的氛围;

3. 无违和感:素材五官、脸型的融合要多测多调,以适应更多不同用户的脸部融合。

期待我们下一次能为大家带来更有趣的图片玩法

原文链接:腾讯ISUX

作者:小兽

 

转载请注明:韦德1946 » 天天P图“前世青年照”H5设计的故事

登录收藏

学UI就上韦德1946!越努力,越幸运!

“韦德1946www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
Xcube智能一键生成H5Xcube智能一键生成H5
这个儿童节,雪佛兰愿想象力永远与你“童”在!这个儿童节,雪佛兰愿想象力永远与你“童”在!
5.31国际无烟日:你是那个揭开真相的人吗?5.31国际无烟日:你是那个揭开真相的人吗?
保乐力加:好久不见的你,一起去藏在酒吧里的画廊喝一杯吧保乐力加:好久不见的你,一起去藏在酒吧里的画廊喝一杯吧
天猫国际外交社:打造专属于你的日本匠心签证![H5设计]天猫国际外交社:打造专属于你的日本匠心签证![H5设计]
《后厂村日常》来解读一只H5的诞生《后厂村日常》来解读一只H5的诞生
C&A 520大声秀 :衣颜不合就CP![H5设计]C&A 520大声秀 :衣颜不合就CP![H5设计]
知乎:平行世界的你,会活成什么样?[H5设计]知乎:平行世界的你,会活成什么样?[H5设计]
今年的520,淘票票奉上《小心心秘籍》[H5设计]今年的520,淘票票奉上《小心心秘籍》[H5设计]
猫眼 social 人,你的名片在哪里?[H5设计]猫眼 social 人,你的名片在哪里?[H5设计]