云顶国际网站

QQ20周年 | 玩转像素复古

16: 30

来源:腾讯演讲厅

QQ20周年纪念日|有趣的像素复古

90e27ef845974d02b7c20d1bcc2ac6eb.jpeg

01概述

优化经典

QQ已与我们合作了20年。随着时代的变迁,到目前为止能让我们记住什么?

不同时间QQ推出不同的头像供用户使用。然而,多年来,QQ首次推出的经典系统化身一直被人们记住。随着QQ头像的出现,不仅是用户,还有他带给用户的温暖感觉,他在我第一次见到互联网时烙印了我们的心连心。 “光舞飞舞”,“天空的命运”,“狩猎风”,化身闪烁,轻轻地迎接“是吗?”这一刻感觉回到原来的时间;这几年可能不是“精致”的QQ头像,非常高互联网的认可已经扼杀了互联网青春的记忆,给我们留下了荷尔蒙的气氛。经典之作成为经典之作的原因在于,由于时间的流逝,它仍然可以引起公众的喜爱。我们想念的不仅仅是一个简单的化身,还有附属于它的化身。

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

02风格选择

复古与时尚之间的最佳平衡

恢复经典不仅仅是一个简单的副本,它需要在经典的基础上进行细化和重塑,从而产生新的视觉,赋予“复古”新的含义;在复古和时尚中完美平衡,像素似乎是完美的选择,但对于像素风格的选择来重塑105个经典的头像,它确实需要很大的勇气,除了像素风格更耗能,不能像矢量图形一样自由扩展也是最大的痛苦,面对随后的每个规范所涉及的拉伸和缩放必须找到一个完美的解决方案。

像素表达式缩放方法:

be8f28cec63841b59e467d57fce65b3e.jpeg

对于不同大小的头像,主题和H5,您需要设置像素大小的规格。该设计尝试不同的头像效果,5px在移动端的小屏幕上同时具有细节和像素感;

这??8px和5px尝试:

36971e922c074cc282f9c7c13278e2b0.jpeg

07ac74d894354998925549436361b6fd.gif

5px在1080px尺寸下实现了最佳效果,同时保留了像素纹理,同时创建了更加细致的光影效果。

03视觉演示

优化和重塑

3ecb1c3520cf44d39f8f07bb97e3fc93.png

421b62b54d424ea6a8e381aa492e5c7e.gif

在设计的早期阶段,我们找到了“早期版本”和“重新发行版”的化身。经过分析,我们决定平衡两者之间的视觉平衡。在保持经典外形的同时,我们进行了像素复古设计。风重塑。

1b80921bdaf248d8af695eb28ee64f98.jpeg

在设计优化细节中,我们统一化身光源,将光源设置为光源的顶部光线和左右两侧,并调整光影和色彩亮度,使化身形状更加饱满;每个化身的主要颜色以相同的颜色控制。在颜色内;统一使用草图边缘,笔划颜色指定为黑色或相同颜色的深色;同时根据头像角色,每个头像都具有独家背景色,使其更加独特和美观。

以上视觉调整和大胆尝试,结合“复古和更有趣”的主题,让化身出现在用户面前。

719b60d4608d468686c7b48857c0d2ae.jpeg

你认为根据5px像素,然后拿着19岁的血肉经典头像,头像会幸福吗?不要!在迷人的屏幕前,黑色的血泪历史背后,每个化身都经历过许多版本才能取得满意的效果。

c6aef6b3978c42d184668f94c360b968.jpeg

背景颜色提取和匹配

cfba839c026a4e3ab11bff6514d8f1de.jpeg

阿凡达动态

我相信每个用户都应该知道他使用过或已经使用过的头像是什么。这次改造了头像,我们还将移动所有105个头像。

db8489685a584a46a6f02ef15ab80a75.gif

408eb494b8c146d0bbb4daf3f0791f55.png

24275b2ad9044868ab01bb4804f2e9a2.jpeg

随着复古的到来,我们将1999年电脑屏幕上出现的第一代QQ版界面移动到了当前的手机上。

通过改进颜色,总结图形界面以及三个精灵,复古不是老式,可爱和有趣。

5239fc298ae6494a9695a775154d2455.gif

c6aff39aa3424fdbabfc9c9e0f6a8bb2.gif

0a9ee77a05c049edad8f7f908cc624e6.gif

(喜欢这个主题皮肤的学生可以去QQ Personality Dress Up下载)

04深入扩展

提供故事和内容

