制作字体图标
2017-01-05 15:40
211 查看
根据ui设计图制作页面时,经常会遇到图片在不同状态下的颜色切换。若使用图片进行切换,需要样式+数张图片。但是使用字体图标替换图片,则只需要样式即可实现不同状态的切换。实现方法如下:
从psd中使用直接选择工具时,复制到ai中的是路径并不能复制颜色。复制到ai中后,使用拾色器将路径的颜色设置为#000,设置为其他设置则会再生成的字体样式的文件的before元素中赋上色值,这样失去了字体图标直接更改颜色的作用。
用ps打开psd文件,使用直接选择工具:
![](https://img-blog.csdn.net/20170105144716116?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
2.在需要制作成字体图标的图片用鼠标圈选出范围:
![](https://img-blog.csdn.net/20170105145047677?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
3.ctrl+C复制,打开Adobe Illustrator,文件–>新建:填写文件名、文件大小(单位为像素),颜色模式为RGB
![](https://img-blog.csdn.net/20170105145819978?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
4.点击确定,ctrl+v,弹出,保持默认即可:
![](https://img-blog.csdn.net/20170105150021430?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
粘贴后调整边缘,
![](https://img-blog.csdn.net/20170105150352076?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170105150532313?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
5.给字体图标设定一个默认颜色值;
ctrl + s 保存,类型选择svg:
![](https://img-blog.csdn.net/20170105150712122?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
保持默认即可:
![](https://img-blog.csdn.net/20170105150818467?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
6.打开图片转字体图标,点击右上角IcoMoon-App
![](https://img-blog.csdn.net/20170105151455923?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170105151951489?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
7.选中要导出的图标
![](https://img-blog.csdn.net/20170105152344603?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
8.上传完毕后,选择右下角Generate Font生成字体。
9.编辑字体名称,设置兼容性等。
![](https://img-blog.csdn.net/20170105152650538?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
10.设置完成后,点击右下角Download:
![](https://img-blog.csdn.net/20170105152805110?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
11.把这两个文件拷到项目里,只引用font.css就行。如果路径改变,需要修改font.css里的路径。
![](https://img-blog.csdn.net/20170105153027519?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
注意:生成的字体图标的名成由perference中设置的class prefix + 文件名组成。例如logo.svg,perference中设置的class prefix为fa-,则引用该字体图标的class为fa-logo.
另:在使用svg图片时,可能会遇到生成的字体图标带有多个path的情况,如下图
![](https://img-blog.csdn.net/20170425152034872?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这是因为所使用的svg被编组。正确的做法是用ai打开svg,使用直接选择工具将每一部分右键取消编组,直至该部分没有编组为止。然后选中所有部分,在ai的顶部菜单找到窗口–>对齐–>路径查找器–>形状模式的第一个:
![](https://img-blog.csdn.net/20170425152349253?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmFuYTUyNTQ4NDYwOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
保存为svg,在按照上面的步骤进行操作即可。
从psd中使用直接选择工具时,复制到ai中的是路径并不能复制颜色。复制到ai中后,使用拾色器将路径的颜色设置为#000,设置为其他设置则会再生成的字体样式的文件的before元素中赋上色值,这样失去了字体图标直接更改颜色的作用。
用ps打开psd文件,使用直接选择工具:
2.在需要制作成字体图标的图片用鼠标圈选出范围:
3.ctrl+C复制,打开Adobe Illustrator,文件–>新建:填写文件名、文件大小(单位为像素),颜色模式为RGB
4.点击确定,ctrl+v,弹出,保持默认即可:
粘贴后调整边缘,
5.给字体图标设定一个默认颜色值;
ctrl + s 保存,类型选择svg:
保持默认即可:
6.打开图片转字体图标,点击右上角IcoMoon-App
7.选中要导出的图标
8.上传完毕后,选择右下角Generate Font生成字体。
9.编辑字体名称,设置兼容性等。
10.设置完成后,点击右下角Download:
11.把这两个文件拷到项目里,只引用font.css就行。如果路径改变,需要修改font.css里的路径。
注意:生成的字体图标的名成由perference中设置的class prefix + 文件名组成。例如logo.svg,perference中设置的class prefix为fa-,则引用该字体图标的class为fa-logo.
另:在使用svg图片时,可能会遇到生成的字体图标带有多个path的情况,如下图
这是因为所使用的svg被编组。正确的做法是用ai打开svg,使用直接选择工具将每一部分右键取消编组,直至该部分没有编组为止。然后选中所有部分,在ai的顶部菜单找到窗口–>对齐–>路径查找器–>形状模式的第一个:
保存为svg,在按照上面的步骤进行操作即可。
相关文章推荐
- 第一次制作和使用图标字体-IcoMoon
- 字体图标制作详解
- 字体图标的制作
- 图标字体详细制作过程介绍
- (转载)app ico图标字体制作
- Delphi FMX 开发APP使用TrueType字库做图标(自己使用图标制作字体)
- font-face字体图标制作和使用
- 如何制作自己的网页字体图标
- 阿里图标库+icoMoom制作字体图标
- 制作图标字体文件
- 用字体制作小图标
- 图标字体详细制作过程介绍
- 图标字体的制作
- 如何制作图标字体
- 关于网页图标使用与字体图标制作
- webfont应用系列 如何制作图标字体?
- vue之图标字体制作
- 利用阿里巴巴的矢量图片库工具网站制作自己的图标字体
- 在iOS应用中使用字体图标及制作字体库
- 图标字体的在线制作