近来开发网站,发现网站在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"两倍图。