你的位置:首页 > 软件开发 > 网页设计 > 制作font

制作font

发布时间:2016-03-03 09:00:03
连日来有些空闲,趁着这闲余时间,我尝试亲自制作一些Font-Icon,让以后可以运用到工作中。但是基于本人水平有限,PS操作只能以非常基础来形容,而AI呢,根本就只会放大操作。在这过程真的非常感谢设计同事的帮助。现在想完成以下图标转换成Font-Icon,图标以下所示。  第一个 ...

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

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

制作font

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

制作font

Ico_tv的三条路径

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

制作font

Ico_tv路径合成后

 

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

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

制作font

上传icon的按钮

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

制作font

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


 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:制作font

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录