我这样系统性的优化一组图标!

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
19413 0 22 2020-06-16


菜心的第155篇原创

2020年的第33篇

距离2020年小目标40篇原创还有7篇



本文设计内容:

设计执行:杨杨

设计指导:菜心


和大家分享一下,杨杨在年前做的一套新年主题图标,整个过程成长很大,也希望能给大家一些启发。


其实一套主题图标对于一个刚毕业的大学生来说,难度不小,但只要愿意学习,还是可以攻克重重困难,最后把需求做好的。


新年嘛,关键词的发散就不多说了,无非就是鞭炮、对联、福、灯笼等等。


我们直说重点:



1.风格如何选取

2.找不足的维度

3.透视角度优化

4.颜色优化

5.怎么增加亮点



1.风格如何选取


对于风格,应该如何选择呢,比如有描边扁平风格:



Martin David作品



有轻质感的拟物风格:



Man King作品



这里可以给大家一个参考维度:


界面常驻功能性图标一般会使用描边、扁平风格的图标,而对于节日主题图标,图标如果太平会显得比较冷静,所以加一些质感的渲染会更有气氛。


而且增加质感一定程度上可以弥补造型上的不足,而且很出效果,对于时间有限的需求,是个不错的选择。


所以这次新年主题图标的需求,我们选择了轻质感的风格。




2.找不足的维度


由于没有做图标的经验,所以第一版的样式犯了一些基础型的问题:




有不足不可怕,可怕的是不知道不足在哪里,所以清晰有条理的找到问题也是我们设计必须具备的能力。


我们从以下三个维度进行问题拆解,供大家参考


厚度的一致性:既然是轻质感风格,那就需要让图标有一定的立体感,也就是厚度,而图中的鞭炮、小鼓看起来有些平,没有体现出厚度。


颜色的一致性:一组图标颜色一定要看起来是和谐,用的色相要保持一种,比如现在鞭炮的红色有些偏暗红,而小鼓的颜色偏黄红,这也是比较明显的问题。


创意亮点的发掘:图标中有一个老鼠的形象,想表达一定的创意性,但是老鼠的造型还不够可爱饱满,并且这个创意点和平台品牌关联性不强,如果用在别的平台也可以的话,那就证明还可以再想象独特性。


灯笼是五个图标中做的相对比较稳的一个。


问题和优化方向都有了,接下来就是调整了!



 3.造型方面的优化


首先我们来优化造型方面的。


既然我们要做立体化质感的图标,那图标就不能太平,原有的鞭炮角度太正,所以在角度上进行了优化。


并且因为一个鞭炮有些太单调,所以把数量增多,优化如下:



除了鞭炮以外,我们认为那个鼓的造型本身不够饱满,短时间内比较难出效果,所以及时更换了元素——锦鲤(锦鲤和推荐貌似还点关系):



多次调整后,图标在立体化方面有了很重要的突破。



 4.颜色方面的规范


之前的颜色有些偏暗,有些发黄,所以我们定了一个颜色规范,在主色色都使用统一的颜色,这样在延展的时候,就不容易跑偏:



只要严格保持颜色规范的使用,不停的对比调整,一定可以让一套图标的颜色不跑偏。



5.创意方面的优化


咱不说一组图标,每个都有亮点,但至少有一个是相对比较特别的,这是非常有必要的,否则整体看起来就会非常平庸。


产生亮点的方法有很多,比如风格、透视、颜色、品牌基因等等。


由于我们在风格、颜色等方面都已经固定,所以选择在品牌基因的维度出发进行优化。


一说到品牌基因,我们就可以联想到吉祥物,由于又是鼠年的新年主题,所以我们将自己的吉祥物黑子与老鼠的元素结合,

让“吉祥物黑字”穿上了“老鼠外衣”,并且手举春联:




可谓是整组图标最大的亮点,这个生产创意的方法其实很常用,大家一定要多多练习。

最后我们看一下优化前后的效果:



优化前:



优化后:



整体还算ok,关键是能在执行的过程中有所成长,也期待杨杨后续更加成熟的作品。


长点心,比啥都强。


点个赞,那就更强了!




Powered by Froala Editor

