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扩展插件。




转载于:https://www.cnblogs.com/jzdwajue/p/7145375.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值