• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 火爆全网的天天P图“前世青年照”是怎么设计出来的?

火爆全网的天天P图“前世青年照”是怎么设计出来的?

作者:腾讯ISUX 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含实战案例,摄影,经验分享,腾讯ISUX,设计流程等相关知识,腾讯ISUX希望在学习及工作中可以帮助到您

在上一个不同寻常的周末,复古青年写真霸屏了 QQ 空间、微信等社交平台,撩拨了每个年龄层对自己复古青年形象的想象。

活动上线28小时,参与人数就破亿,助力天天 P 图登上了 App Store 总榜第一。

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

一、起点

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

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

当然是上海滩头号大亨。

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

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

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

二、服装造型设定

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

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

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

三、老照片的风格研习

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

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

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

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

四、初试

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

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

五、实战

在会议室临时搭建影棚。

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

模特的拍摄和动作指导。

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

六、后期素材调优

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

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

最后

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

  • 代入感:在细节上能让用户信服的穿越;
  • 受众面:尽可能的铺开受众范围,更能有众乐乐的氛围;
  • 无违和感:素材五官、脸型的融合要多测多调,以适应更多不同用户的脸部融合。

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

图片素材来源:腾讯ISUX

「腾讯ISUX?实战案例」

  • 《高手怎么做设计?来看腾讯文档背后的品牌设计过程!》
  • 《上亿人使用的QQ iPad版「斗图神器」原来是这么设计出来的!》
  • 《揭秘完整过程!人气过亿的QQ主题是如何设计出来的?》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 腾讯实战案例!设计师如何从零开始做一款H5?
  • 高手实战!腾讯公益设计改版项目总结
  • 滴滴新推出的青桔单车,背后的设计过程是怎样的?
  • 上亿人使用的起点读书APP,背后的改版设计实录!
  • 如何高效完成表单输入?来看这个实战案例!
  • 设计冲刺法:5天搞定2018俄罗斯世界杯主题设计
  • 实战案例!网易考拉品牌升级全过程实录
  • 看似简单的喜马拉雅FM主播等级体系,是如何做改版设计的?
  • 实例解析!如何成为有交互和视觉思维的UI 设计师?
  • 网易实战案例:教你五步打造APP节日主题设计

相关文章

  • 2018-08-23复盘实战案例:引导用户开通唯品金融五部曲
  • 2018-08-23UI 新手福利!iOS系统图标栅格系统全方位解密
  • 2018-08-23人气好文!写给网页设计师的视觉设计基础手册
  • 2018-08-23从1.2亿次的点击中,苹果学到了这个提高用户体验的方法
  • 2018-08-23如何构建 Web 端设计规范之文本与选择器
  • 2018-08-23高手的平面课堂!聊聊图文叠加的四种常用技法
  • 2018-08-23为什么做版式设计你总是没有思路?
  • 2018-08-23关于形态创意,大师们都这么玩儿
  • 2018-08-23写给新手的APP结构指南:首页相关(下)
  • 2017-08-19Django静态文件部署

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 规范、方法、一致性,真有那么重要吗?
    • 超全面!原来电商设计中有这么多的合成玩法
    • Bootstrap3.0学习笔记之入门篇
    • 高手怎么做设计?来看腾讯文档背后的品牌设计过程!
    • 设计神器两连发!加载动效在线生成网站+最好用的免费图库推荐!
    • 这3种独特的趋势,能让网页设计增色不少
    • 为什么设计师需要理解产品业务?聊聊结构化思维的应用
    • 亚马逊语音交互设计规范(四):设计走查清单
    • 入门字体设计?先掌握这两个让你兴奋的知识点!
    • 明明想法和思路都对了,为什么最后效果却不尽人意呢?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有