Photoshop layer CSS3 code artifact-CSS3PS Plugin

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Life for chess, I would like to be a pawn, slow action, but who have seen me step back. The technology is endless, only unexpectedly, can not do.

Recently made a micro-letter on the mobile phone touch-screen version of the project, the completion of a summary of some experience, inadvertently found in Photoshop some gradient, projection, the effect of the shadow into CSS3 so simple, that is the artifact Css3ps plug-ins. Let my eyes shine. OK, no suspense, get to the point, the following is my translation Css3ps plug-in website An introduction CSS3PS:

First we have to download this plugin, mercilessly click: Css3ps, they have three versions:

Download for Adobe Photoshop CC

Download for Adobe Photoshop CS5 and CS6

Download for Adobe Photoshop CS3 and CS4

Respectively for the different PS version, the first two versions of the download is css3ps.zpx file, the third is CSS3PS.JSX file, the following describes its installation and use methods.

CSS3PS.ZPX installation and use method

1, first we turn off PS. Then run the downloaded css3ps.zpx file.

2, after installation, we reopen PS, choose Window (window)-> Extension (Extended)-> css3ps, there will be a block area, see the lower right side of the figure:

3, then you can create a new layer to design a few gradient, projection and other effects of the button, click on the top of the box with css3ps words, the following figure:

4, will be in the default Google browser to open a new page can see CSS3 code, the following figure:

Isn't it amazing how much more convenient it is for us to refactor the designer's design manuscript without having to look at the various effects of the layers? Although convenient, but the proposed novice needs to rely too much on it, after transformation, you have to analyze the meaning of the code, so that you can learn things.

Ii. CSS3PS.JSX Installation and Use methods

In fact, the above is just css3ps.zpx introduction, on the official web if we choose the third version of "Download for Adobe Photoshop CS3 and CS4" found that the download is "css3ps.jsx" file, some children's shoes on the egg hurts, not to use AH. Don't worry. In fact, the same principle, look at the following operations:

1, after downloading good css3ps.jsx, we open PS, then choose "File" > "script" > "Browse", select the Css3ps.jsx file we just downloaded

2, will be in the default Google browser to open a new page can see CSS3 code, the following figure:

Summary：

This plugin can be identified as a CSS3 layer is limited. For example, a gradient CSS3 seems to use only the gradient of a layer style to recognize, drop shadow, stroke, and so on, using the FX layer style as much as possible.

Therefore, it is more convenient to convey, or admonish, designers that when you achieve some effects, preserve layers, retain paths, retain parameters, and use layer styles as much as possible.

I am currently using Photoshop cs6, download is CSS3PS.JSX, have not used Photoshop cc version, do not know how the effect, and then continue to write it, please stay tuned to the Web front end of the home www.jiangweishan.com