全部评论:0条

  • 2020-11-19 15:06

    锦鲤和老鼠和其他几个比起来感觉不太统一,拙见 不喜勿喷

  • 刘木子倩倩

    2020-10-15 21:08

    就是有些图标的发光亮处在投影边边,感觉不太对的感觉

  • 上白下黑

    2020-09-04 15:37

    一直关注着您,您是位学习的榜样,也希望您不需要理会那些没有任何营养的评论,希望能一直和您学习

  • ui设计师培培

    2020-07-13 19:58

    参考作品的作者名字是真实的吗,我怎么搜索不到他的其他作品

  • 阳光午后

    2020-07-09 11:02

    文章很好,指导了优化图标的几个方向

  • 2020-07-03 11:51

    优秀

  • 泪妆Tearsy

    2020-07-02 00:02

    改版后的质感不是很统一,需要再重绘的

  • 羊二二

    2020-06-30 13:45

    感觉你写的和别的大 v很不一样,总是能把一个设计说的很清楚,每次看都看的下去。向你学习

  • 泪妆Tearsy

    2020-06-30 08:37

    @菜心设计铺: 嗯嗯,谢谢大神回复

  • 是LILI哦

    2020-06-28 15:19

    我感觉第一个还是比较明确能看出来啥的,改版的有点冷,鞭炮和老鼠看不太出来,老鼠有点像鸭子

  • 菜心设计铺

    2020-06-28 12:08

    @泪妆Tearsy: 主题图标主要表达节日气氛,仅使用短暂几天,关联性可以弱一些,不像常驻的功能性图标。当然如果花费大量时间既能把关联性做好,又能把氛围做好,那肯定是最好,需要对难易程度和时间成本进行平衡取舍

  • 菜心设计铺

    2020-06-28 12:01

    @: 好的,我继续加油

  • 脉搏l

    2020-06-27 22:49

    重点是整体都不太好看,不管是调整前还是调整后。 鞭炮还不如单个的好,手机上看更易识别,而且单个的也能突出立体,包括那个鼓也是。那条鱼没画完吧,鱼鳍拼的很硬鱼尾不是这样的,就不说没有画鱼鳞了,鱼须怎么只有一条?

  • stxk1

    2020-06-27 09:41

    @菜心设计铺: 一点辨识度都没有

  • 2020-06-25 11:33

    鱼能表达推荐吗? 灯笼能表达书架吗? 就这水平还教人 误人子弟

  • LoseSleep

    2020-06-24 15:52

    感觉故意欺负我们智商…明显第一版好像配凑的,第二版才是一套,哪儿能这样参差不齐,大小角度颜色都差那么远…

  • ssssaivin

    2020-06-22 16:40

    改过之后确实好多了,但总感觉还有很多可以提升的地方哈哈。视觉方向上,有的从侧面,有的从正面,有的直着,有的斜着。man king的轻质感视觉角度就都是一样的,就很统一。当然短时间内能提升这么大已经很棒了。

  • 泪妆Tearsy

    2020-06-20 18:23

    图文无关,仿佛用什么元素都可以

  • 菜心设计铺

    2020-06-20 09:19

    @难得糊涂w: 是有一点暗了,感谢提醒

  • HugoChang

    2020-06-19 11:18

    强

  • 尘

    2020-06-19 10:05

    很棒了,更改之后感觉更好更直观了。

  • 难得糊涂w

    2020-06-18 14:54

    书架那个灯笼里面的黄条颜色有点暗沉,和其他图标颜色对比度很强,是故意这样的吗?

  • DOMOHAHA

    2020-06-18 11:35

    菜心真是个特别厉害的老师

  • HD

    2020-06-18 09:14

    @菜心设计铺: 为什么很多图都看不见

  • 做设计的大厨

    2020-06-18 08:45

    最优秀的菜心,可否出个手把手的教程呀,我知道你会出的,谢谢了哦,哈哈

  • 菜心设计铺

    2020-06-17 22:48

    @SYJ: sketch

  • SYJ

    2020-06-17 17:49

    用什么软件做的啊 大神

  • 菠萝果冻

    2020-06-17 16:56

    哇 好看耶,看起来很舒服

  • 2020-06-17 15:41

    过来找灵感了

  • UUdada

    2020-06-17 15:32

    杨杨

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票