浏览 4310 次 / [ 设计教程 ] QQ20周年 | 玩转像素复古
  • 发布时间 2019-08-02 22:00
  • 作者:深圳-腾讯ISUX



    复古是一场与时空美丽的邂逅,跨越时间依旧经典,

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

    a - 1.jpg




    01概述  提炼经典
    QQ陪伴我们已经走过了20年,随着时代的变化,有哪些是能令我们至今都记忆深刻的呢?
    不同时间的QQ推出不同的头像给用户使用。然而这么多年过去,QQ最开始推出的经典系统头像一直让大家记忆犹新。
    伴随着QQ头像出现的,不仅仅是一个用户,更是他带给用户的热烈心情,
    他印刻了初识互联网的我们心动瞬间。“轻舞飞扬”,“缘分天空”,“追风少年” ,头像闪动轻轻问候“在吗?”
    瞬间感觉回到了当初的时光;当年这些或许不够“精致”的QQ头像,以极高的辨识度,承包了互联网人的青春记忆,
    给我们留下了荷尔蒙气息。经典之所以成为经典,是因为经过时间的沉淀,依然能引发大众的喜爱。
    我们怀念的不只是一个简单的头像,更是附着其上的自己。QQ20周年之际,
    我们整合了105个早期经典系统头像,在保持经典造型的同时,进行了设计上的像素复古风重塑。

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


    a - 2.jpg


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

    a - 3.jpg

    a - 4.gif




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


    优化及重塑

    a - 5.png

    a - 6.gif


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


    a - 7.jpg



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


    a - 8.jpg


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


    a - 9.jpg


    背景色提取和搭配


    a - 10.jpg


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


    a - 11.gif

    a - 12.png
    a - 13.jpg


    将复古进行到底,我们将那曾经出现在1999年电脑屏幕上的QQ第一代版本的界面,
    搬到现在的手机当中。通过提炼色彩,概括图形界面,
    加上三只精灵鹅,让复古不古板,可爱又好玩。


    TSL7eqUGb7uFhOztqqy3c4B3Sp74cRuf5SfKRxE5XbC.jpg
    qdztWzQYjRaSbzNTZmvobcREAgvrVCXX2qLjUCi4tJX.gif
    a - 14.gif
    a - 15.gif
    (喜欢这套主题皮肤的同学可前往QQ个性装扮下载哦)
    04深入延展
    赋予故事和内容
    每个系统头像都有名字,头像的后面是一群有着特定性格喜好的人群。不同类型的人喜欢不一样的头像,
    同一个人在不同阶段也会换不一样的头像。据说,喜欢搞怪头像的人比较开朗活泼,天真快乐;
    喜欢动物头像的人比较有爱心,懂得关心人;喜欢人物头像的人自我意识比较强,
    头像某种程度上也是一种对自我形象的认同感。20年来QQ陪伴大家成长,那个当年使用QQ经典头像的用户,
    也经历了人生的酸甜苦辣,在时光中历练成长,其中不乏一些有趣好玩的灵魂,他们或是勇敢,
    或是善良,或是充满力量。设计师针对部分的头像进行了头像的延伸设计,
    并为他们首次把经典头像结合现代潮流服装让复古更好玩更潮,
    WE ALL HAVE UNIQUE SOUL


    a - 16.jpg
    a - 17.gif
    a - 18.jpg
    a - 19.gif


    人物像素绘制流程一般就四步骤:
    1.前期需要根据各不同的头像进行思考与策划,结合现代服饰等元素突出人物性格
    2.挑选一张头像,使用PS铅笔工具(此工具比较接近像素质感)根据头像绘制全身草图
    3.根据草图开始点像素边
    4.填色块,加光影,通过光影处理的不同表现出不同的材质
    以下是使用像素做出顺滑的弧度的基础规律:一般都是像素数量递增递减就能得到很好的处理。


    a - 20.jpg


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


    a - 21.gif
    a - 22.png
    vg2WlymhoHEzgaKwxYBWiCtznV3K5R4pCM0oHTOJfGJ.png
    a - 23.gif

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

    a - 24.gif

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

    a - 25.gif

    - 嗨起来 - 睡神马睡,起来嗨啊!

    a - 26.gif

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


    a - 27.gif

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


    a - 28.gif

    - 嗨 - 嗨,帅哥加个扣扣吗?


    a - 29.gif

    - 好的 - 完全ok,no趴笨

    a - 30.gif

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

    a - 31.gif

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


    a - 32.png
    a - 33.gif

    - 调皮 - 我的热情就像我喷的火~
    a - 34.gif

    - 崩溃 - 鸭的世界,连崩溃都那么……
    a - 35.gif

    - 惊呆 - 吓得我黑眼圈都掉了
    a - 36.gif

    - 生气 - 老虎不发威别当我是病猫
    a - 37.gif

    - 无语 - 没啥好说,一串鱼泡泡送给你
    a - 38.gif

    - 开心 - 普通的disco兔子普通地摇

    a - 39.gif
    - 再见 - 今儿就说这么多啦,各位再见哦~

    05结语

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

    a - 40.jpg
    IujEwueZ2W51Ha2ZZlc2sOQ0pfMNkmuWeoSrAL47qIh.jpg

    如何获取高清头像

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

    a - 41.png
    XpKooTWxoaaoiskVuCxw7hUpVEMNgZ2FvTvituOx1gg.png
    4OVXF2X5z9Ap8Dys5GyoQQh3rNLCrtrRCWB8SI1XKyi.png
    VlBpphFQyRQyVgTyLpvjPqEHCtzYYXH6T95swWoYH5I.png
    W4OQqeXTxBPMrQdmPyNAylpLVN4DloBy96E7iD1ctyK.png
    TnXUFIWCeSlu7hFPOVWSPGj9n8zXI6hsW8IkjTV8kXI.png
    HLxL9YFMWtFaBz7nAb2EcN2nng8VPfAmqy1CXm9yU40.png

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

    a - 42.jpg