Photoshop CC自动切图与前端CSS代码

右击图层面板上的图层，选择“复制 CSS”，或点击菜单“图层->复制 CSS”；

多个图层的批量获取，请选择多个图层，执行 Ctrl+G，将所选图层转为图层组。然后在该组上右击，选择“复制 CSS”，即可批量获取 CSS 代码。

智能对象暂不支持“复制 CSS”功能，您可以栅格化该图层再来使用。

当前的版本的此功能，包含了很多冗余信息和不太友好的写法，可能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能，您可以下载“PhotoshopCopyCSS”来增强 Photoshop CC 自带的“复制 CSS”功能，提升 CSS 代码的真正采用率；目前的优化有：

* 自动识别 CSS Sprite 图片，获取 background-position 信息； * 自动识别是否图标； * 优化 CSS3 渐变、文字、边框、阴影等 CSS 代码； * 优化 RGB 颜色值成 十六进制颜色； * 去除冗余 CSS 属性，如 position, z-index, left, top 等。

您也可以反馈更好的建议，让这个功能真正为大家所用。

前端开发同学接手的 psd 文档，往往有大量图层，我们需要对其进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图层类型、名称、效果、属性等条件进行快速定位图层。

使用此功能可以很方便定位到当前选定图层，非常适合含有大量图层的 psd 文档。

另外隔离图层也是个很不错的功能。开启隔离图层功能之后，我们可以通过移动选择工具，点选画布上的内容，找出我们需要的图层将其整理成一个独立的 psd 文件。

WebP 插件

WebP 是 Google 为减少数据量、加速网络传输的目的而开发的图片格式。特别适合移动端图片的传输。大大节省带宽，目前只有 Google Chrome 浏览器对其原生支持。

Photoshop CC 的 Mac OS 版自带输出 WebP 功能。Windows 下您可以下载此插件来输出 WebP 格式。安装后，可以在 Photoshop 菜单“文件->另存为” 对话框中选择“WebP格式图片”。

WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win

Photoshop CC 新增了动作条件，可以根据不同条件执行命令或其他动作。

智能参考线/使用图层颜色

这两个功能并不是 Photoshop CC 的新功能。为什么要在这里说呢，因为它能辅助我们一秒居中对齐、一秒贴边，这个非常实用。另外也建议设计师使用图层颜色来标出改动位置，这样前端开发同学便能快速定位图层。