制作font-icon有感
连日来有些空闲,趁着这闲余时间,我尝试亲自制作一些Font-Icon,让以后可以运用到工作中。但是基于本人水平有限,PS操作只能以非常基础来形容,而AI呢,根本就只会放大操作。在这过程真的非常感谢设计同事的帮助。
现在想完成以下图标转换成Font-Icon,图标以下所示。
第一个Icon是一个小电视,命名为ico_tv,在设计师给的设计稿中,它已经是路径了,但是细看一下,这个ico_tv有三条路径,但是在网上的一些把svg转成Font-Icon的网站中(例如fontello ,但是icoMoon可以,如果使用的是icoMoon后面的合并路径可以忽略),它在转换的时候只需要一条路径,这就需要我们在PS中把它们的路径都合在一起。
Ico_tv的三条路径
在PS中,把所以的路径合在一起,需要把路径选取好之后,点击上面的“路径操作按钮”,里面有4个选项,合并,减去,相交,去重,这4个效果就相当于集合的操作,我们想保留的是蓝色的部分,也是之后变成字体之后,着色的部分,而这里4条路径,分别是,ico_tv的外框,以及右边的3个小长方形,需要把小长方形的那部分去掉,这里的操作就选用“去重”。完成后,当点击按钮时候,路径都选中。
Ico_tv路径合成后
打开AI,新建面板,350mmX350mm,在PS上选中所有的路径,拖拉到AI上,把路径放大到跟画板差不多大,填充颜色(iconMoon需要填充单一颜色,fontello则可以不填充,不过推荐最好有填充颜色,看着更为直观)。然后保持成为svg格式。
打开IcoMoon网页(我较多使用这个网站),在这里可以上传我刚刚绘制的ico_tv,还可以进行一些简单编辑。
上传icon的按钮
最后导出Font代码,填写icon对应的Unicode编码,旁边会现在所对应的符号。点击download即可下载代码。最后展示如图。
然而,如果给的设计稿里面的icon只是一个图层的话,就需要把它们转化成路径了。一般使用矩形工具那一列,把形状变成路径,还有钢笔工具,路径选择工具等,做图层那个icon的临摹。
制作font-icon有感的更多相关文章
- CSS3魔法堂:认识@font-face和Font Icon
一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...
- @font-face制作Web Icon
@font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...
- 教你如何制作饼干icon教程
Hello,不露又和大家见面了,今天给大家带来的是一个可爱Q弹的icon~ 看起来像块饼干是吧~ 做起来非常简单哦,快打开PS一起躁起来吧. 先来看看效果图: 步骤1:打开PS,新建一个800*600 ...
- 字体图标 icon font
Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...
- 再探@font-face及webIcon制作
@font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉.随着 web 的急速发 ...
- 用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- 请用fontAwesome代替网页icon小图标
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- fontAwesome代替网页icon小图标
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...
- WEB ICON 的探讨
一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢 在线教程:用字体在网页中画ICON图标 http://www.imooc.com ...
- 响应式Web图形篇 —— icon fonts 的探析及应用
前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...
随机推荐
- seq命令
seq 5 seq 5 >1.txt 其中的>是覆盖 seq 1 5 用来产生从数1到数5之间的所有整数 或, seq 5
- 南京Uber优步司机奖励政策(2月1日~2月7日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- ActiveMQ入门实例(转)
1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.5.1-bin.zip,然后双击a ...
- MySQL自定义查询字段排序
同事在做抽奖排名的时候有个问题 需要按照 一等奖 二等奖 三等奖 未中奖 的形式输出数据 问到我如何排序. 数据库设计如下 用一个prize_code字段标示了是否中奖 1是一等奖 2是二等奖 3是三 ...
- storm单机版安装配置
1,install zeromq 期间可能出现:configure: error: cannot link with -luuid, install uuid-dev. 因此可以先安装 sudo ap ...
- JavaScript实现遮罩层
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- LINQ如何递归子控件
private void SetTextReadOnly(Control ctr, bool blReadOnly) { ctr.Controls.Cast<Control>().Sele ...
- 服装销售系统数据库课程设计(MVC)
<数据库课程设计> 名称:Jia服装销售网站 姓名:陈文哲 学号:…… 班级:11软件工程 指导老师:索剑 目录 目录 1 需求分析 3 一:销售部门机构情况 3 二:销售部门的业务活动情 ...
- HTML里面Textarea换行总结
近期碰到一个数据转来转去转到Textrea里面能否真正按行存放的问题,在这里总结一下: 问题描写叙述: 比方get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextAre ...
- HDOJ--4869--Turn the pokers【组合数学+高速幂】
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4869 题意:有m张扑克.開始时所有正面朝下.你能够翻n次牌,每次能够翻xi张.翻拍规则就是正面朝下变背面朝 ...