将设计稿图标制作成iconfont（ps cs6 + ai cs6）

发觉自己越来越懒了，懒到标题都直接复制别人的，嘿嘿~~

博主是受这篇文章启发：https://blog.csdn.net/deliawen/article/details/78467093，不过由于那个脚本错误，我的PS CS6上运行失灵了，因此没能帮上我的忙。

不过套路都差不过，分享下我的更加完美的办法：

1、打开PS，新建一个页面，尺寸随意

2、用【文字工具】，随便写个字，在此博主写了个【令】字，然后记得字体要使用带轮廓的字体，像：黑体、琥珀、彩云这些就属于带轮廓的，不带轮廓是指会出现锯齿之类的。然后选中文字图层，点击【转换为形状】。(注意这个字不要使用PS的仿粗体、仿斜体这些外部效果，以免转换为形状时PS报错)

3、然后删掉其他图层，只保留文字图层，最后我们保存为psd格式的文件，PS的工作到这里就结束了

4、打开AI CS6，找到刚才保存的psd文件，选择【文件】->【存储为】，选择svg格式，选项全部默认就可以了，保存。

5、先双击下生成的svg文件，一般会浏览器打开，如果能看到一个文字，说明OK了。

6、将这个svg文件上传到iconfont网站(没有账号就随便注册一个)，然后提交，再下载ai文件，我们就得到了一个eps文件。

7、打开Font Lab 5.2(这个软件是收费的，这里有不要钱的，点我下载~)，将我们搞到的eps，导入到我们的ttf文件中：

8、这样搞完之后，我们点击【File】->【Generate font...】，覆盖原来的ttf文件或者另存下。

9、可能你会觉得，在某些场景里，光有一个ttf文件有点尴尬，接下来我们还可以到这个站点：http://www.font2web.com/将我们的ttf文件转换成多种格式，比如：svg、woff、otf、eot...

好了，本来不想上传图片的，想了想新手看了可能会打我~~~嘿嘿~~~还是补了图。

完！

将设计稿图标制作成iconfont（ps cs6 + ai cs6）相关推荐

多个ai文件合并成pdf_设计作品集整理必看——在PS与AI中如何快速导出PDF文档
新的一年又到了总结作品与寻找新机会的时刻很多出踏设计之路的新人也跃跃欲试准备开启自己的设计职业生涯在总结作品与面试的环节中都少不了作品集的存在.它作为设计师实力展现载体同时也是新人面试设计岗位 ...
如何用手机预览PS、XD、sketch的设计稿
大家在做UI设计工作的时候,都要在手机中预览设计稿,或者平时的设计稿评审也是需要将设计稿给对方预览.这里介绍一款工具能够实时预览Sketch.ps.xd设计稿的: Design Play是最近半年才开 ...
一款APP从设计稿到切图过程全方位揭秘 Mark
纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同 ...
一款APP从设计稿到切图过程全方位揭秘（IOS版）
9月17日凌晨,IOS9正式推送,它使用的字体最终还是变了,我下面写的内容你们也要酌情更新,因为我写的实在赶不上它更新的速度了 iOS9使用的西文字体由Helvetica Neue变更为 San Fr ...
纯干货！一款APP从设计稿到切图过程全方位揭秘
@BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声 ...
一款APP从设计稿到切图过程全方位揭秘
9月17日凌晨,IOS9正式推送,它使用的字体最终还是变了,我下面写的内容你们也要酌情更新,因为我写的实在赶不上它更新的速度了(泪奔中...) iOS9使用的西文字体由Helvetica Neue变更 ...
一款APP，从设计稿到切图
纯干货汇集了之前的五篇帖子的精髓依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用. 我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到 ...
设计稿生成代码与 Serverless 的前世今生与未来！
一场脑洞实验云栖大会云上 Hello World 活动火热进行中!每位参与者都可收获一份阿里云出品的全球唯一序列号纪念证书! 作为阿里经济体前端委员会的四大技术方向之一,前端智能化方向一被提及,就不 ...
ps怎么将图片制作成ico图标? ps制作ico图标的教程
ps怎么将图片制作成ico图标? ps制作ico图标的教程发布时间:2018-03-08 09:19:23 作者:塔上的蜗牛我要评论 ps怎么将图片制作成ico图标?ps中想要设计一款一款 ...

将设计稿图标制作成iconfont（ps cs6 + ai cs6）

将设计稿图标制作成iconfont（ps cs6 + ai cs6）相关推荐

最新文章

热门文章