矢量图标在设计中的应用和管理

2016-02-17 02:16 6 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的矢量图标在设计中的应用和管理,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - 平面设计 】

毕加索终生喜欢画牛。年轻时他画的牛体形庞大,有血有肉,威武雄壮。但随着年龄的增长,他画的牛越来越突显筋骨。到他八十多岁时,他画的牛只有瘳瘳数笔,乍看上去就象一副牛的骨架。那些牛的外在的皮毛、血肉全没有了,只剩一副具有牛的神韵的骨架了。

设计也同样,过去我们借助工具希望把我们的设计做的很饱满很逼真,通过渐变、高光、投影等手段把效果做的很绚丽,但是随着设计风格的推进,简约越来越受设计师们推崇,可能因为我们生活在一个嘈杂的社会,设计师们希望通过简化设计,去除一些无用的元素凸显产品主要功能为我们的科技生活带来一些宁静;

我们仿佛看到了大师画11副牛时思考的画面。简单真实简练;

矢量图标在设计中的应用和管理,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

图标设计

图标是网站、软件设计不可避免的涉及到元素,在过去各个大公司在图标设计上有自己不同的理解,微软的图标设计的原则是数位化,非真实生活中有的。苹果公司的图标设计更偏于写实。但今天他们对图标的表现风格却有了一些共识扁平化!虽然图标在页面、软件中的存在地位是勿用质疑的,但是设计师还是希望降低图标对内容的干扰,图标设计时设计师更注重图标形本身所能传达的含义,用户是否可以很直觉的了解图标形的含义。

矢量图标在设计中的应用和管理,PS教程,图老师教程网

科技带来的挑战

科技日新月异的今天,市面上各种分辨率、各种显示精度的显示设备层出不穷,在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求;如设计师为iphone 3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示(new ipad)上展现就不尽人意了。那这么多的显示设备,那么多的图标尺寸设计师难道要一个一个去优化去设计吗?

矢量图标在设计中的应用和管理,PS教程,图老师教程网

传统位图形式的图标应用使设计师在不同平台上花费很多重复的工作量,而且还未必能做到面面俱到。矢量图标技术在网站、app中的应用就显得尤为重要了;

矢量图标在设计中的应用和管理,PS教程,图老师教程网

矢量技术在图标上的应用

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

现在可以承载矢量图形,同时又可以在app、web上使用的主要有svg和我们熟悉的字体文件;在这里我们主要介绍后者图标字体;顾名思义图标字体是将图标以字体文件为载体在页面中展现,前段工程师可以通过控制字体的方式控制图标的大小颜色;

图标字体的特点:

1、高兼容性;因为是矢量格式所以图标在不同分辨率不同显示精度的显示设备下都不会出现模糊的情况;

2、易于控制;因为是字体格式,所以可以通过css控制图标的大小、色彩实现投影、浮雕等效果,也可以通过两个图标叠加方式的方式实现更多丰富的效果;

3、方便管理查询;由于图标字体的灵活调用并展现,我们在可以把他们集合展现在一个页面上,设计师或则前端工程师可以方便查询或预览部门效果;

4、文件非常轻量;一个项目如果只需要20个图标,一份图标字体文件的大小可能不超过15K。

5、减轻设计师的工作量;对于苦逼的设计师来说一个图标只要画一次,可以衍生出不同尺寸,那绝对是福音;

图标字体制作

首先是制作字体软件,大家可以使用Font Creator Program、Fontographer、FontLab Studio;我们这里主要介绍如何用FontLab Studio制作一个带有图标的字体,非常简单;

1、复制一个已在AI或ps里画好的图形,图形的路径必须是封闭的;

矢量图标在设计中的应用和管理,PS教程,图老师教程网

2、用fontlab打开一个字体,拷贝图形并替换某个文字图形,调整图形大小(以虚框为标准,大小不要超过虚框)

矢量图标在设计中的应用和管理,PS教程,图老师教程网

3、将制作好的图标导出ttf字体格式;

矢量图标在设计中的应用和管理,PS教程,图老师教程网

前端应用

第一步:使用font-face声明字体 @font-face {font-family: 'uxiconfont';src: url('uxiconfont.eot'); /* IE9*/src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('uxiconfont.woff') format('woff'), /* chrome、firefox */url('uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('uxiconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */}   第二步:定义使用iconfont的样式 .iconfont{font-family:"uxiconfont";font-size:16px;font-style:normal;}   第三步:挑选相应图标并获取字体编码,应用于页面
i class="iconfont"&#33/i

来源:http://www.tulaoshi.com/n/20160217/1577563.html

延伸阅读
现如今的读图时代决定了图在平面设计中是非常重要的,图大致可以分为两种,一种是照片,一种是图形,一个好图不仅能传递作品所要表达的信息,还可以提升设计作品的格调,这期文章我们就跟大家分析这方面的内容。
文 图/(北京黑光)程德喜 编者按:在人像摄影美姿设计中,要学会控制腿型首先要认识腿部的构成。标准的腿型,要求腿型要长且直,从侧面看没有明显的弯曲,基本接近直线。双脚并拢放松时,大腿、膝关节、小腿和脚踝都能够接触,而膝关节上下和脚踝的位置则有三个菱形缝隙,这种有张有合的下肢曲线,才会显出一种玲珑的美。 认识腿部构成 腿...
标签: CorelDRAW
  的确有这个必要研究一下了,只有这样才能综合运用两者的优势,互补缺点,完美自己的设计。 在CD中应用的点阵图一般都是采用“导入”命令,但有时候需要使用一些不规则的图象局部,或是羽化边缘的物体(有点象PS中的图层)来丰富我们的矢量图象,这时就需要使用一些特殊的方法了。 1 首先,CD是支持.psd格式的。导入CD的psd文...
扫描和描摹 真实的手绘并扫描插图是获得粗略风格作品的最简易方法。对于这项技巧来说 ,AI 的实时描摹和实时上色功能很棒。 步骤1 – 手绘 我通常是用铅笔绘图,完成以后再用墨水为插图上色。为插图上色能产生插图间的对比。因而更容易得到好的描摹效果。 步骤2 – 扫描 以 300 dpi 扫描图像。当描摹插图的时候,300 dpi 的画...
标签: PS PS教程
    何谓矢量图像?     矢量图像,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。既然每个对象都是一个自成一体的实体,就可以在维持它原有清晰度和弯曲度的...

经验教程

414

收藏

21
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部