连日来有些空闲,趁着这闲余时间,我尝试亲自制作一些Font-Icon,让以后可以运用到工作中。但是基于本人水平有限,PS操作只能以非常基础来形容,而AI呢,根本就只会放大操作。在这过程真的非常感谢设计同事的帮助。

现在想完成以下图标转换成Font-Icon,图标以下所示。

  第一个Icon是一个小电视,命名为ico_tv,在设计师给的设计稿中,它已经是路径了,但是细看一下,这个ico_tv有三条路径,但是在网上的一些把svg转成Font-Icon的网站中(例如fontello ,但是icoMoon可以,如果使用的是icoMoon后面的合并路径可以忽略),它在转换的时候只需要一条路径,这就需要我们在PS中把它们的路径都合在一起。

Ico_tv的三条路径

  在PS中,把所以的路径合在一起,需要把路径选取好之后,点击上面的“路径操作按钮”,里面有4个选项,合并,减去,相交,去重,这4个效果就相当于集合的操作,我们想保留的是蓝色的部分,也是之后变成字体之后,着色的部分,而这里4条路径,分别是,ico_tv的外框,以及右边的3个小长方形,需要把小长方形的那部分去掉,这里的操作就选用“去重”。完成后,当点击按钮时候,路径都选中。

Ico_tv路径合成后

  打开AI,新建面板,350mmX350mm,在PS上选中所有的路径,拖拉到AI上,把路径放大到跟画板差不多大,填充颜色(iconMoon需要填充单一颜色,fontello则可以不填充,不过推荐最好有填充颜色,看着更为直观)。然后保持成为svg格式。

打开IcoMoon网页(我较多使用这个网站),在这里可以上传我刚刚绘制的ico_tv,还可以进行一些简单编辑。

上传icon的按钮

  最后导出Font代码,填写icon对应的Unicode编码,旁边会现在所对应的符号。点击download即可下载代码。最后展示如图。

  然而,如果给的设计稿里面的icon只是一个图层的话,就需要把它们转化成路径了。一般使用矩形工具那一列,把形状变成路径,还有钢笔工具,路径选择工具等,做图层那个icon的临摹。

制作font-icon有感的更多相关文章

  1. CSS3魔法堂:认识@font-face和Font Icon

    一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...

  2. @font-face制作Web Icon

    @font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...

  3. 教你如何制作饼干icon教程

    Hello,不露又和大家见面了,今天给大家带来的是一个可爱Q弹的icon~ 看起来像块饼干是吧~ 做起来非常简单哦,快打开PS一起躁起来吧. 先来看看效果图: 步骤1:打开PS,新建一个800*600 ...

  4. 字体图标 icon font

    Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...

  5. 再探@font-face及webIcon制作

    @font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉.随着 web 的急速发 ...

  6. 用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  7. 请用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  8. fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  9. WEB ICON 的探讨

    一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢 在线教程:用字体在网页中画ICON图标 http://www.imooc.com ...

  10. 响应式Web图形篇 —— icon fonts 的探析及应用

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...

随机推荐

  1. 软件授权协议有什么作用,例如GPL、Apache License、CDDL、EPL这些协议有什么区别?

    1.授权协议有什么作用:授权协议就是授予你使用或修改软件等权利,由于软件受到著作权保护,未经授权使用即是侵犯著作权,属于违法行为,所以同意或签署软件授权协议是你使用或修改软件的前提条件.既然是授权协议 ...

  2. cdn加速对门户网站产生的影响

    满意的用户体验是门户网站吸引和留住用户的必备条件.据统计,如果等待网页打开的时间超过8秒,将会有超过30%的用户放弃等待,造成严重的用户流失,降低了用户的体验度和忠诚度.门户网站内容涉及面多,涵盖文字 ...

  3. 关于ABAP事件的一张图

    事件: 这里有几组事件关键字 ,这些事件关键字在特定环境下控制ABAP/4 程序流. 逻辑数据库 是典型报表程序的外部流控制的中心点.如果将逻辑数据库链接到报表 程序,将导致显示选择 屏幕,并决定系统 ...

  4. iBatis自动生成的主键 (Oracle,MS Sql Server,MySQL)【转】

    iBatis的sqlMap配置文件的selectKey元素有个type属性,可以指定pre或者post表示前生成(pre)还是后生成(post). Oracle设置 <!-- Oracle SE ...

  5. POJ 3614 Sunscreen 优先队列 贪心

    题意 有C个奶牛去晒太阳 (1 <=C <= 2500),每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值,太大就晒伤了,太小奶牛没感觉. 而刚开始的阳光的强度非常大,奶牛都承受不住 ...

  6. iOS创建界面方法的讨论

    以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的.后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayout 的.再然后,领导给我发了个 Mas ...

  7. Anroid搭建一个局域网Web服务器

    前言   很多开发者看到这个标题表示很怪异,Android怎么可能搭建服务器呢?根本用不到呀,这个项目毫无价值.我表示很理解这一类的开发者,毕竟每个人的经验经历都是有限的. 必须要说说我们的用处(需要 ...

  8. WPF学习之资源-Resources

    WPF学习之资源-Resources WPF通过资源来保存一些可以被重复利用的样式,对象定义以及一些传统的资源如二进制数据,图片等等,而在其支持上也更能体现出这些资源定义的优越性.比如通过Resour ...

  9. Mybatis下配置调用Oracle自定义函数返回的游标结果集

    在ibatis和Mybatis对存储过程和函数函数的调用的配置Xml是不一样的,以下是针对Mybatis 3.2的环境进行操作的. 第一步配置Mapper的xml内容 <mapper names ...

  10. 父页面iframe自动适应子页面的宽高度

    <script type="text/javascript"> function load(){ parent.document.getElementById(&quo ...