美文网首页UX、UI和UE
从购物图标的变化看图标发展趋势(附土豪金版购物图标教程)

从购物图标的变化看图标发展趋势(附土豪金版购物图标教程)

作者: 泱泱悲秋 | 来源:发表于2017-01-02 16:10 被阅读39次

先比较一下下面两个购物图标

上面的是购物袋样式,下面的是购物车样式,有没有选下面的,认为下面这种好看的。

恭喜你,眼光还停留在10年前,这不是复古风,这是被时代抛弃的节奏(或者是粉色萝莉控?原谅我不懂)。

好吧,我承认我在做图标时偏心了,第一个好赖还做了点效果,第二个直接用ps自带性状,一个字,丑,而且效果也只加了个投影和高光。

好了,废话不说,上教程,直接说第一个的做法。

首先是底色块,土豪金,不解释,我就是那么赤裸裸的喜欢,就是这么任性。照例,上浅下深的渐变叠加,加2px高光,加15px的投影。

内陷圆圈效果,上深下浅的渐变(就是上面倒过来的效果),内阴影15px,深色,投影2px,浅色。

再叠加一层圆,再倒过来,上浅下深。投影,高光。

加两个圆孔。

加手提带。步骤如下:圆形-圆形,得到圆环,用矩形去减,得到半圆,再用两个小圆补上切面。

复制一层,调节锚点和手柄,羽化,做阴影效果,然后加蒙版,擦去(黑色画笔去涂抹)中间部分。

手工。华丽的手提袋版购物图标出炉,看官,有没有购物的冲动?

插播一条

手提带子的立体感忘记做了

很简单,复制一层,上层做内阴影+浅色内发光+深色投影

然后填充改成0

栅格化之后用柔性橡皮擦擦掉与两个小圆的切点部位。

好了,完美。

相关文章

网友评论

本文标题:从购物图标的变化看图标发展趋势(附土豪金版购物图标教程)

本文链接:https://www.haomeiwen.com/subject/bbbwvttx.html