快捷搜索:  汽车  科技

萌新零基础学插画(墨言教育毛玻璃拟态)

萌新零基础学插画(墨言教育毛玻璃拟态)拿「照片」这个图标来进行拆分,参数分别如下:做的过程中,发现草稿箱如果里面放一张白色的卡纸,视觉效果还不错,所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩,其它很牵强。分析完以后可以开始临摹了...因为造型比较简单,我没有临摹,直接创意发散做了另一套。选主题的时候我随便开了个 APP(当时打开的是微博),觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背景,所以这套图标用到界面会比较难适配,和原 APP 风格也不符合。在这里单纯利用主题来做练习。做底部的几何色块时,形状可以尽量跟主图形相关性大一些,加强它们之间的关联性,如果实在没法关联的也不必勉强。我降低了几何色块的面积,增加了多一层毛玻璃形状层,并且让白色的图形更灵活,而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后,自己进行的改变,效果还行。

这篇文章主要分享怎么做一套毛玻璃拟态图标,以及在这基础上如何发散创意。有的人问为什么做了那么久 UI,还去听基础课呢?我觉得在不同的阶段,对于基础内容会有不一样的理解,会碰撞出不同的火花。

萌新零基础学插画(墨言教育毛玻璃拟态)(1)

萌新零基础学插画(墨言教育毛玻璃拟态)(2)

先分析一下图标的结构。图标有三层:底部几何色块、毛玻璃主造型,带有含义的白色图形。

萌新零基础学插画(墨言教育毛玻璃拟态)(3)

再分析俯视角度时图标的表现,方便用工具表现。

萌新零基础学插画(墨言教育毛玻璃拟态)(4)

最后是颜色的归纳。作者用了饱和度非常高的颜色,基本都在右上角最尖尖的位置。

萌新零基础学插画(墨言教育毛玻璃拟态)(5)

分析完以后可以开始临摹了...因为造型比较简单,我没有临摹,直接创意发散做了另一套。选主题的时候我随便开了个 APP(当时打开的是微博),觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背景,所以这套图标用到界面会比较难适配,和原 APP 风格也不符合。在这里单纯利用主题来做练习。

做底部的几何色块时,形状可以尽量跟主图形相关性大一些,加强它们之间的关联性,如果实在没法关联的也不必勉强。

萌新零基础学插画(墨言教育毛玻璃拟态)(6)

我降低了几何色块的面积,增加了多一层毛玻璃形状层,并且让白色的图形更灵活,而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后,自己进行的改变,效果还行。

萌新零基础学插画(墨言教育毛玻璃拟态)(7)

做的过程中,发现草稿箱如果里面放一张白色的卡纸,视觉效果还不错,所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩,其它很牵强。

萌新零基础学插画(墨言教育毛玻璃拟态)(8)

拿「照片」这个图标来进行拆分,参数分别如下:

萌新零基础学插画(墨言教育毛玻璃拟态)(9)

这是最后呈现的效果:

萌新零基础学插画(墨言教育毛玻璃拟态)(10)

萌新零基础学插画(墨言教育毛玻璃拟态)(11)

封面图参考了小米的屏保。我用 sketch 做的,效果一般,可能用 ps 做会更逼真吧。

萌新零基础学插画(墨言教育毛玻璃拟态)(12)

临摹一套图标的时候,要带着目的去临摹,分析原作者每一步的处理。然后把图标拆分成不同的变量,修改这些变量的时候或许会得到不错的想法。

猜您喜欢: