Adobe's new online tool lets you convert PSDs to CSS code


Digital Arts | 25 April 14

Adobe has debuted a beta web-based tool that lets you convert PSDs into CSS code. At first glance it appears to be more of a fun experiment than a serious tool – as it replicates the Generator tool added to Photoshop CC last September – but it's also more evidence of how Adobe is thinking about moving more of its Creative Cloud toolset into the actual cloud.

You can see Project Parfait in action in Adobe's video above, or try it yourself at projectparfait.adobe.com (though it requires you to be using Chrome).

On the Project Parfait site, you can upload PSDs – even large ones – and access (though not edit) all of the elements and layers.

As with Generator, this isn't a tool that 'converts' PSDs into websites, but more of a way to smooth the process turning mockups into anything from interactive prototypes to full sites. Developers who don't have Photoshop could use Project Parfait to extract individual image assets such as button designs from a mockup, obtain the values of graphic and text elements to be rendered using CSS.

For each element – including text – you can see how it would be rendered in CSS, and copy either the entire code or separate elements.

The layer structure of a PSD remains intact, and you can quickly export individual elements as PNGs, JPGs or GIFs.

 

Clicking on individual elements gives you their dimensions, position and quick ways to copy their values (and content, in the case of text) or download them as graphics.

Using Project Parfait requires having a Creative Cloud account, but (currently) a free one gets you access.

Comments

ali said: adobe is going after not just Export Kit plugin but also CSSHAT if we are tolking about a Photoshope plugin , and PSD2WEB CONVERTER TOOLS: http://www.psd2webconverter.co... if We are tolking about A web browser tools that alllow this type of convertion .

SoulCreative said: Wow Adobe is going after Export Kit plugin: http://exportkit.com/ - PSD to HTML5, CSS3, jQuery, WordPress, Android and more... in a few clicks.

Hyper Sleepy Fox said: MAGICAL ! ! !

Karthik Rajendran said: Ever since i tried generator, i have been a great fan. it's a game changer for Adobe. Once my CC trial gets over, i get depressed!! Parfait is a breath of life. going over to try it now. thanks much Adobe!