恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何从零开始做一套图标?
0.0°
2018-06-22 原创文章 经验/观点 举报 3293 6 10 0

Image title


引语


       最近开始看到一系列关于图标绘制的文章,而我之前都是拿来主义居多。看到UI中国&稻壳儿图标征集活动,就想着看了文章,get到知识要点,可以实操下,顺便参与图标设计活动,输出一套完整的作品。

       下面也相当于我的学习总结,欢迎参阅,也希望各路大神能予以指点,期待大家的点评!

图标设计-活动背景


       UI中国和wps稻壳儿联合推出图标征集活动!本期图标主题关键词是“总结”,风格自定,主题统一,20个应用于PPT中的图标。


       详细请戳地址:http://talk.ui.cn/detail/3849

图标设计-七步法(以本次总结图标设计为例)

Image title


一、围绕主题 头脑风暴 确定设计内容

       了解完任务的背景,作品的要求。第一步就是根据主题:总结,通过头脑风暴来挖掘设计想法,摸索自己想要做的东西,确定设计内容(即图标名称)。对于PPT总结图标,我分为三个部分:一是总结的思路,二是工作的总结,三是生活的总结。

Image title



二、根据主题/产品风格,找参考

       风格自定没有要求,思考做什么风格的好呢?灵感并不是凭空想来的,而是多看,学会挑选不同的参考,取其精华,融合到自己的设计中。图标也一样,没想法,这一刻不如打开花瓣或各类设计素材网站(iconutopia、iconfont、iconfinder、iconmonstr.......)搜索关键词获取灵感。

       你可以搜索【总结PPT】【图标名称】【图标】【图标风格】......等等。目的就是找到想要做的图标风格、配色参考、轮廓形状等。大致地搜集一番。好作选择,做到心中有数。

2.1、找轮廓形状
       每个【图标名称】用什么来体现?先找下现有的轮廓形状表现方式,搜索的时候,多进行联想(采用头脑风暴),搜多些好的参考。


Image title



2.2、图标风格

       图标的风格大类有三种:一是线性图标、二是面性图标、三是线+面性图标;每个类里还有具体的表现方式,想要做哪种?先要知道图标有哪些风格?再来选自己想做,符合产品,符合主题的!

风格一:线性图标

Image title



风格二:面性图标

Image title



风格三:线+面性图标

Image title

2.3、配色参考
       在搜集参考的时候,也可以留意下好的配色。

Image title




三、提炼图形关键词

       当我们通过上面的步骤,对于图标【轮廓形状】【风格】【配色】有了一个构思。现在就要一一落实每个图标的图形关键词,为了避免想法固定在原有思维上,可以多联想(发散关键词),根据使用的场景(总结PPT)选择最核心的图形关键词。

Image title


四、定参考样式

4.1 定【轮廓形状】

       根据图形关键词,再仔细搜罗了每个图标的轮廓的表现方式,从中选出几个好的,取其精华,变换为自己想要的。(搜索到的素材和元素,结合所处环境及产品定位,一定要再设计,有自己的思考,才属于自己的成果。)

Image title


4.2 定【风格】

       根据使用的场景(即总结工作的PPT里),商务,奢华,简洁,活力等都适合,再是结合自己的想法,想做哪种类型的,符合都可以做。那我就挑选了MBE风、描边风、实色渐变风、线性渐变风。

4.3 定【配色】

       一、线性-渐变——蓝色+紫色,简洁特色;

       二、MBE风——蓝色系+红色+黄色,积极有活力;

       三、描边风——金色+绿色,奢华,高大上;

       四、实色-渐变风——蓝色系+黄色,商务风;

五、绘制图标


       【重头戏】有了以上的充分构思,参考,想法已成型,就到了着手绘制的时候了。先绘制出一个图标,定好风格,配色后,再进行其他的图标图形的一一绘制。


5.1 围绕图标特性,提炼参考要素


       到已建立的视觉规范参考线中绘制,保持其视觉【统一性】。绘制图标,提炼参考要素过程中,注意是否简洁【简洁性】,与品牌是否呼应【品牌性】,是否可识别【识别性】,是否注意细节【严谨性】等等。

5.2 融合
博采众长,为自己所用;

5.3 风格&配色调整
       多风格转化:四个风格都要做。怎么快速做出来,方便!我是先做第一个图标,并调好四种风格颜色的图标先。接着再一个个风格做一整套做下来。变换的规则也明了,做时就快速了。
      先做20个实色描边风图标,形状,再来变化。

Image title


六、图标自检


       为了避免修改多次,一开始就注意把握好图标的特性,规避错误。这一步的自我检查,就好好再审视一番即可。如若不是,这一步则需一一检查是否符合图标特性:【识别性】【品牌性】【统一性】【简洁性】【延展性】【严谨性】(具体详看后续的思维导图中)。

       再是把绘制好的图标,放在实际界面中做比较,是否和谐,统一。

七、整体细节调整


       针对以上自检存在的问题,加以修改,做到整体达到一致的视觉大小和视觉平衡......符合图标特性。越到后面越需要我们的耐心和细心调整,达到更好的效果。


八、完成&总结
       最终完成啦!每完成一项新的项目,新的任务等等,都可以多做总结,多反思,吸取这次经验,下次怎么可以做的更好!我的图标还少了自检,跟调整,后期还需完善下。

结语

       凡是多尝试,不要被自己的思维束缚住。我之前也觉得不会画图标,也觉得不会画画。但这是设计师需具备的能力,也想要有这样的能力,那么就动手去做吧,做的过程中学习总结,收获自己的经验,回过头来看,还是做到了,做的还很不错,是不是很有成就感呢。

       感谢以下学习教程,才有我以上的学习总结以及思维导图归纳,如果有不清楚的,也可到文章底部,戳原文看看!

Image title


01 我坦白,我是这么“抄”图标的          http://www.ui.cn/detail/349417.html
02 如何系统地设计界面图标                   http://www.ui.cn/detail/336889.html
03 UI设计中扁平图标绘制的终极指南      http://www.ui.cn/detail/356809.html
04 图标设计五维自检法                         http://www.ui.cn/detail/364052.html
05 如何系统的学习功能图标                  http://www.ui.cn/detail/362076.html


Image title


更新:2018-06-22

收藏

6人已收藏

CircleC

用心发现生活的美,无处不是设计!

  • 7

    作品

  • 8

    粉丝

  • 13

    关注

  • 萌小C的表情包&制作过程总结
  • 酷小K的表情包
  • 2019猪年大发
  • MBE插画总结-习作
相关标签
设计分享经验

    猜你喜欢

      2018-06-22 原创文章 经验/观点 举报 3293 6 10 0

      如何从零开始做一套图标?

      0.0°

      你确定要举报如何从零开始做一套图标?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录