首页 > 代码库 > PS插件(一)iconfont

PS插件(一)iconfont

iconfont简单介绍

iconfont是一款为设计师开发的Photoshop图标字体插件,如今通常所指的Icon Font。是用字体文件代替图片文件,来展示图标、特殊字体等元素的方法。

技术分享


功能使用及优缺点介绍

这是一淘网用到Icon Font的地方
技术分享

这是新浪微博微吧用到Icon Font的地方
技术分享

这里还有我们自己做的小浪人
技术分享

以下我们看看Icon Font都有什么优缺点。从而决定我们是否要使用它:
首先它的体积要比图片小的多

技术分享
这是做出来的一组Icon Font字体文件,试想一下假设这是图片的话要有多大。50K?100K?甚至很多其它?然而如今这个文件的大小只唯独13K
技术分享

不仅体积小,并且还具有更好的可维护性(由于是矢量,所以拉伸不变形。颜色能够自行更换,支持一些CSS3对文字的效果)

像这些图片全然能够用Icon Font制作
技术分享
技术分享

而且还能够通过base64置于CSS内。从而不产生图片的http请求
当然,Icon Font也是有缺点的,因为是字体,所以仅仅支持图片上是纯色的。多种颜色的就不支持了

技术分享技术分享
这当中的表情有多种颜色。因此就没法使用Icon Font了

可是在Win8下大量的纯色图标的出现,是否是Icon Font能够普及的一个机会呢?

技术分享

尽管制作Icon Font自然而然要添加重构的成本,可是跟后期维护相比还是值得的



iconfont插件下载安装及使用

下载安装:

1、点击链接下载安装文件并解压;
2、关闭Photoshop。首先尝试执行iconfont.zxp(假设安装了adobe套装软件则会成功)。假设执行失败。将iconfont文件夹copy到 Photoshop安装文件夹\Plug-ins\Panels\;
3、启动Photoshop,点击 窗体 > 扩展功能 > iconfont,就可以打开插件面板。
4、导入字体图标。

例如以下图所看到的:

    技术分享

插件使用:

1、创建新文档。
2、刷新iconfont面板(两次双击插件页卡,例如以下图红框所看到的) 

    技术分享 

推荐IconFont字体图标字库

阿里巴巴矢量图标库-Iconfonthttp://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库,包括了淘宝图标库和阿里妈妈图标库。

Fontellohttp://fontello.com/

在线定制你自己的icon font字体图标字库,也能够直接从GitHub下载整个图标集,该项目也是开源的。


Font-Awesomehttp://fortawesome.github.io/Font-Awesome/

一套绝佳的图标字体库和CSS框架,仅仅为Bootstrap设计,推荐学习和使用。


拓展链接:高效神器!

21款强大有用的PHOTOSHOP扩展插件。




PS插件(一)iconfont