svg和@2x图（双倍图）切图--Photoshop CC

近来开发网站，发现网站在retina屏上显示图片模糊的问题。然后发现2x图可以解决此问题，当然不可能整个网站所有的图片都是2x图。故此，小图icon类（一些线条组合的图形）采用svg，其他icon类和一般大小图片采用png(可以考虑“交错”)，大一些的图片用jpg(特别是全屏图：横向全屏，整个全屏)。大图呢模糊的话就得用2x图了。我的需求是这样，可是设计师和ui美工告诉我，他不知道怎么弄，不懂那玩意。他们手头上的事也很忙，故此，我就自己去折腾了。发现Photoshop CC可以做到，并且很方便。（注：2013及以前的版本没有此功能）

Photoshop CC 2014 的安装，设置，切图：

一、 Photoshop CC 2014 的安装（安装程序网上随便搜，很多的，也可以去官网下载）

1. 解压下载的PS CC软件，打开文件夹，双击“Set-up.exe”进行正常安装。
2. 点击“安装”按钮(注意：不要点击“试用”按钮，否则安装的结果就不是完整版的)。
3. 点击右下角“登录”按钮，点击“稍后连接”按钮，然后点击“接受”按钮。
4. 序列号随意输入，比如分别输入111 111 111 111 111 111，点击“下一步”按钮，点击“稍后连接”按钮。
5. 接一下，如果你是64位系统的就都选择，如果是32位系统的当然只有一个了。点击“安装”按钮进行安装。
6. 点击“关闭”按钮关闭。
7. 这时系统菜单已经有程序存在，把它们添加到桌面快捷方式。
8. 双击程序图标，弹出“需要登录”对话框，点击“以后登录”按钮，打开PS CC程序，弹出提示对话框，勾选“不再显示”复选框，点击“确定”按钮。然后关闭程序。
9. 复制64位破解补丁到程序的安装目录，默认是：C:\Program Files\Adobe\Adobe Photoshop CC(64bit)，出现“复制文件”提示，点击“复制和替换”，这样64位的就完成破解。同样的方法，把32位程序创建桌面快捷方式，复制32位破解补丁到程序的安装目录，默认是：C:\Program Files\Adobe\Adobe Photoshop CC 2014，同样出现“复制文件”提示，点击“复制和替换”，完成32位的破解。（破解补丁（网上找，都差不多是amtlib.dll文件））
10. 连接网线，你可以像正版一样使用了，界面很美妙，开始你的PS之旅吧！

二、 Photoshop CC 2014 的设置

1. 请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态；
2. 依次点击菜单“文件->生成->图像资源”，确认该菜单项已被勾选；
3. 开启 WebP、SVG 格式的自动输出： 新建 generator.json 文件，内容如下：
   { "generator-assets": { "svg-enabled": true, "webp-enabled": true } }
   将此配置文件拷贝至： Windows: (Win+R后输入 %USERPROFILE% )目录下，如 C:\Users\xxx Mac OS: $HOME 如“Macintosh HD>Users>xxx” 目录下 WebP 输出暂只支持 Mac OS。

三、 Photoshop CC 2014 的切图

1. 将某个图层或组的名字改成对应格式的即可。如"首页"，
2. 改成"首页.png"就会在你所打开的psd或图片的文件对应的位置生成"首页.png"图片；
3. 改成"首页.svg"就会在你所打开的psd或图片的文件对应的位置生成"首页.svg"svg图;
4. 改成"200%首页@2x.png"就会在你所打开的psd或图片的文件对应的位置生成"首页@2x.png"两倍图。

参考

• 利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了
• PS CC 自动切图（含WebP、SVG格式）
• ADOBE CC 2014/2015 全系列通用破解补丁下载！PHOTOSHOP CC 2014/2015完美破解版