提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
引语
最近开始看到一系列关于图标绘制的文章,而我之前都是拿来主义居多。看到UI中国&稻壳儿图标征集活动,就想着看了文章,get到知识要点,可以实操下,顺便参与图标设计活动,输出一套完整的作品。
下面也相当于我的学习总结,欢迎参阅,也希望各路大神能予以指点,期待大家的点评!
图标设计-活动背景
UI中国和wps稻壳儿联合推出图标征集活动!本期图标主题关键词是“总结”,风格自定,主题统一,20个应用于PPT中的图标。
详细请戳地址:http://talk.ui.cn/detail/3849
图标设计-七步法(以本次总结图标设计为例)
一、围绕主题 头脑风暴 确定设计内容
了解完任务的背景,作品的要求。第一步就是根据主题:总结,通过头脑风暴来挖掘设计想法,摸索自己想要做的东西,确定设计内容(即图标名称)。对于PPT总结图标,我分为三个部分:一是总结的思路,二是工作的总结,三是生活的总结。
二、根据主题/产品风格,找参考
风格自定没有要求,思考做什么风格的好呢?灵感并不是凭空想来的,而是多看,学会挑选不同的参考,取其精华,融合到自己的设计中。图标也一样,没想法,这一刻不如打开花瓣或各类设计素材网站(iconutopia、iconfont、iconfinder、iconmonstr.......)搜索关键词获取灵感。
你可以搜索【总结PPT】【图标名称】【图标】【图标风格】......等等。目的就是找到想要做的图标风格、配色参考、轮廓形状等。大致地搜集一番。好作选择,做到心中有数。
2.1、找轮廓形状
每个【图标名称】用什么来体现?先找下现有的轮廓形状表现方式,搜索的时候,多进行联想(采用头脑风暴),搜多些好的参考。
2.2、图标风格
图标的风格大类有三种:一是线性图标、二是面性图标、三是线+面性图标;每个类里还有具体的表现方式,想要做哪种?先要知道图标有哪些风格?再来选自己想做,符合产品,符合主题的!
风格一:线性图标
风格二:面性图标
风格三:线+面性图标
2.3、配色参考
在搜集参考的时候,也可以留意下好的配色。
三、提炼图形关键词
当我们通过上面的步骤,对于图标【轮廓形状】【风格】【配色】有了一个构思。现在就要一一落实每个图标的图形关键词,为了避免想法固定在原有思维上,可以多联想(发散关键词),根据使用的场景(总结PPT)选择最核心的图形关键词。
四、定参考样式
4.1 定【轮廓形状】
根据图形关键词,再仔细搜罗了每个图标的轮廓的表现方式,从中选出几个好的,取其精华,变换为自己想要的。(搜索到的素材和元素,结合所处环境及产品定位,一定要再设计,有自己的思考,才属于自己的成果。)
4.2 定【风格】
根据使用的场景(即总结工作的PPT里),商务,奢华,简洁,活力等都适合,再是结合自己的想法,想做哪种类型的,符合都可以做。那我就挑选了MBE风、描边风、实色渐变风、线性渐变风。
4.3 定【配色】
一、线性-渐变——蓝色+紫色,简洁特色;
二、MBE风——蓝色系+红色+黄色,积极有活力;
三、描边风——金色+绿色,奢华,高大上;
四、实色-渐变风——蓝色系+黄色,商务风;
五、绘制图标
【重头戏】有了以上的充分构思,参考,想法已成型,就到了着手绘制的时候了。先绘制出一个图标,定好风格,配色后,再进行其他的图标图形的一一绘制。
5.1 围绕图标特性,提炼参考要素
到已建立的视觉规范参考线中绘制,保持其视觉【统一性】。绘制图标,提炼参考要素过程中,注意是否简洁【简洁性】,与品牌是否呼应【品牌性】,是否可识别【识别性】,是否注意细节【严谨性】等等。
5.2 融合
博采众长,为自己所用;
5.3 风格&配色调整
多风格转化:四个风格都要做。怎么快速做出来,方便!我是先做第一个图标,并调好四种风格颜色的图标先。接着再一个个风格做一整套做下来。变换的规则也明了,做时就快速了。
先做20个实色描边风图标,形状,再来变化。
六、图标自检
为了避免修改多次,一开始就注意把握好图标的特性,规避错误。这一步的自我检查,就好好再审视一番即可。如若不是,这一步则需一一检查是否符合图标特性:【识别性】【品牌性】【统一性】【简洁性】【延展性】【严谨性】(具体详看后续的思维导图中)。
再是把绘制好的图标,放在实际界面中做比较,是否和谐,统一。
七、整体细节调整
针对以上自检存在的问题,加以修改,做到整体达到一致的视觉大小和视觉平衡......符合图标特性。越到后面越需要我们的耐心和细心调整,达到更好的效果。
八、完成&总结
最终完成啦!每完成一项新的项目,新的任务等等,都可以多做总结,多反思,吸取这次经验,下次怎么可以做的更好!我的图标还少了自检,跟调整,后期还需完善下。
结语
凡是多尝试,不要被自己的思维束缚住。我之前也觉得不会画图标,也觉得不会画画。但这是设计师需具备的能力,也想要有这样的能力,那么就动手去做吧,做的过程中学习总结,收获自己的经验,回过头来看,还是做到了,做的还很不错,是不是很有成就感呢。
感谢以下学习教程,才有我以上的学习总结以及思维导图归纳,如果有不清楚的,也可到文章底部,戳原文看看!
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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册