>

把UI图里的小图标制作成icon,图标字体应用实践

- 编辑:至尊游戏网站 -

把UI图里的小图标制作成icon,图标字体应用实践

Logo字体 VS Sprite图——Logo字体采行

2017/04/05 · HTML5 · 1 评论 · Logo字体

原来的作品出处: 人人网FED博客   

本文介绍使用Logo字体和SVG取代7-Up图的办法。Pepsi-Cola图是无数网址经常利用的一种技巧,可是它有难题:高清屏会模糊、无法动态变化如hover时候反色。而使用Logo字体能够健全消除上述难题,同时全体宽容性好,生成的文书小等优点。

把UI图里的小Logo制作成icon font,uiicon

      贰个互为相当多的UI图里面恐怕会有过多小图标,日常可用sprites图将几个小图标弄成一张大图,或然别的的艺术,各类法子的可比可参见博主的其他一篇博客使用css3新属性clip-path制作小Logo,本文深远座谈使用icon-font的的制作方法:在PS里面导出svg,制作字体图标。这种办法既有sprites图没有供给浏览器发数次伸手的独到之处,也可能有选用clip-path/svg矢量无损的亮点,何况协助IE6及以上。

      使用sprites图能够自行用PS将七个小Logo放至一张图:

      sprites图的劣势是不是矢量的,在适配布局里,在伸缩时大概会失真。而采用icon fonts是矢量放大无损的。

      接下去介绍制作icon fonts的措施。

      1. 内需设置PS、AI

      2. 下载一个PS的台本:PSD to SVG,依据内部表达的点子,将脚本放到PS的脚本目录:Adobe Photoshop/presets/scripts,重启PS。

      3. 将图层里面的icon形状图层复制到叁个新文书档案,并将图层重命名称为.svg后缀结尾。弄成svg结尾主若是为了脚本识别哪些图层要扩充更改。注意图层命名最佳用字母数字和下划线,不然大概会出难题。

      4. 实行文书->脚本->PSD to SVG脚本,恐怕会唤醒未有保存文书档案,所以进行前先把新建的图层保存为三个文本。

      6. 实施完脚本后会在psd所在的目录生成八个文件,七个svg和叁个ai

      7. 用AI张开生成的ai文件,开掘唯有左下角有二个点来得出来了,如下图左呈现,当把鼠标放上去的时候发现那么些path是存在的,只是没突显出来。

      8. 所以在AI里面把它填充一下,把突显出来的部份填充成浅灰褐,然后另存为svg:File->script->saveDocs as Svg

图片 1

       9. 接下去,依靠icomoon,制作字体。张开icommon(要是打不开,得利用代理因为那网址使用了谷歌(Google)的一对劳务),点击右上角的Import Icon开关,导入上面保存的svg文件。

       icomoon就能跳到select页面,选中刚刚导入的Logo:

      再点击右下角的Generate Font:

      跳到了生成好的icon页面,点击get code:

      观看它的运用代码,开掘这些Logo被拆成了6个span表示6个path,还要调解它们的区间。那不是想要的结果,理想的结果应该是假设多个span表示那几个图标就好了。

      依照icomoon的交给的提醒:

To avoid multicolor glyphs, reimport your SVG after changing all its colors to the same color.

      开采是由于各样部份的颜色不相同导致的,下边安装没有显得出来的其余5个部份和已经展现出来左下角特别点的颜色分化,于是把它们调成同样的。

      这里运用linkscape进行编辑,因为linkscape能够向来编辑svg源代码,越来越直观,展开用PS生成的还没改过的svg文件:

       能够见到,之所以会没展现出来,是因为fill属性设置成了none,所以把它们都改成和左下角那一个都同一的水彩:

      保存后上传到icomoon,再点get code,生成的字体便是全部的一个实体了:

      下载后展开,生成的字体文件放在了fonts目录下,相同的时间icomoon提供了demo,使用时,通过多个@font-face导入字体文件:

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?3hb5tb');
    src:url('fonts/icomoon.eot?3hb5tb#iefix') format('embedded-opentype'),  /*为了支持低版本的IE*/
        url('fonts/icomoon.ttf?3hb5tb') format('truetype'),
        url('fonts/icomoon.woff?3hb5tb') format('woff'),
        url('fonts/icomoon.svg?3hb5tb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

     假若没有须要协理ie8及以下,能够像上面的示范同样用叁个before或许after的伪类,假设必要的话,就在html文件之中用实体代码吧,比如地方的菜单按键是:



      当然也足以用icommon提供的大度免费的Logo和索求效果,可是使用那一个Logo的短处是大小只怕是不一样的,导致在UI里面原来同样大小的书体图标需求安装差异的的字体大小。而利用UI图制作的svg大小比例就能够邻近UI图,无需设置两个font-size。

      须要注意的是,若是之后还要再导入新的Logo,需求在原来的根基上加上,icommon帮衬导入project,将地方的下载的包里面包车型客车selection.json导入就能够。假如把在此以前的icon和新的icon再导入贰回,会招致后面包车型大巴icon的编码产生变化。

      下边使用了用AI/linscape的情势改良PS导出的ai/svg文件,也得以一直用文件编辑器修改svg文件。

      有时,或者需求手动调度下svg的结构,举例地点的寻觅框,在PS里面设计员是画了七个圆和一条线,如上边所示:

<svg version="1.1" width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 外面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0z"/>
<!-- 里面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

     假如七个圆的fill颜色都设置成同样的深草绿色的话,那么生成的公文是那般的:

      里面特别圆的fill属性的功力导致放大镜中间被填充了,因而供给手动改一下,将八个圆放到同三个path,那样围起来的门径正是二个环:

<svg width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 把两个圆放到一起形成一条封闭的路径,即一个环 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0
    M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

      生成的放大镜就屡见不鲜了:

      还会有的Logo恐怕是由多个图层组成的,这年需求各自生成svg,然后嵌入一起,用Inkscape或ai调下相对地点。这里供给点svg的学问,能够参照MDN上的svg教程。

      最终再比较下大小,把上边第一张sprites图里面包车型客车9个小Logo都制作成icon fonts,生成的文件大小为:

      最大的为6.6KB,小的为2.6KB,而地点生成的sprites图为7.1KB,用tinypng压缩后为3.0KB。能够看看,假设唯有多少个Logo并且Logo本身就极其刻钟,在文件大小上,icon-font比sprites图的优势并不精晓。当Logo增至贰13个,即把上边的图标再导入一次,现制作的icon-fonts大小为:

      二十三个icon-font的最大svg格式的为13kb,最小的为4.1KB,sprites图为6KB,想念到svg格式的并不太会大概被浏览器下载, 如下图所示。所以在文件大小上,icon-fonts还是比sprites图有优势的,如若Logo个数没有多少的话差距比非常的小。假若图标须要出示得极大的话,icon fonts的优势就很显眼了。

IE6 仅支持 Embedded OpenType(.eot) 格式。
IE7 仅支持 Embedded OpenType(.eot) 格式。
IE8 仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5 支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Safari 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Opera 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

来自w3 help

      使用sprites图的别的贰个毛病是,在运动端低配置的道具,大概会给内部存款和储蓄器和CPU带来十分大的压力,要是sprites图太大的话。而icon font的最大优点是矢量无损,短处是不得不接济单色的Logo,因为它是二个不可枚举的书体,还会有在制作上稍麻烦。

 

参考:

      1. 应用css3新属性clip-path制作小Logo

      2. icomoon,制作icon font的在线工具

      3. PSD to SVG

 

 

 

font,uiicon 八个互相比相当多的UI图里面恐怕会有那贰个小Logo,平日可用sprites图将三个小Logo弄成一张大图,或许...

雪碧图

Coca Cola图实例:TaobaoPC端

图片 2

将多张小图放至一张大图

动用的时候,通过background-position调节彰显的岗位,如下图所示:

图片 3

七喜图的应用方法

行使百事可乐图独一的独到之处,能够说正是压缩浏览器的央浼次数。因为浏览器同有时候可以加载的财富数是必然的,IE 8是6个,Chrome是6个,Firefox是8个。为了求证,写了以下html结构:(那部份即便有一些跑题,可是很要须要斟酌一下)

图片 4

验证Chrome同时加载个数的html–比非常多张相当的大的图纸

然后在Chrome的开辟者工具里面包车型客车Timeline能够观望Chrome确实是6个6个加载的,每一遍最多加载6个:

图片 5

Chrome同期最多加载财富数为6个

Coca Cola图的制作方法能够用node的叁个的包css-sprite,十二分地惠及。只要将Logo做好,放到相应的文书夹里面,写好布置文件运维,就能够转移对应的图片和css,没有须求本人手动去调解地点等css属性。详见css-sprite

但是,使用百事可乐图存在不可制止的劣势

Coca Cola图的缺欠

高清屏会失真

在2x的道具像素比的显示屏上比方mac,假使要高达和文字同样的清晰度,图片的宽度须求实际呈现大小的两倍,不然看起来会相比较模糊:读者可以比较左侧文字和右边手图片里文字的清晰度

图片 6

入手图片里的文字比左边字体的文字模糊

非常是现行反革命手提式有线电话机绝大部份是高清屏了,举个例子iphone 6 plus的分辨率到达了1916 * 1080,所认为了高清屏,使用Sprite图可能要企图多种尺码的图纸。

Sprite图不实惠变化

Sprite图是一徐婧态的图片,当她转移的那天就尘埃落定了他要以什么样的方法展现,由此笔者不能够动态地改换她的水彩,不能够让他变大(或然会失真),相当的小概像文字相同加三个阴影效果等等。比方上边包车型地铁菜系,hover恐怕选中的时候反色:

图片 7
图片 8

当选或然hover时反色

照旧是某一天UI要换颜色、某一天老董挂了,为表哀悼,为个厂商的网站要换个琥珀色调。使用Coca Cola图时,全数的Logo都得重复制作。

运用Logo字体能够全面解决地点的主题素材

图标字体icon font

Logo字体正是将Logo作成一个字体,使用时与平时字体一点差距也未有,能够安装字号大小、颜色、反射率等等,方便变化,最大优点是具有字体的矢量无失真特点,同不平时候能够同盟到IE 6。还会有多个独到之处是变化的文件非常小,2十七个Logo的生成的ttf字体文件才41KB

图片 9

多个Logo字体里面包车型地铁要素

什么样创设Logo字体

亟需筹划PS和AI,展开UI图,选中Logo的图层,平日它是设计员画的贰个样子:

图片 10
图片 11

  1. 当选Logo的图层

接下来实行:文件->导出->Illustrator,如下左图所示,将生成三个AI文件。用AI张开刚刚生成的公文,履行File->Scripts->SaveDocsAsSVG,如下右图所示,将生成三个SVG文件:

图片 12图片 13

  1. 左: PS里导出AI文件,右:AI里面导出SVG

接下去,依靠叁个第三方的网址制作Logoicomoon.io,步向app页面,选择导入icon,将刚刚生成的svg上传上去

图片 14

  1. 上传到icomoon

终极生成字体并下载:

图片 15

  1. 变动二种标准的字体

行使的时候经过@font-face引进,依照Logo的编码就能够在页面中动用了。

只是在实质上的操作中并不曾像下面说的那么弹无虚发,会遇见重重截留,小编也是寻觅了比较久才总计了一套实用的经验,那也是任何介绍Logo字体的学科未有聊起到的,看别的众多课程可能会在实质上采取中境遇重重坑。

坑1:Logo字体只援助单路线

万般状态下,设计员在制作Logo的时候是用多个渠道组合出来的,在上头的导出的svg也是包涵八个路子的,张开svg文件就能够清楚,它是由多少个path组成的:

图片 16

导出的svg文件是由多少个path组成的

唯独字体只扶持单路线, 三个消除办法是手办修改svg文件,把多少个path合併成二个,那将在求对svg格式相比领悟。可是这种艺术吃力不讨好,只适用相比简单的情形,复杂的Logo最后合併的功用很难成功和原先的一模二样。

有多少个相比智能的章程,便是应用PS的集结形状组件的效能:

图片 17

应用PS合併形状组件

如此子生成的svg就是单路线的,不常候会遇见“合併形状组件”的菜单项是置灰的,只要把图层的小眼睛点掉再展开就足以了(只怕恐怕本人正是单路线的)。

坑2:有些图标是四个图层组成的

一开头不掌握,所以相比笨的点子是分别生成多少个svg之后,再去手动去联合svg。其实PS有二个联结形状的功效,选中七个形状后,右键“合併形状”:

图片 18

行使PS合併多个模样图层

坑3:生成的SVG填充可能被置为none

不常会高出生成了svg,不过上传上去是空的,检查一下svg文件开掘是fill被置为none了,如下所示:

图片 19

生成的svg是fill:none

这年必要手动改一下svg文件,把fill:none改成随意贰个色值就可以,如fill:#000000.

采取三个剧本自动导出svg

在上头的操作中,都以要先实践PS导出再到AI里面实行导出,其实有三个剧本,能够自动推行这两步:PSD to SVG, 扶助PS CS6,不匡助CC,还足以把那些本子设置三个火速格局,用起来非常便利。使用这些剧本供给在意的是图层的命名不可能带普通话,不然会出错,所以普通把图层复制到二个新的文本之中实行操作。

图片 20

动用PSD to SVG扩大有帮忙

未来主要说下,Logo字体的应用和一些注意事项

Logo字体的接纳

透过font-face导入自定义字体,能够参照字体下载后的demo。然后,把具有应用Logo字体的span/a标签都加二个.icon的类,.icon类设置font-family为font-face定义的书体名

JavaScript

@font-face { font-family: 'icon-font'; src: url('fonts/icon-font.eot'); src: url('fonts/icon-font.eot#iefix') format('embedded-opentype'), url('fonts/icon-font.ttf') format('truetype'), url('fonts/icon-font.woff') format('woff'), url('fonts/icon-font.svg#icon-font') format('svg'); font-weight: normal; font-style: normal; } .icon{ font-family: "icon-font": }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@font-face {
    font-family: 'icon-font';
    src:    url('fonts/icon-font.eot');
    src:    url('fonts/icon-font.eot#iefix') format('embedded-opentype'),
        url('fonts/icon-font.ttf') format('truetype'),
        url('fonts/icon-font.woff') format('woff'),
        url('fonts/icon-font.svg#icon-font') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
.icon{
    font-family: "icon-font":
}

最后,各样Logo使用它在对应的编码大概HTML实体:

图片 21

Logo字体的三种采用办法

中间,e9d3是近日Logo在此个字体里面的十六进制编码。在日常字体里,0的编码是0x16,即48,为0的ascii编码。

在采纳进度中碰着的坑:

1. webkit浏览器会在加缘加粗1个像素

平时来讲,读者可找下分别:

图片 22

右边手的Logo边缘多了二个像素,左侧是平常的

本条难题在区间异常的小的时候就能够比较明显,例如上海体育场合第一个Logo中间。消除文案是加三个font-smoothing的性质:

CSS

.icon{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

1
2
3
4
.icon{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

2. 介意缓存

此起彼落加了新的Logo字体,倘诺不做管理的话,已经加载过的浏览器或许会有缓存,导致新的图标字体不会再也下载,所以要求管理那几个难点。最简易的便是在上边的@font-face导入的url里面增添贰个本子号的参数:

JavaScript

src: url('fonts/icon-font.eot?hadf22');

1
src:    url('fonts/icon-font.eot?hadf22');

或然更干净的:退换文件名、路线名。

3. 多个人搭档

icomoon无需付费版的数目是积累在浏览器的本地数据库的, 商业版交点钱能够把数据放在云端,进而完结多少人搭档。无需付费版也得以完结多少人合作,方法是将旁人生成的字体svg导进去再增添,生成新的svg字体,一样旁人要再上传的时候先上传那些svg。商业版使用的时候必要专一多少人同不常候操作的情景,有非常大大概会同不平时间生成一样的编码。Ali也提供了多少个在线的Logo字体制作网址:

图标字体的败笔

Logo字体有二个明白的缺欠,不帮忙多色Logo。因为它是贰个字体,决定了它不得不是单色的。如若实再是要选取多色的Logo,以致带一些特殊效果的那就采纳SVG吧。

组成使用SVG

对于多色的Logo,能够在页面插入多少个SVG:

 图片 23

左边的location的Logo便是利用了svg,效果比直接贴一张PNG好过多

SVG的兼容性,除了IE 8不扶助,其它的都幸而。况兼今后不计其数新类型都不再包容IE 8了,不然连个border-radius都用持续。

有二种选取SVG的格局:

  1. 直接copy到页面

举个例子,后端倘诺用的是JSP,那么能够依赖include成效:

JavaScript

<%@ include file="loc-svg.jsp"%>

1
<%@ include file="loc-svg.jsp"%>

loc-svg.jsp里面包车型地铁内容正是svg:

图片 24

借助jsp嵌套svg

那样做的宿疾是浏览器不能缓存,同一时间会阻止页面包车型客车加载。优点是由于是内联的,能够一直用CSS调控svg的体裁

  1. 使用embed/object

XHTML

<embed src="loc.svg" width="100" height="200"/>

1
<embed src="loc.svg" width="100"  height="200"/>

除了那个之外,还足以选取img标签,将svg的门道作为src属性,这种情势的欠缺是不能用CSS调控样式。还足以转变为base64的措施。越来越多应用SVG的措施参见:Using SVG

当小个的SVG过多的时候,大概要考虑把多个小的SVG合併成叁个SVG,就疑似Coca Cola图那样:

  1. 合并SVG

通常来讲所示:通过三个个的symbol,将八个svg合在了合伙,同时将各样symbol svg定义二个id,使用的时候会用到

XHTML

<svg> <symbol viewBox="0 0 101.5 57.9" id="active-triangle"><path fill="#15c0f1" d="M100.4.5L50.7 57.1 1.1.5h99.3z"/> <symbol viewBox="0 0 101.5 57.9" id="logo"><path fill="#15c0f1" d="M120.4.5L50.7 57.1 1.1.5h99.3z"/> </svg>

1
2
3
4
<svg>
    <symbol viewBox="0 0 101.5 57.9" id="active-triangle"><path fill="#15c0f1" d="M100.4.5L50.7 57.1 1.1.5h99.3z"/>
    <symbol viewBox="0 0 101.5 57.9" id="logo"><path fill="#15c0f1" d="M120.4.5L50.7 57.1 1.1.5h99.3z"/>
</svg>

运用的时候经过外链的方法将svg引到页面上,如要用到地方定义的logo,通过“文件名#ID”的方式:

XHTML

<svg viewBox="0 0 100 100"> <use xlink:href="icon.svg#logo"></use> </svg>

1
2
3
<svg viewBox="0 0 100 100">
    <use xlink:href="icon.svg#logo"></use>
</svg>

只是蛋疼的IE不扶助外链,可是有人写了个插件,能够让IE援救,原理是检验到浏览器不协助外链的时候就将其外链替换到相应的svg内容,详见svg for everybody

使用SVG的还有highCharts和d3.js等。

从那之后,整个工艺流程表明完成~ Logo字体和SVG结合使用,进步网址的高清体验。

1 赞 2 收藏 1 评论

图片 25

本文由门户名站发布,转载请注明来源:把UI图里的小图标制作成icon,图标字体应用实践