出色的图标是如何一步步设计出来的?来学学这些实操方法!

2021-7-22    seo达人



图标是设计中不可或缺的一部分,是引导各种操作的视觉提示,可以赋予产品独特的身份。文章通过设计实操来帮助大家发现图标设计的更多可能性。

 

01 谷歌Material Design原则

使用简单的几何形状和大胆的颜色

图片

扁平化的设计趋势启发了Material Design,它也是基于基本的扁平形状,仔细选择最能代表图标所描绘的元素的形状。

 

用细微的阴影增加深度

图片

阴影是为设计赋予深度感的好方法,可以展示光线投射到物体上的效果。另外需要注意的是,模拟的自然光通常来自左上角。

 

使用颜色替换阴影

图片

▲ 每种颜色通过多种色调的变化来模拟视觉深度。在上一版的Gmail图标中,可以看到M的形状使用了不同深浅的红色,而信封下面使用了多种灰色阴影。

 

02 分步进行图标设计实操

了解了基本原则,接下来就到了实操环节,通过下面这些图标的实操演示一步步掌握这种简洁易用的设计风格。

 

闪电图标

图片

▲ 通过在两个形状的相交处创建阴影,实现顶层形状悬浮的效果;使用三种黄色阴影–顶层较浅、底层较深和最深的阴影。

 

聊天图标

图片

▲ 复制顶层聊天气泡,并将副本向右下移动来作为颜色最深的阴影。

 

标记图标

图片

▲ 复制图标,并删除右上角多余的点;复制左侧形状,并移动到右侧形状的顶部;两个形状相交以创建阴影效果。

 

旗帜图标

图片

▲ 将图形导角,提取标志底部的锚点绘制两条相交的线来创建折叠效果。

 

心形图标

图片

▲ 复制心形图标,隔离形状的左半部分;从右上角向下画一条对角线;将生成的形状与心形重叠,然后向右移动以减去阴影形状。

 

山峰图标

图片

▲ 创建两个不同大小的三角形;将较小的图形向右移动,并将得到的重叠部分作为阴影形状;最亮的颜色保持在左侧;最后运用圆角来调整图形。

 

人物图标

图片

▲ 选择并复制左侧人物形状的下半部分;将副本与右边的形状对齐;择三个重叠的形状,使用路径查找器做出阴影形状。

 

浮动图标

图片

▲ 把下方的形状向上移动至中点;复制上面的菱形,并将副本向下移动10-20像素;选择下面的两个形状,使用路径查找器保留阴影形状。

 

信封图标

图片

▲ 使用“直接选择工具(A)”,选择信封形状的第二高的点;使用“钢笔工具”在线段右侧添加一个点;抬起上面的两个点并向左右移动(如图所示),将负空间看着像抽出来的信纸效果。

 

蛋糕图标

图片

▲ 隔离蛋糕底部的形状并复制;缩小宽度并向内移动;将生成的形状移动到原始图标的顶部,并延伸较高的点以与上方的形状重叠。

 

03 最后:尝试改变图标的感觉

跟着过程一步步来设计,你也能做出效果很棒的图标。最后帮大家整理了图标实操详细GIF教程,关注公众号,后台回复: 实操 即可获取!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》出色的图标是如何一步步设计出来的?来学学这些实操方法!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档