专注图标字体一百年

7-12 1,896 views

点满艺术天赋制作自定义矢量图,生成字体,最后在网站中使用。用到ps、flash、ai、ICOMOON APP四种工具。

如本站logo左侧那样扁平优秀头像雏形制作:

1 首先找一个冷峻的自拍像作参照。
2 用钢笔工具描出以前头像的主要轮廓,右键轮廓->点击建立选区
3 建立选区时候稍微消除一下锯齿就可以了,觉得不够可以羽化半径
4 然后用色桶填充纯色就完成了(竟然是扁平设计)

制作头像QQ截图20150701115948_compressed1-150x150钢笔选区

下面借助flash来为更好地矢量化铺垫,如果要求只是一个头像,那么完成这步就好了

1 时隔十年再次安装flash
2 为了在转换矢量图的时候保证线条简单把文字部分先删除
3 把ps输出的图片添加到flash的舞台或者转换成元件 (可以直接拉进来)
4 选中图片,点击菜单中的修改->位图->转矢量图 (这个时候矢量图还是太复杂了,仔细看会有模糊的部分)
5 选中图片,点击菜单中的修改->形状->优化 来减少图片中的线条数目
6 最后如果需要添加上文字就用flash的文字工具,根据以上步骤完成的图形可以在任意大小舞台上放大缩小,输出任意大小的图片了

flash矢量图
用Adobe Illustrator生成svg二维矢量图形文件

1 把flash输出的图片粘贴到ai上
2 找到图像临摹功能
3 边上的下拉菜单有个高清转化选项,读条结束后就可以看到一个圆润的矢量图了
4 这样还不能马上达成最后的矢量图效果的话(如有些地方需要透明),可以用扩展功能,拿起钢笔去掉一些没用的锚点
5 获得图片路径,用选择工具双击空白地方加退格可以去掉多余的路径,只留下最后需要不透明的部分
6 最后可以导出背景透明的png或者svg文件(如果要确保能生成图标字体,这里还需要轮廓化描边)

ai矢量图无标题
最终兵器——图标字体

1 拿出生成的svg文件
2 打开icomoon平台 点此跳转
3 点击左上角import icons上传svg文件,就可以看见自己的图标出现在这里,但如果太之前图标做得太复杂,这里会出现失真这也是为什么在图中的示例图标中我没有加入文字
4 选中刚做的图标和别的艺术家做的图标,点右下角generate font生成字体文件、css文件
5 进行在网站中使用前的基本设置,详见图,可见使用方式有1、html+css方式和2、加载字体后打入特定字符

制作字体无标题
图标字体加入网站豪华阵容

以前图标设置,通常采用图片,png居多,但是图片多了请求数量就多了。于是诞生了“雪碧图”,将图片全部合并到一起来减少请求数量,这应该是一个很完美的事情了。但是Retina屏幕出现了,原来的图片需要1.5X、2X才能清晰的显示在这样的屏幕上,并且随着图片的写死,后期的交互也出现了麻烦:比如高亮就需要将原来的图片复制一次,加上高亮颜色,无疑增大了图片的体积。Font Icon可以很好的处理这个以及其他一些问题。所以字体图标有以下优点:
1 字体图标是矢量,可以无损放大缩小,在Retina屏幕上有天然优势;
2 字体图标可以减少http请求数量;
3 可以通过CSS轻松改变样式,比如:颜色、大小、背景颜色等等;
如何使用字体图标:
1 在css中声明字体

@font-face {
   font-family: 'icomoon';
   src:url('fonts/icomoon.eot');
   src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
       url('fonts/icomoon.woff') format('woff'),
       url('fonts/icomoon.ttf') format('truetype'),
       url('fonts/icomoon.svg#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
}

2 声明类

.icon-list, .icon-play {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	–webkit–font–smoothing: antialiased;
	–moz–osx–font–smoothing: grayscale;
}
.icon-list:before {
	content: "\e601";
}
.icon-play:before {
	content: "\e604";
}

3 然而icomoon app已经帮我们生成好css了,仔细看demo就能自己写啦
4 更具体可以检查本网站代码,其中我的作品分类前面的图标和实验的图标是通过这些步骤以后终于做成功的。

css引入字体无标题

「Unity Shaders」Surface Shaders and Texture Mapping

 本文内容参考《Unity 5.x Shaders and Effects Cookbook》 表面着色器和材质贴图 总的来说,一个表面着色器有两个关键的步骤。第一,必须确定材质的物理...

阅读全文

「Unity Shaders」Creating First Shader

创建第一个着色器 最近学习了一段时间Unity Shader相关知识,在进一步自顶向下学习计算机图形学之前,先将之前看《Unity 5.x Shaders and Effects Cookbook...

阅读全文

《Effective c++》、《Inside C++ Model》 小结(一)

最近瞻仰了一下Scott Meyers久负盛名的《effective c++》,特来总结一下,以加深一下印象与防止自己今后记忆力衰退。这本书里很多都是工程上很有意思的tips...

阅读全文

5 条评论

欢迎留言