欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

一组图标做出9个风格,实战案例让你也能学会!

发布时间:2018:01:19 13:09:32 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1156个文字,预计阅读时间3分钟
导语
在前边的文章中我们已经全方位立体式的讲解了系统图标的相关知识点。即讲到了系统图标的设计风格,也讲到图标设计的栅格体系。之前我们都是纸上谈兵,那么我们今天就来实践一

  在前边的文章中我们已经全方位立体式的讲解了系统图标的相关知识点。即讲到了系统图标的设计风格,也讲到图标设计的栅格体系。之前我们都是纸上谈兵,那么我们今天就来实践一下,毕竟实践才是硬道理。

  编者按:iOS的系统图标的栅格系统如何定制呢,这篇文章就来独家揭秘iOS系统图标的栅格系统定制的奥秘。→《UI 新手福利!iOS系统图标栅格系统全方位解密》

  我们通过实际案例讲解如何设计具有独特气质的系统图标风格。我们在同一套图标的基础上,,通过变换不同的设计手法来变化图标风格,真的都是图标设计干货。

  系统图标实例教程

  1. 首先我们打开PS的编辑,选择首选项,然后打开参考线选项,我们设定网格间隔为44px,也就是ios系统中标准图标的大小。然后设定子网格为8px。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  2. 新建一个800*800px的画布,按快捷键 Ctrl+” 键调出刚才设定的辅助线。现在每个方格是44*44px。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  3. 打开上篇文章中推导出来的系统图标栅格系统作为设计图标的参考。这里考拉老师为大家提供了iOS系统图标栅格系统的下载地址,自行下载即可。(下载链接:http://pan.baidu.com/s/1dGFskZv 密码:d30b)分享的系统栅格体系是ai文件,请大家用AI打开,然后选择栅格文件ctrl+c复制至PS,ctrl+v然后选择智能对像选项。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  

一组图标做出9个风格,实战案例让你也能学会!

 

  4. 这次我们选择UC头条的图标作为原形进行重新设计。选择UC头条的icon作为原型的原因是,5个图标比较有代表性,分别是圆形图标、竖长形图标和异性图标。唯独还缺一个正方形图标,所以我们把第一个首页图标换为一个正方形的咨讯图标。这样我们就能够在同一套图标中对比5种不同形状的图标设计。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  

一组图标做出9个风格,实战案例让你也能学会!

 

  风格设计1

  首先我们先运用布尔运算做一个套方正的图标,线条为2px,图标边角都采用直角的设计方式,给人方正硬朗的感觉。我们把这个图标风格作为基础造型,下边我们将在这个图标风格上进行不断地变化,打造出各种不一样的设计风格。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  风格设计2

  我们在风格1的基础上优化尖角为圆角图标。圆角大小设计定为4px,瞬间图标的感觉就变得圆润,亲切了很多。这种风格也就是市面上最常用到的系统图标设计风格。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  风格设计3

  在风格2的基础上我们加粗线条为3px的视觉风格。由于线条粗细的调整,整套图标的感觉已经比较粗壮有力,给人非常可靠稳定的感觉。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  风格设计4

  继续加粗线条为4px的视觉风格,此时图标已经十分粗壮,但是由于是搭配了圆角的设计,整套图标反而给人感觉多了一点点可爱的感觉。这个图标造型基本就是UC头条的图标设计风格了。当然由于图标的加粗,我们发现订单图标内部的横杆视觉上已经比其他图标看起来更重,所以在这种时候我们就将图标内的横杠适当的删减一个,以保证图标的整体视觉一致。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  风格设计5

  我们继续在风格3的基础上将每个icon进行断点,形成断线风格。注意断点的位置,一般的是在右侧或图标下方,一般不会出现在左上侧和图标中心位置。这时图标多了一个独特的特性,就是断点。一个小小的变化就能呈现不同的视觉感觉,看起来更加的与众不同了。

  

一组图标做出9个风格,实战案例让你也能学会!

 

  风格设计6

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:你了解风靡网页设计领域的「开放式布局」嘛?

下一篇:浅谈“以目标为导向”的交互设计(三)

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信