把UI图里的小图标制作成icon,Logo字体应用执行

Logo字体 VS 百事可乐图——Logo字体选用施行

2017/04/05 · HTML5 · 1
评论 ·
图标字体

原版的书文出处:
人人网FED博客   

正文介绍使用Logo字体和SVG代替7-Up图的主意。七喜图是贪求无厌网址平日接纳的一种本事,不过它有短处:高清屏会模糊、无法动态变化如hover时候反色。而利用Logo字体能够圆满化解上述难点,同一时候持有宽容性好,生成的公文小等优点。

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

     
一个相互非常多的UI图里面只怕会有为数不少小图标,日常可用sprites图将三个小Logo弄成一张大图,恐怕别的的法子,各样方法的比较可参见博主的别的一篇博客使用css3新属性clip-path制作小Logo,本文深远研讨使用icon-font的的制作方法:在PS里面导出svg,制作字体Logo。这种办法既有sprites图不需求浏览器发数十二回呼吁的独到之处,也是有选取clip-path/svg矢量无损的亮点,何况帮忙IE6及以上。

      使用sprites图能够自动用PS将多个小图标放至一张图:

     
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表示那一个Logo就好了。

      依照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里面原来一样大小的书体Logo必要设置分化的的字体大小。而利用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并且图标自个儿就相当的小时,在文件大小上,icon-font比sprites图的优势并不通晓。当Logo扩展到19个,即把下面的Logo再导入贰遍,现制作的icon-fonts大小为:

     
18个icon-font的最大svg格式的为13kb,最小的为4.1KB,sprites图为6KB,考虑到svg格式的并不太会也许被浏览器下载,
如下图所示。所以在文件大小上,icon-fonts如故比sprites图有优势的,假使Logo个数相当少的话差距十分小。假如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弄成一张大图,或许…

雪碧图

百事可乐图实例:天猫PC端

永利澳门游戏网站 2

将多张小图放至一张大图

采纳的时候,通过background-position调治展现的职位,如下图所示:

永利澳门游戏网站 3

Pepsi-Cola图的选用办法

接纳Sprite图独一的亮点,能够说正是削减浏览器的伸手次数。因为浏览器同一时间能够加载的能源数是听天由命的,IE
8是6个,Chrome是6个,Firefox是8个。为了印证,写了以下html结构:(那部份固然有一点跑题,不过很要供给追究一下)

永利澳门游戏网站 4

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

接下来在Chrome的开拓者工具里面包车型地铁Timeline能够看见Chrome确实是6个6个加载的,每趟最多加载6个:

永利澳门游戏网站 5

Chrome同时最多加载能源数为6个

7-Up图的制作方法能够用node的多少个的包css-sprite,十一分地点便。只要将图标做好,放到相应的公文夹里面,写好布局文件运转,即可转移对应的图样和css,没有必要本身手动去调动职分等css属性。详见css-sprite

唯独,使用7-Up图存在不可制止的劣势

七喜图的缺点

高清屏会失真

在2x的设备像素比的荧屏上举个例子mac,如若要达标和文字一样的清晰度,图片的上升的幅度要求实际呈现大小的两倍,不然看起来会相比较模糊:读者可以相比较左侧文字和右边图片里文字的清晰度

永利澳门游戏网站 6

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

专程是今后手提式有线电电话机绝大部份是高清屏了,例如iphone 6 plus的分辨率抵达了1916 *
1080,所感到了高清屏,使用七喜图恐怕要预备两种条件的图样。

7-Up图不便于变化

7-Up图是一王斌态的图形,当她转移的那天就决定了他要以什么样的点子展现,因而笔者无法动态地改动她的颜料,不可能让他变大(只怕会失真),不可能像文字同样加叁个影子效果等等。举个例子下边包车型客车美食做法,hover可能选中的时候反色:

永利澳门游戏网站 7
永利澳门游戏网站 8

当选只怕hover时反色

或许是某一天UI要换颜色、某一天高管挂了,为表哀悼,为个厂商的网址要换个枣红调。使用雪碧图时,全体的Logo都得重新创设。

选择Logo字体能够健全化解地点的难点

图标字体icon font

Logo字体正是将Logo作成一个字体,使用时与普通字体无差别,能够安装字号大小、颜色、发光度等等,方便变化,最大亮点是全体字体的矢量无失真特点,同不经常候能够相称到IE
6。还也许有多个优点是生成的公文非常小,217个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:某些Logo是多个图层组成的

一伊始不明白,所以比较笨的措施是各自生成几个svg之后,再去手动去联合svg。其实PS有二个统一形状的职能,选中八个样子后,右键“合併形状”:

永利澳门游戏网站 18

使用PS合并多少个形状图层

发表评论

电子邮件地址不会被公开。 必填项已用*标注