腾讯给20年前的QQ经典头像做了一波像素化设计,新版太帅了! - 优设网 - UISDC

腾讯给20年前的QQ经典头像做了一波像素化设计,新版太帅了!

2019/08/04 10220评论 6

复古是一场与时空美丽的邂逅,跨越时间依旧经典,用复古致敬经典、在经典中绽放新意,与我们一起期待未来 20 年华丽的变化。

概述-提炼经典

QQ 陪伴我们已经走过了 20 年,随着时代的变化,有哪些是能令我们至今都记忆深刻的呢?

不同时间的 QQ 推出不同的头像给用户使用。然而这么多年过去,QQ 最开始推出的经典系统头像一直让大家记忆犹新。伴随着 QQ 头像出现的,不仅仅是一个用户,更是他带给用户的热烈心情,他印刻了我们初识互联网的心动瞬间。「轻舞飞扬」,「缘分天空」,「追风少年」,头像闪动轻轻问候「在吗?」瞬间感觉回到了当初的时光。当年这些或许不够「精致」的 QQ 头像,以极高的辨识度,承包了互联网人的青春记忆,给我们留下了荷尔蒙气息。经典之所以成为经典,是因为经过时间的沉淀,依然能引发大众的喜爱。我们怀念的不只是一个简单的头像,更是附着其上的自己。

QQ 20 周年之际,我们整合了 105 个早期经典系统头像,在保持经典造型的同时,进行了设计上的像素复古风重塑。

风格选定-复古与时尚的最佳平衡

还原经典,不仅是一个简单的复制,需要在经典的基础上加以提炼,重塑,进而产生新的视觉,将「复古」赋予新的意义。在复古和时尚中做一个完美的平衡,像素似乎是完美的选择,但对于选择像素风格来重塑 105 个经典头像,确实是需要很大的勇气,除了像素风格更耗费精力之外,不能像矢量图形一样可以随意扩展也是最大的痛处,面对后续各个规范涉及到的拉伸和缩放,必须要找到一个完美的解决方案。

1. 像素表情等比缩放的方法

对于不同尺寸的头像、主题以及 H5,需要设定一个像素点大小的规范,设计尝试了不同大小的头像效果,5px 既有细节也能保证在移动端小屏幕上的像素感。

以下是 8px 和 5px 的尝试:

5px 在 1080px 的尺寸上呈现出最理想的效果,既保留了像素质感的同时,塑造出光影较为细致的图形。

视觉呈现-优化及重塑

史上最全,105 个官方 QQ 经典复古头像:

我们在进行设计的前期,找到了「最早期版本」和「复刻版」的头像,经分析我们决定在二者之间进行视觉平衡,在保持经典造型的同时,进行了设计上的像素复古风重塑。

在设计优化细节上,我们统一头像光源,将光源设置为顶光和左右两侧光,同时调整了光影和色彩明度,使头像造型视觉更加饱满。每一款头像主色调控制在同色系的三个颜色以内。统一采用像素描边,描边颜色规定为黑色或同系列色系的深色。同时根据头像性格,给每一款头像搭配专属的背景颜色,使其更加独特靓丽。

以上的视觉调整和大胆的尝试,结合「复古更好玩」的主题,让头像全新展现在用户面前。

是不是觉得按照 5px 像素结合两个老版本,头像就可以愉快地点起了?不!光鲜的屏幕前,背后都是血与泪的黑历史,每个头像都经历很多个版本后才能达到满意的效果。

1. 背景色提取和搭配

2. 头像动态化

只是静态的重塑,感觉还是停留在表面的变化,这次我们希望挖掘每个头像背后的故事,揣摩头像的人设去设定对应的动态,相信每一位用户应该都想知道他曾经使用过或一直在用的头像动起来会是什么样。本次头像复古重塑,我们让 105 个头像动了起来。

3. 穿越年代经典复古像素主题

将复古进行到底,我们将那曾经出现在 1999 年电脑屏幕上的 QQ 第一代版本的界面,搬到现在的手机当中。

通过提炼色彩,概括图形界面,加上三只精灵鹅,让复古不古板,可爱又好玩。

△ 喜欢这套主题皮肤的同学可前往 QQ 个性装扮下载哦

深入延展-赋予故事和内容

每个系统头像都有名字,头像的后面是一群有着特定性格喜好的人群。不同类型的人喜欢不一样的头像,同一个人在不同阶段也会换不一样的头像。据说,喜欢搞怪头像的人比较开朗活泼,天真快乐;喜欢动物头像的人比较有爱心,懂得关心人;喜欢人物头像的人,自我意识比较强。头像某种程度上也是一种对自我形象的认同感。

20 年来 QQ 陪伴大家成长,那个当年使用 QQ 经典头像的用户,也经历了人生的酸甜苦辣,在时光中历练成长,其中不乏一些有趣好玩的灵魂,他们或是勇敢,或是善良,或是充满力量。设计师针对部分的头像进行了头像的延伸设计,并为他们首次把经典头像结合现代潮流服装,让复古更好玩更潮,WE ALL HAVE UNIQUE SOUL。

QQ 经典头像竟然变身潮人:

人物像素绘制流程一般就四步骤:

  • 前期需要根据各个不同的头像进行思考与策划,结合现代服饰等元素突出人物性格;
  • 挑选一张头像,使用 PS 铅笔工具(此工具比较接近像素质感)根据头像绘制全身草图;
  • 根据草图开始点像素边;
  • 填色块,加光影,通过光影处理的不同表现出不同的材质。

以下是使用像素做出顺滑的弧度的基础规律:一般都是像素数量递增递减就能得到很好的处理。

若遇见非典型的弧度曲线,可能以上的处理方式无法满足你,你需要试试以下的方式去处理,方法也很简单,在递增递减的规律基础上加多一条公式:221212…..212122,基本上只要按这样的方式去处理像素曲线,就会轻松很多。

你们曾经用过的 QQ 经典头像,竟然动起来了,被戏精附体的经典头像怕是要玩翻宇宙。先来个视频感受一下:

点击查看视频

用上这个宝藏表情包,你就是群聊最A最潮最能聊的仔,赶紧 get 起来。

1. 男神(经)篇

△ 讨厌 – 君子动口不动手,唾沫星子来助攻

△ 厉害 – 厉害了老铁,给你双击666!

△ 嗨起来 – 睡神马睡,起来嗨啊!

△ 哈哈 – 小三毛戴上了墨镜,就素那么开熏

△ 安静 – 请大家安静一下,我要开始耍帅了

2. 真女神篇

△  嗨 – 嗨,帅哥加个扣扣吗?

△ 好的 – 完全ok,no趴笨

△ 么么哒 – 烈焰红唇你抵挡得住吗?

△  可爱 – 啾咪~你的小可爱已上线哦

3. 疯狂动物篇

△ 调皮 – 我的热情就像我喷的火~

△ 崩溃 – 鸭的世界,连崩溃都那么……

△ 惊呆 – 吓得我黑眼圈都掉了

△ 生气 – 老虎不发威别当我是病猫

△ 无语 – 没啥好说,一串鱼泡泡送给你

△ 开心 – 普通的disco兔子普通地摇

△ 再见 – 今儿就说这么多啦,各位再见哦~

结语-致敬经典

复古是一场与时空美丽的邂逅,跨越时间依旧经典,用复古致敬经典、在经典中绽放新意,与我们一起期待未来 20 年华丽的变化。

1. 如何下载这套表情

2. 如何获取高清头像

公众号后台回复下方头像对应序号,如「001」即可获取。

3. QQ经典头像小程序

此外,QQ 经典头像小程序也于近日上线,汇集复古头像变脸,复古头像连连看等好玩小游戏,欢迎大家扫码体验。

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

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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