专栏首页静DesignQQ20周年 | 玩转像素复古 | 附设计思考过程

QQ20周年 | 玩转像素复古 | 附设计思考过程

即将开课 目前接受插班学习 速抢

01概述

提炼经典

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

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

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

02风格选定

复古与时尚的最佳平衡

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

像素表情等比缩放的方法:

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

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

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

03视觉呈现

优化及重塑

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

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

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

是不是觉得按照5px像素,然后拿着19年的血肉模糊经典头像,头像就可以愉快地点起了吗?不!光鲜的屏幕前,背后都是血与泪的黑历史,每个头像都经历过很多个版本后才能达到满意的效果。

背景色提取和搭配

头像动态化

相信每一位用户应该都想知道他曾经使用过或一直在用的头像动起来会是什么样。本次头像复古重塑,我们还将所有105个头像动了起来。

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

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

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

04深入延展

赋予故事和内容

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

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

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

1.前期需要根据各不同的头像进行思考与策划,结合现代服饰等元素突出人物性格。

2.挑选一张头像,使用PS铅笔工具(此工具比较接近像素质感)根据头像绘制全身草图。

3.根据草图开始点像素边。

4.填色块,加光影,通过光影处理的不同表现出不同的材质。

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

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

你们曾经用过的QQ经典头像,竟然动起来了!

被戏精附体的经典头像怕是要玩翻宇宙昂!

先来个视频感受一下

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

经典的头像配上魔性的动作,发出来的一刻,备感牛(sha)逼(diao)

- 讨厌 -

君子动口不动手,唾沫星子来助攻

- 厉害 -

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

- 嗨起来 -

睡神马睡,起来嗨啊!

- 哈哈 -

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

- 安静 -

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

- 嗨 -

嗨,帅哥加个扣扣吗?

- 好的 -

完全ok,no趴笨

- 么么哒 -

烈焰红唇你抵挡得住吗?

- 可爱 -

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

- 调皮 -

我的热情就像我喷的火~

- 崩溃 -

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

- 惊呆 -

吓得我黑眼圈都掉了

- 生气 -

老虎不发威别当我是病猫

- 无语 -

没啥好说,一串鱼泡泡送给你

- 开心 -

普通的disco兔子普通地摇

- 再见 -

05结语

致敬经典

“一切过往的东西都会是一个新的开始”,复古是一场与时空美丽的邂逅,跨越时间,依旧经典。

用复古致敬经典,在经典中绽放新意,与我们一起期待未来20年华丽的变化。

本文分享自微信公众号 - 静Design(JingDesign91)

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

原始发表时间:2019-08-01

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

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 「网安夜校」开课啦!多门网络安全课程开启限时优惠报名

    众志成城,共抗疫情。腾讯安全联合腾讯云大学、腾讯课堂启动「网安夜校」,为大家提供限时优惠的网络安全课程。欢迎网络安全从业者和信息安全专业学生报名参加学习,快速充电提升自我。

    腾讯安全
    安全培训腾讯云大学
  • Flink源码走读(一):Flink工程目录

    导语 | Flink已经成为未来流计算趋势,目前在很多大厂已经有了大规模的使用。最近在学习Flink源码,就想把自己学习的过程分享出来,希望能帮助到志同道合的朋友。开始阅读源码,说明读者已经对flink的基本概念有一些了解,这里就不再重复介绍Flink了。本文作为学习过程的第一章,首先对Flink的工程目录做一个解读,了解了工程下各个模块的作用,才能在遇到问题时准确定位到代码,进一步学习。

    2011aad
    大数据解决方案
  • Flink源码走读(二):Flink+Kafka实现端到端Exactly Once语义

    Flink通过Checkpoint机制实现了消息对状态影响的Exactly Once语义,即每条消息只会影响Flink内部状态有且只有一次。但无法保证输出到Sink中的数据不重复。以图一所示为例,Flink APP收到Source中的A消息,将其转化为B消息输出到Sink,APP在处理完A1后做了一次Checkpoint,假设APP在处理到A4时发生错误重启,APP将会重新从A2开始消费并处理数据,就会导致B2和B3重复输出到Sink中两次。

    2011aad
    大数据解决方案Kafka
  • kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行

    kubernetes监控指标大体可以分为两类:核心监控指标和自定义指标,核心监控指标是kubernetes内置稳定可靠监控指标,早期由heapster完成,现由metric-server实现;自定义指标用于实现核心指标的扩展,能够提供更丰富的指标支持,如应用状态指标,自定义指标需要通过Aggregator和k8s api集成,当前主流通过promethues实现。

    HappyLau谈云计算
    Kubernetes容器微服务微服务架构腾讯微服务平台 TFS
  • 三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统

    之前由于学摄影的关系,为了提高自己的审美,顺便锻炼下自己的英文能力,翻译了不少国外艺术类的 文章。最近一直想搭一个个人博客来存放这些内容,又懒得折腾建站,遂一直搁置。

    Aceyclee
    ServerlessHTML网站GitGitHub
  • NVM作为主存上对数据库管理系统的影响

    implications of non-volatile memory as primary storage for database management systems

    yzsDBA
    存储缓存数据库数据结构SQL
  • DevOps平台架构演进

    附最新架构图https://www.processon.com/view/5cbd897de4b0bab90962c435

    我思故我在
    DevOps 解决方案微服务架构架构设计
  • 【腾讯云AI小程序大赛】中山大学作品《小耳朵天使》

    ----------------------------------------------------------------------------------

    陈华山
    小程序 · 云开发小程序语音识别文字识别对话机器人
  • Kona JDK 在腾讯大数据领域内的实践与发展

    经常听人谈到 OpenJDK,那它到底是什么呢?相信大家都听说过 Java SE、ME、EE等规范, 通常意义上对 Open JDK 的定义指:Java SE规范的一个免费和开源参考实现。

    腾小云
    JDKJavaJVM大数据Oracle
  • 公告丨腾讯安全产品更名通知

    为了更好地为政企客户的安全保驾护航,腾讯安全即日起更新旗下身份安全、网络安全、终端安全、应用安全、数据安全、业务安全、安全管理、安全服务等八类安全产品的命名,致力于打造全栈安全产品“货架”,让客户选购安全产品/服务更加便捷,更快地找到合适的安全产品,从而对自身的安全建设“对症下药”。

    腾讯安全
    DDoS 防护应用安全 MS验证码(业务安全)应用安全(移动安全)漏洞扫描服务

扫码关注云+社区

领取腾讯云代金券