网页设计 » 视觉设计 » UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

发表于: 视觉设计. 评论
Sponsor

今天的教程,就是给大家穷尽图标的修饰手法。让图标看起来更加的精致。有的人会说了, 图标设计不就很简单么,直接拿islide 往上一贴,改个颜色,就完事了。

注意,高手跟小白的差距,差的是实力, 差的更是画面中一点一点的细节。无数个细节,到最后就会造成整体的品质感差很多。

UI图标修饰手法大宝鉴,教你设计好看的ICON

另外,有很多的大厂,他们的图标设计里,蕴含着他们的品牌调性和品牌基因。举个很常见的例子,优酷。大家看优酷的logo。

UI图标修饰手法大宝鉴,教你设计好看的ICON

我们再来看,优酷的图标设计。配色沿用logo的色系,在图标上一些小点缀,采用的统一风格的渐变。你说,这种东西能直接套个icon,换个颜色怼上去吗?

UI图标修饰手法大宝鉴,教你设计好看的ICON

接下来我给大家总结归类一下,图标的修饰手法有哪一些。收藏好,下次直接选其中一种方法来用就行。以下所用案例,皆来自于网络, 如侵删。

01、纯色图标

首先第一种,是最简单的纯色图标。我们在实际的使用当中呢,就直接根据项目,根据品牌方或者活动方的主题颜色就行。

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

特意做了一个放大版的图标,图标不能放大看,会比较丑, 这里我想强调的是,很多人的图标,投影用的都是黑色,灰色。 这样会显得很脏, 正确的做法是,投影是固有色的降低。比如这个图标是蓝色,投影就是用蓝色的浅色。

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

这样一看,是不是舒服多了。

记住,投影用灰色,黑色,慎重!!!

02、纯色+描边图标

第二种,是纯色加描边图标。这一种在第一种的基础上,添加了黑色描边。是第一种手法的升级版。

UI图标修饰手法大宝鉴,教你设计好看的ICON

03、线稿加内部填充

第三种,线稿加内部填充颜色。注意,适当的内部小留白是细节。

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

04、线稿图标加主题色

第四种,是线稿图标加主题色。图标内部的一些小细节,加一点主题色的修饰。单纯的黑色描边太枯燥,加一点主题色作为点缀,妙笔生花~

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

05、渐变加几何修饰

第五种,渐变加几何修饰。线稿图标采用渐变色,但是会在图标的基础上,添加渐变色块作为一个修饰。

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

06、渐变+轻质感

第六种,渐变+轻质感。

UI图标修饰手法大宝鉴,教你设计好看的ICON

07、MEB风格图标

第七种,MBE风格~ 来自Dribbble~ 这种风格比较Q萌,在真实项目中,假设碰到儿童类,卡通插画类的PPT需求,可以考虑MBE风格的图标。

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

注意这种图标的画法,有以下几个特点,这里重点强调一下。这里我以气泡为例子。

首先我们画一个圆圈

UI图标修饰手法大宝鉴,教你设计好看的ICON

然后接着我们画一个大粗描边

UI图标修饰手法大宝鉴,教你设计好看的ICON

细节,就在于MBE一定要断开黑边

UI图标修饰手法大宝鉴,教你设计好看的ICON

添加暗部

UI图标修饰手法大宝鉴,教你设计好看的ICON

大黑描边,描边断开,注意明暗。这是MBE三个核心的要点。

大黑描边,描边断开,注意明暗。这是MBE三个核心的要点。

大黑描边,描边断开,注意明暗。这是MBE三个核心的要点。

08、双色搭配

第八种,当甲方存在两种主题色,一种用作描边,一种用作色块。如图所示,所有图标围绕这两种颜色去展开,其中紫色是主色,兰青色是修饰颜色。注意图标还是做了一点暗部的细节的。

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

09、YOGA风图标

第九种,YOGA风。

什么叫YOGA风呢?花瓣一搜就有了。

UI图标修饰手法大宝鉴,教你设计好看的ICON

UI图标修饰手法大宝鉴,教你设计好看的ICON

这种在PPT运用中用的比较少。而且画法复杂,所以不展开详细说明。手法已经给大家总结了,关键还是要看大家平时多看、多练、多想、多问。

作者 | 叶神
来源 | 光想青年PPT(ID: gxqnppt)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }