资源库
  • 源码模板
    • 建站源码
    • 小程序源码
    • 模板素材
  • 网赚教程
    • 创富
    • 引流获客
    • 新媒体
    • 电商
    • 直播
  • 网赚交流
    • 网赚交流
    • 网赚工具
    • 网赚技术
    • 网赚项目
    • 短视频直播
  • 运营干货
    • 新媒体运营
    • 产品运营
    • 活动运营
    • 用户运营
    • 短视频运营
    • 社群运营
    • 直播运营
    • 电商运营
登录

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

2022-07-12 产品运营 0 0 8 0
  • 详情介绍
  • 常见问题
  • 评论建议

图标是设计中不可或缺的一部分,是引导各种操作的视觉提示,可以赋予产品独特的身份。

文章通过设计实操来帮助大家发现图标设计的更多可能性。

01 谷歌Material Design原则

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

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

用细微的阴影增加深度

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

使用颜色替换阴影

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

02 分步进行图标设计实操

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

闪电图标

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

聊天图标

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

标记图标

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

旗帜图标

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

心形图标

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

山峰图标

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

人物图标

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

浮动图标

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

信封图标

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

蛋糕图标

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

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

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

慢慢来比较快,如觉得有帮助,

请点个赞,谢谢!

—  END  —

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
UI设计 产品运营 品牌logo 图标
微推客
分享 收藏 点赞(0)
  1. 免费下载或者VIP会员资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
  2. 提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。
  3. 找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
  4. 付款后无法显示下载地址或者无法查看内容?
    如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理
  5. 购买该资源后,可以退款吗?
    源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

评论(0)

提示:请文明发言 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

上一篇
说说电商小程序用户增长的产品架构
下一篇
商品属性的前世今生:你必须要了解的知识点

相关文章

产品运营

带你真正从0~1认识区块链和比特币

这是司马特小分队第11篇原创文章 最近币圈真的火的一塌糊涂,之前的比特币疯涨(总...
3 年前 0 0 7
产品运营

以京东Joy为例,窥探IP吉祥物的商业逻辑

京东于两个月前宣布第三次换标,经过一段时间的观察,趁着假期完成本文。商业的本质的...
3 年前 0 0 7
产品运营

元气森林在B站跨年晚会推出的这支广告,太逗了!

B站和元气森林的合作,是一个发展迅猛的年轻化社区平台和新消费品牌的强强联合。纵观...
3 年前 0 0 20
产品运营

从0开始学互联网运营|详解新媒体、活动、用户、产品运营等

运营一点都不简单。无论小盆友你是被谁忽悠来做运营的,忘了0门槛、0经验、轻松入门...
3 年前 0 0 29
学习交流

QQ客服:312869007
网赚交流群:37294287

关注公众号学习交流
标签
ASO/ASA SEO/SEM 互联网 产品运营 传播 信息流广告 内容运营 创意 品牌 品牌营销 品牌营销案例 大厂动态 小红书 市场洞察 市场运营 广告 广告文案创意 思维 抖音 推广 数据分析 数据运营 文案 新媒体 新媒体运营 案例分析 活动策划 活动运营 活动运营方案 用户研究 用户运营 电商 直播带货 直播短视频 短视频 私域社群 策略 网络营销 职场 职场生涯 营销 行业动态 资料下载 运营数据 运营方案
近期文章
  • 淘系运营21天速成班(更新24年7月),0基础轻松搞定淘系运营,不做假把式
  • AI自动生成短视频和图文课程,全方位手把手教学
  • 外贸线上实战训练营,拆解外贸的底层逻辑,打破你对外贸的固有认知
  • 拼多多日销千单训练营,从0开始带你做好拼多多,让日销千单可以快速复制(更新24年7月)
  • 艾敏19天小红书涨粉变现特训营-第7期,快速学会小红书涨粉,月入十万轻松变现!
资源库

本站提供各类源码、模板、小程序、IT视频等资源,本站所有源码不保证没有任何BUG,源码也仅供有技术能力的开发人员学习研究之用,商用请去官方购买正式商用版!

快速导航

  • 个人中心
  • 标签云
  • 网址导航

关于本站

  • VIP介绍
  • 客服咨询
  • 推广计划

联系我们

如有BUG或建议可与我们在线联系或关注公众号学习交流。
Copyright © 2017 - 2022 413Z.COM. All RightsReserved.微推客 版权所有 未经允许禁止建立影像
鲁ICP备2021021744号-1
  • 首页
  • 用户中心
  • 会员介绍
  • QQ客服
  • 首页
  • 分类
  • 会员
  • 我的
资源库