svg和@2x图（双倍图）切图--Photoshop CC
2016-02-06 本文已影响1483人
恬雅过客
近来开发网站，发现网站在retina屏上显示图片模糊的问题。然后发现2x图可以解决此问题，当然不可能整个网站所有的图片都是2x图。故此，小图icon类（一些线条组合的图形）采用svg，其他icon类和一般大小图片采用png(可以考虑“交错”)，大一些的图片用jpg(特别是全屏图：横向全屏，整个全屏)。大图呢模糊的话就得用2x图了。我的需求是这样，可是设计师和ui美工告诉我，他不知道怎么弄，不懂那玩意。他们手头上的事也很忙，故此，我就自己去折腾了。发现Photoshop CC可以做到，并且很方便。（注：2013及以前的版本没有此功能）
Photoshop CC 2014 的安装，设置，切图：
一、 Photoshop CC 2014 的安装（安装程序网上随便搜，很多的，也可以去官网下载）
- 解压下载的PS CC软件，打开文件夹，双击“Set-up.exe”进行正常安装。
- 点击“安装”按钮(注意：不要点击“试用”按钮，否则安装的结果就不是完整版的)。
- 点击右下角“登录”按钮，点击“稍后连接”按钮，然后点击“接受”按钮。
- 序列号随意输入，比如分别输入111 111 111 111 111 111，点击“下一步”按钮，点击“稍后连接”按钮。
- 接一下，如果你是64位系统的就都选择，如果是32位系统的当然只有一个了。点击“安装”按钮进行安装。
- 点击“关闭”按钮关闭。
- 这时系统菜单已经有程序存在，把它们添加到桌面快捷方式。
- 双击程序图标，弹出“需要登录”对话框，点击“以后登录”按钮，打开PS CC程序，弹出提示对话框，勾选“不再显示”复选框，点击“确定”按钮。然后关闭程序。
- 复制64位破解补丁到程序的安装目录，默认是：C:\Program Files\Adobe\Adobe Photoshop CC(64bit)，出现“复制文件”提示，点击“复制和替换”，这样64位的就完成破解。同样的方法，把32位程序创建桌面快捷方式，复制32位破解补丁到程序的安装目录，默认是：C:\Program Files\Adobe\Adobe Photoshop CC 2014，同样出现“复制文件”提示，点击“复制和替换”，完成32位的破解。（破解补丁（网上找，都差不多是amtlib.dll文件））
- 连接网线，你可以像正版一样使用了，界面很美妙，开始你的PS之旅吧！
二、 Photoshop CC 2014 的设置
- 请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态；
- 依次点击菜单“文件->生成->图像资源”，确认该菜单项已被勾选；
- 开启 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 的切图
- 将某个图层或组的名字改成对应格式的即可。如"首页"，
- 改成"首页.png"就会在你所打开的psd或图片的文件对应的位置生成"首页.png"图片；
- 改成"首页.svg"就会在你所打开的psd或图片的文件对应的位置生成"首页.svg"svg图;
- 改成"200%首页@2x.png"就会在你所打开的psd或图片的文件对应的位置生成"首页@2x.png"两倍图。
