当前位置:首页>设计文章>UI文章>实用教程!简单几步把LOGO变字体

实用教程!简单几步把LOGO变字体

今天学到一招,所以决定简单写写如何利用图标字体生成器IcoMoon把自己制作的图标变成字体,下面以OSChina的图标为例。

一、确保logo转成纯色,并保存为svg格式

因为OSC的logo是绿色带描边的,所以先在Illustrator里面把logo变成纯色路径,这里我用的黑色。还有因为字体属于矢量文件,所以把logo存储为.svg格式的文件方便接下来的导入。

实用教程!简单几步把LOGO变字体

二、进入IcoMoon,导入刚刚保存的svg文件

实用教程!简单几步把LOGO变字体

三、编辑图标名称

点击edit按钮,选中我们刚刚上传的图标修改tags属性可为图标加上标签。第一个tag名将是这个图标的名称,不过现在暂时只能接受英文命名。如果不修改tags,到时候字体的class名就是icon-untitled,所以建议还是修改一下。

实用教程!简单几步把LOGO变字体

四、创建字体,并下载相关字体文件

实用教程!简单几步把LOGO变字体

实用教程!简单几步把LOGO变字体

到这里,字体创建已经完成,你可以解压文件预览下效果了。

实用教程!简单几步把LOGO变字体

今天这里只是讲了把一个图标变成字体,同样你可以把你设计好的成套的图标通过上面的方法全部转化成一个字体,通过相应的class对其进行访问。只是你需要注意确保每一个图标尺寸大小相同,这样才能得到一致的图标。你也可以参见《如何把你的图标转换成web字体》

 
原文地址:一周一博
作者:曾沙

================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:15335158)分享实战经验。
设计微博:拥有粉丝量42万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

实用教程!简单几步把LOGO变字体

1、CNBE.CC所有文章,如无特殊说明或标注,均为本站作者原创发布。
2、任何个人或组织,在未征得作者同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
3、如若此作者内容侵犯了原著者的合法权益,可联系客服提交工单进行处理。
4、CNBE.CC内用户所发表的所有内容及言论仅代表其本人,并不反映任何CNBE.CC之意见及观点。
!
你也想出现在这里? 立即联系
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
有新私信 私信列表
搜索