每个系统化身都有一个名称,而化身后面是一组具有特定个性偏好的人。不同类型的人喜欢不同的头像,同一个人会在不同的阶段改变他们的头像。据说,那些喜欢责备自己头脑的人更加开朗活泼,天真无邪;喜欢动物头像的人更关心并知道如何照顾他们;喜欢化身的人有更强的自我意识,化身也是对自我形象的一种认可。感。

在过去的20年里,QQ伴随着每个人的成长。过去使用QQ经典头像的用户也经历过生活的起伏。他及时长大,有一些有趣而有趣的灵魂。他们勇敢,善良或充满力量。设计师为一些头像进行了头像扩展设计,并且他们第一次将经典的头像与现代时尚服装相结合,使复古更加有趣,我们都拥有独特的灵魂。

31bf1abd215d43189fc48a1931cfed29.png

a6bfc4ffc3a64756a134b2d16090b715.gif

6c74cf10b7c544ef938278e01b7a80e8.jpeg

cd2e4c0b523a4d4aafb737507b8365ae.gif

字符像素绘制过程通常需要四个步骤:

1.在早期阶段,我们需要根据不同的头像进行思考和规划,并结合现代服饰的元素来突出角色。

2.选择一个头像并使用PS铅笔工具(此工具更接近像素纹理)从头像中绘制一个完整的草图。

3.根据草图启动像素边缘。

4.填充色块,添加光影,并通过不同的光影处理显示不同的材质。

以下是使用像素制作平滑弧的基本规则:通常像素数量增加和减少以获得很好的效果。

ec86193de9a9413cb89e9de3e7e79df8.jpeg

公式:基本上只是用这种方式处理像素曲线,你会轻松很多。

14332cd25053451893d4e222eaade470.gif

9c2f2897f94e42ca9f7bf72301a3f5e3.png

您使用的QQ经典头像实际上已经移动了!

伴奏的经典化身是害怕玩宇宙!

我们先来看一下视频

有了这个宝藏表达包,你就是最受关注的群聊最A聊天,并迅速获得geeeeeeeeeet!

经典的化身与神奇的动作配对,当它被发送出去的时候,剃须就被迫(刁)

2d863af22f7d41268d34383b032baafd.png

a16e48d427eb46889f26187fcf5a3976.gif

- 讨厌 -

这位先生不会移动他的手,而是吐出星星来协助。

44bc444bac8c4da5af5e9e058b9c8190.gif

- 太棒了 -

真棒老铁,给你双击666!

1390c8d719994240ba025a417b460e7c.gif

- 拿起来 -

睡马睡觉,起床!

fc7ef5985b714d7787607400d979dc03.gif

- 哈哈 -

小三毛戴着太阳镜,很吸烟。

154818f1cea748ac810ef9526cd94abe.gif

- 安静 -

请保持安静,我想开始玩帅气

6549266cd64e4c39b0723a7f8a39babd.png

b5e035f048474131b5b53d4796801972.gif

- 嗨 -

嘿,大家加一个按钮?

abf6978c87a546feb71becd138e58bf7.gif

- 好的 -

完全没问题,没有傻瓜

8872540a5b384e5b856e2b86d0e9463f.gif

- 什么? -

你能抵抗红唇吗?

b47d34ba8e3c4769bc590f3354e27300.gif

- 可爱 -

黛咪你的小可爱就行了

744d02ff1ef04de3ab0422b4bfdb0050.png

ed951cc96d2b44bfb50dc96f802868e7.gif

- 顽皮 -

我的热情就像我喷的火

70f71827d2224727a8c5bf32d95c27a2.gif

- 崩溃 -

鸭子的世界,甚至崩溃.

51533408293e49c0b6b5da43fcdd31b6.gif

- 惊呆了 -

害怕我的黑眼圈消失了

a5af3d74c26249f7b6fa061bc5e34edc.gif

- 生气 -

当我是一只生病的猫时,老虎队没有什么区别

2f106bd51d4a40ee849a69a29ad0c199.gif

- 说不出话来 -

没什么可说的,给你一堆鱼泡

f7313ee9805f4f53b158ee5cabf39ef6.gif

- 快乐 -

普通的迪斯科兔通常会动摇

cbba2f3657c84dd8a8fd77ba2276cfd4.gif

- 再见 -

05结论

向经典致敬

“过去的一切都将是一个新的开始。”复古是与时间和空间的美丽相遇,跨越时间,仍然经典。

随着对经典的经典致敬,在经典中,我们将期待未来20年的华丽变化。

腾讯ISUX(id: tencent_isux)

分布式布隆过滤器设计

仅提供信息存储空间服务。

化身

像素

5像素

光与影

视力

阅读()