QQ爱心图标的设计过程

2016-02-17 05:02 8 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享QQ爱心图标的设计过程吧。

【 tulaoshi.com - 平面设计 】

QQ爱心图标的设计过程,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

腾讯月捐计划倡导爱心人士,通过每月小额捐款的形式,长期关注和支持公益项目。并和亿万爱心网友一起,每人每月1份爱,点滴付出,汇成爱海,形成强大公益合力,随时帮助需要帮助的人!

QQ公益图标正式亮相,让QQ用户轻松实现献爱心的公益愿望。

QQ爱心图标的设计过程,PS教程,图老师教程网

月捐计划的icon设计是一次重大的挑战,因为赋予它的意义非凡,被点亮后,将排列在迷你资料卡上的第一位,是QQ用户的公益通行证,让爱传递的入口。通过它来凝聚9.9亿个QQ的爱心力量。

这个16*16的小图标,被委托重担,在前期设计的过程中,尝试过很多方案,经过方方面面的考虑,层层筛选,由pony亲自指点,最终敲定这颗充满爱心意义的跳动的心形icon,:红色舞动的丝带沿用了原公益网logo的造型,背景一抹温暖的黄色,象征着心灵的光明,点亮无数孩子的生命梦想。

推出后,看到越来越多的用户对它的热捧和喜爱,被大家誉为QQ图标中的首席图标,这是对设计师最大的认可和鼓励,现在来回顾一下月捐icon的设计过程。

前期我们一直构想着树苗(芽、叶)的造型,象征着被关爱,被呵护,播种希望的种子,让爱在每一个人心中生根发芽。

以下是初步尝试。

QQ爱心图标的设计过程,PS教程,图老师教程网

方案提出后,大家感觉造型看不清楚,第一眼难以辨认叶子的形状(上图1.)

于是重新绘制了树苗造型,调整了茎干的颜色,采用像素化边缘的策略,使叶子跳出背景,突出显示,易于辨认。(上图2.)

可像素化之后带来另外一个问题:过于卡通!于是继续优化,弱化了边缘,将大小叶子的位置对调,集中重心,突显右下角的等级数字,(上图3.)

至此,在该方案基础上,能想到的调整动作都一个像素一个像素尝试过了,基本没有可优化的空间了,以为大功告成!可突然有人提出icon的配色和我们的QQ音乐icon过于接近,容易产生混淆。大家反复斟酌,确实对icon识别性上存在干扰。造型雷同,配色雷同,并摆放在同一个工具条上,很难脱颖而出。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

OMG~~~~
继续奋战

QQ爱心图标的设计过程,PS教程,图老师教程网

保留上一个方案的思路,仍采用叶子的造型,去掉了背景色,和music的icon对比出差异化(上图1.),可自己琢磨后,感觉此方案造型单薄,含义浅显了一些,于是继续深入,将两瓣芽组合成心形,延展寓意。(上图2.)

在确认每一个造型方向后,都尽力把能想到优化点做到最好。

大家知道16*16的icon表现是有限的,一个四方格子,不能太满当,也不能太单薄,在造型和色彩融合上需要一点一点的润色,故此有一美名,叫绣花功,哎呀,功夫梦能否圆满?还得看大家点评
结果总是令人激动地~~~~,大家一致认为造型寓意不丰满,正赶上QQ农场菜园子收菜,放在菜地里正合适~~~~

OMG~~~~
继续奋战

QQ爱心图标的设计过程,PS教程,图老师教程网

延展上一个方案的思路,想到了树的造型,会更饱满,树干采用You的首字母Y的变形,托起一片新生和希望,强调每一位用户的参与性,为公益事业做出点滴贡献。(上图)
提案后,大家觉的有距离感,寓意虽然很好,但不够直观,色彩亲和力不够,并不能让用户从中感受到公益的力量和温暖。

OMG~~~~
继续奋战

QQ爱心图标的设计过程,PS教程,图老师教程网

这次换一种思路,跳出最初构想的圈子,苗、芽、叶、树本身就限制了icon的色彩,搭配工具栏的蓝色背景下,很难突出显示。何不保持公益的统一性,将现有镂空的logo造型重新包装,让它适合16*16的表现。(上图)

事实证明,换一个思维,抛开原有定势,经常出去转转,总能找到出路的。
大家终于一致认可了该方案。

我相信每一次设计背后都有很多故事,每一个作品都凝聚了所有人的期许,产品,策划,设计,总监,经理,甚至到总办,大家寄望于它,为QQ用户提供最佳的体验。
为公益事业一丝不苟的默默奉献。

如何点亮爱心图标?

当您的爱心积分达到108积分,公益图标会在您的QQ上自动点亮。有以下三种情况,您的爱心积分会达到或超过108积分。

参加月捐计划(推荐):当您参加月捐计划,并成功完成首月捐款10元,公益成长图标在您的QQ上自动点亮。其他成功捐款:当您成功累积捐款额大于或等于11元时,公益成长图标将于成功捐款的第2个月在您的QQ上自动点亮。在公益成长体系推出前,累积捐款大于或等于11元(且单笔大于或等于1元)的爱心网友,您的公益成长图标已经自动点亮,请登录查看。

来源:https://www.tulaoshi.com/n/20160217/1578737.html

延伸阅读
作为目前网站和APP中最简单、最具功能性也最令人难忘的组件,汉堡图标菜单图标,最近这几年可谓出尽了风头,它逐渐成为现代UI设计中必不可少也极具代表性的视觉元素和设计符号。 如果向上追溯汉堡图标的历史,可以到30多年之前。惊才绝艳的Norm Cox为世界上最早的图形界面电脑施乐之星设计图标的时候,创造了这个标识。汉堡图标自然而然地模仿...
标签: PS PS教程
如走在昙华林路上,总是听到小店老板吆喝”吹泡泡,回忆童年!”在这时,我想,80后值得回忆游戏中一定有超级玛丽!超级玛丽是像素游戏的经典代表.前些日子给大家分享过一篇简单的像素文章《手把手教你做像素图片》。现在,图老师小编再给小伙伴分享一篇有关像素文章,希望小伙伴伴着美好童年回忆在新的一年中开开心心,开开心心。 如果让你直接画出...
PS一个写实风格唱机图标的设计思路   软件: Photoshop 耗时 3-4 小时 技巧: 图层样式、图层蒙版、光效、阴影效果 本文将简略的陈述这款图标的设计思路,如何让图标显得栩栩如生,大家在放假的时候,来杯咖啡,慢慢的按照作者步骤来一发吧,难度有的,主要是掌握思路哦!~~~ 步骤01 首先用草图勾勒出...
图图桌面添加图标的方法 图图桌面美化软件可以将我的电脑等系统图标、文本文件、图片、软件快捷图标等等添加到图图桌面里,进行桌面图标管理,使您的桌面变得简洁清爽。 添加方式有两种(以添加QQ为例): 方法一:左键按住QQ图标,不松开,拖动图标到图图桌面的位置,松开左键,图标即添加完成。(如图) 1.系统桌面上QQ图标...
自从IOS 7发布后,不知道同学们发现了木有,很多APP(QQ、微信、微博等)都跟着换上了空心图标,但空心图标会不会给用户带来认知疲劳,一直木有定论,现在有同学特意编写了一个APP,做了1260个图标识别测试,得出了精准的结论,结论是啥,学习吧。 去年夏天,设计师Aubrey Johnson在Medium 上发表了一篇批判ios7的文章。Jonhson指出苹果的新空心...

经验教程

897

收藏

57
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部