同程客户端图标转svg化搬迁史

随着手机屏幕越来越大，尺寸也越来越多，加上大家装的app以日剧增，软件功能和大小也不断增加，于是大家会去优化图片大小，减少不同大小尺寸的相同图片重复出现，所以使用svg这类的图标势在必行，如果你们正有这样的需求，如果你还不知道怎样把ps的图标搬迁ai，就看看我的分享。

第一步：万事具备

整理图标和psd素材，找到所有的页面 越全越好，图标的命名如果不是你负责的话，可以找前端要一份线上版本的logo，要最近版的，这样导出的svg的图标名称也就和前端的图标保持一致。先来看看我整理好后的图标后在AI里面的样子。还算整齐吧。

第二步：工欲善其事必先利其器

本人电脑装的最新版本的Adobe Photoshop CC 2015 和Adobe Illustrator CC 2015，2015版本的，安装方案和软件地址可以参考http://www.cgown.com/cg/adobe

百度云下载链接: http://pan.baidu.com/s/1qXfz0MK 密码: eep5

PS其实可以直接导出svg,功能还算强大，新增很多ui设计的强大功能，这里不多说。大部分图标导出来适当调整就可以放到AI里面使用了，但是有些导出来的图标难免有问题，加上以前设计师做的图标有的技术偷工减料是用路径和剪切蒙版做的图标，导出来各种不能用，还有就是png这个时候只能呵呵，你是不是想死的心都有，遇到这样的神仙都没啥本事，照着画吧，问题不大的就适当调整一下。

第三步骤：老板说给老子干活去！

废话不LOL那么多，整理的半天的图标，前端滴滴很情愿就把图标给我了，打包，分文件夹，前端滴滴靠谱@小黄，然后我对应图标，找到的图标所在的页面和图标库，我深深的感觉有种小时候把家里翻一遍的感觉，还好都找到了。然后就开始正式工作吧！

1.     调整预设

PS预设

CTRL+K 打开预设，然后把导出改成svg,

 

2.     AI预设：为了避免AI和ps混，我改成了不同的颜色外观，黑色是ps  灰色是AI

 

3．打开一个图标的psd，找到需要的图标层或组 ，点击图层，右键，点快速导出到svg,好啦！

像这样的一个图层的图标，你就偷着乐吧，导出svg然后放进AI不会出问题，

导出svg ，然后在AI打开发现图标和我想要的还是有点区别，这个时候需要你在AI细心的调整

 

山是圆角，要改成直角

山不够长或者短的需要手动调整，

最后为了避免像素出现模糊问题，需要把矢量的路径轮廓化描边，缩放检查一下，确认无误，轮廓化，然后删掉可能出现的多余图层。

轮廓化描边的时候千万不要缩放icon的大小，从ps里面导出多大就多大，轮廓化描边后可以缩放了

 

点合并，大功告成。

其他出现的问题，比如用了剪切蒙版的话就需要你导出来然后在AI里面手动调整     

  

这种情况还是导出来在AI里面手动调整和删除，

 

最后整理好所有的图标后在AI里面新建若干个画板 ，我新建了100个 大小为40*40px的画板，调出AI的网格工具，然后整理到一个AI文档

做完都是简单的路径的图标，你可以选线是圆角还是直角，描边的粗细，图标的粗细，相同类的图标保持相似的大小和粗细，然后图标在画板居中，并用前面提到的图表名称命名画板

如果没有请点击 窗口——画板 然后把画板命名成为你图标的名称 ，

确认有没有多余的图层和误操作产生的点什么的 ，然后检查是否都轮廓化 ，有个方法就是把所有图层选中，改个颜色， 

全选后如果填色板是这个样子 ，换个颜色图标没有问题就说明你做的很棒！

那么恭喜没问题，如果有一个有问题就会出现下图的状况，需要你把多余图层删除或者轮廓化描边

  哈哈，大功告成，然后把图标导出来吧，有个盆友用AI一个个做是不是觉得很累？

 还要一个个保存，我命名好后就可以批量导出，导出可以按需要导出然后选中使用画板和范围比如我要导出1-62个，这样就不会有63-100的空图层，

导出成功，要么你删除空图层，这个时候你会发现我的文档名TC_icon_  这个是文档名+画板名，我要删除TC_

 这里有个小工具，2345批量文件改名王，这个强大呢

最后就得到你需要的svg图标啦！

你可以放心丢给前端和开发了 ，让他们去适配吧！