北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京ui设计培训 psd图标变换为字体图标

时间: 来源:火星人

在做手机端项目时,手机图标经常是显示不清晰的,经过前辈们不断研究和实践这种情况已经完美解决。不仅可以高清显示图标、还能像字体一样设置颜色和大小。下面就为大家介绍一下这是如何做到的。

完成转换只需要三大步:1、PSD图标矢量化,复制出图标路径;2、粘贴图标路径到lllustrator中还原图标,到处SVG文件;3、SVG导入字体图标自动挂平台工具,生成iconfont字体文件。

首先我们将做好的psd的文件复制到lllustrator中。注意:主要复制的是路径。那么如何获取路径呢?咱们会遇到三种情况。

情况1,设计稿的图标使用路径工具绘制的,这样就可以直接复制了。步骤如下:路径选择工具--点击图标所在的图层--ctrl+c--准备进入下一个阶段。情况2,设计稿的图标不是用路径做的,这样就比较麻烦了。(1)、选中图标形状的选区,点击“从选区生成工作路径”,如果图标选区像素精度不够,生成的工作路径就无法直视,这样就需要二次加工修复。(2),选择钢笔工具,用钢笔工具临摹。(3),可以需找关系好的设计是帮忙转成路径。情况3,设计稿的图标只有部分是用路径或由多个路径图层组合而成。如果是这种情况的话就把路径全部复制过来,缺少的部分通过钢笔工具在补,图形裁剪等方式处理得到。

这样就完成了吗,别急,这才是第一步,接下来我们开始进入第二阶段了。这个过程比较花时间了。首先打开我的lllustrator矢量图软件,新建64*64 的画布。将我们之前复制出来的路径黏贴进入,选择“符合路径”,点击确定,调整路径大小到合适位置,如图:

北京UI培训

路径黏贴完成后,下面我们要将路径还原成图标形状。矢量图由填充和边框组成,这样才能被转成iconfont文件,但需要注意:路径必须闭合状态,不能有描边,需要轮廓化形状

接下来我们开始做还原。大家可以看一下,ai里有三种描边方式:居内描边,居外描边,居中描边。这些可以点击”窗口-描边“可以填出相应的对话框,里面可以看到PSD设计稿的处理方式,图例用的是居内描边2像素;

北京UI培训

右键取消分组,使每部分的路径独立分开。现在我们开始对路径进行编辑:路径查找器(视图-查找器),开始对路径的裁剪、合并。先从下方的两个圆形小脚开始吧,我们选中其中一个角对其进行轮廓化描边处理;

北京UI培训

我们再次选中这只圆形小脚,按住shift键同时选中底部的圆角大框,然后点击在“路径查找器”中的”减去顶层“

北京UI培训

同样,我们对另外一只圆形小脚和上方的两根天线做类似方法处理,效果如图:

北京UI培训

最后我们将中间的两只眼睛,设置填充色,去掉边框;两个圆角方框都轮廓化描边

北京UI培训

到了这一步我们就完成的差不多了,我们选中部路径,将其编辑,设置一个填充色

北京UI培训

保存为svg格式(文件-储存为-格式:svg格式),弹出对话框,默认选项,确定。

北京UI培训

关键词:北京UI设计培训,北京UI培训,UI设计,ui设计培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号