注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易邮箱前端技术中心

汇聚最新最劲爆的前端技术

 
 
 

日志

 
 
 
 

webfont应用系列(一)位图如何转成矢量?  

2012-05-18 17:49:33|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最近在评估font-face是否可以用在邮箱的实际开发中,第一步就是做矢量图标(字体图标要矢量),如何把位图图标转为矢量?

1、用PS转为纯色:PS打开图标,上色(黑色),如果原图不是纯色,则需注意对边缘的处理。

位图如何转成矢量?webfont应用系列(一) - 网易邮箱前端技术中心 - 网易邮箱前端技术中心

 图一、用PS把图标处理成纯色

2、以eps格式导出:另存为,格式选择EPS。

位图如何转成矢量?webfont应用系列(一) - 网易邮箱前端技术中心 - 网易邮箱前端技术中心

 图二、以EPS格式导出

3、用AI打开,选择“对象”->“实时描摹”->“描摹选项”,在弹出框中设置“描摹选项”,参数如图所示:

位图如何转成矢量?webfont应用系列(一) - 网易邮箱前端技术中心 - 网易邮箱前端技术中心

 图三、“描摹选项”设置

点击对话框右上角的“描摹”按钮。

4、完成第三步之后,初看起来图标们没什么变化,但是细心的你可能会发现,顶部工具栏出现了“扩展”和“实时上色”按钮:

位图如何转成矢量?webfont应用系列(一) - 网易邮箱前端技术中心 - 网易邮箱前端技术中心

 图四、“扩展”按钮

点击“扩展”按钮,结果如图五所示:

位图如何转成矢量?webfont应用系列(一) - 网易邮箱前端技术中心 - 网易邮箱前端技术中心

 图五、“扩展”结果

5、矢量转换完成,简单吧!“右键”->“取消分组”,然后就可以选中具体的矢量图标制作字体了。

位图如何转成矢量?webfont应用系列(一) - 网易邮箱前端技术中心 - 网易邮箱前端技术中心

 图六、千呼万唤“矢”出来

备注:如图所示,位图转成矢量,效果不如人意,毕竟只是测试,如果正式环境还是要把矢量图画出来!

后续系列文章将介绍如何制作字体文件、如何调用字体文件、如何测试,敬请关注!

by Cava

  评论这张
 
阅读(2937)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017