Photoshop图层转CSS3代码之神器-CSS3Ps插件

人生为棋，我愿为卒，虽然行动缓慢，但谁曾见我后退一步。技术永无止境，只有意想不到，没有什么是做不到的。

最近，我在微信上做了一个手机触摸屏版的项目。完成后，我总结了一些经验。我无意中发现，Photoshop中的一些渐变、投影和内阴影的效果转化为CSS3是如此简单，即神器CSS3PS插件。让我眼前一亮啊。好了，不卖关子，进入正题。以下是我翻译CSS3PS插件官网的介绍。：

首先要下载这个插件，狠狠点击:CSS3Ps，它们有三个版本：

Download for Adobe Photoshop CC
Download for Adobe Photoshop CS5 and CS6
Download for Adobe Photoshop CS3 and CS4

针对不同的PS版本，前两个版本下载CSS3PS.zpx文件，第三个是CSS3Ps.以下是jsx文件的安装和使用方法。

一、CSS3Ps.安装和使用zpx的方法

1、首先，我们先关闭PS。然后运行下载的CSS3PS.zpx文件。

2、安装后，我们重新打开PS，选择window(窗口) -> Extension(扩展) -> CSS3Ps，一个方块区域将出现，见下图右下角：

3、然后您可以设计几个渐变、投影等效果的按钮，点击上面有CSS3PS字样的方框区域，如下图所示：

4、CSS3代码将在谷歌浏览器的默认新页面上看到，如下图所示：

这是不是很神奇，所以我们重建设计师的设计草案要方便得多，不需要检查层的效果。虽然很方便，但建议初学者需要过于依赖它。转换后，您应该分析代码的含义，以便您可以学习一些东西。

二、CSS3Ps.jsx安装和使用方法

其实以上只是CSS3PS.zpx的介绍，如果我们在官网上选择第三个版本“Download for Adobe Photoshop CS3 and CS4发现下载的是“CSS3”Ps.jsx文件中，有些童鞋蛋疼，不能用啊。莫急莫急。其实原理是一样的，看下面的操作:

1、下载CSS3PS.jsx之后，我们打开PS，然后选择“文件”>“脚本”>“浏览”选择我们刚刚下载的CSS3PS.jsx文件

2、CSS3代码将在谷歌浏览器的默认新页面上看到，如下图所示：

总结：

有限制将该插件识别为CSS3的图层。例如，渐变CSS3似乎只能通过图层样式的渐变来识别，fx图层样式可以尽可能多地用于投影和描边。

因此，有必要传达或警告设计师，当你达到一些效果时，保留层、路径和参数，并尝试使用层样式，这将更加方便。
目前，我使用photoshopp CSS6，下载CSS3PS.jsx，photoshopp还没有使用过 cc版，还不知道效果如何，以后再继续写~~