Adobe Project Parfait (Beta) - Convert PSD files into valid CSS code

Posted by Andor on Jun 26, 2014, in Web design

Project Parfait Beta


Adobe brings with the Project Parfait (beta) a new project to the start. It has his roots, or at least similar functions, on different Photoshop plugins. As an example CSS Hat or Enigma64.

Nevertheless, it is a pleasant development. Adobe has now released the tool (PSD CSS Extractor), which allows developers to quickly and easily generate and copy the corresponding CSS definitions from PSD file layers. However the tool needs to be used online and it is limited to Chrome.


Adobe Project Parfait (Beta) – Convert PSD into valid CSS code


Project Parfait allows web-designers to upload any PSD file to the online service. This can be a self designed or a client file - commercial use. Uploading a large sized file can take a while. However, when uploaded, Parfait makes things really easy. Just select the elements you want and the service will generate the associated CSS code. Copy it an paste it into your editor.

Parfait also allows you to generate images for download from several layers. This saves you a lot of cutting and exporting tasks in Photoshop. Adobe solved this with an elegant solution, by using the Photoshop image asset generator (only available in the CC version). Since Parfait offers simple user interface and dialogues it can be used by less experienced users as well.

Photoshop CC also provides the ability to copy CSS code. This works with a "right-click" and then in the context menu "Copy CSS". In Project Parfait this is way better solved and generates better CSS code.

As an example, here is a simple orange button CSS code.

The code from Photoshop CC is as follows:

.button {

     background-color: rgb( 204, 204, 204 );

     position: absolute;

     left: 382px;

     top: 202px;

     width: 142px;

     height: 37px;

     z-index: 4;


The same button generated with Project Parfait:

background-color: #ff9c00;

width: 142px;

height: 37px;

It becomes immediately clear that Parfait limits himself to the relevant codes and the generated CSS code is much cleaner. Photoshop CC provides a lot of garbage code - that you'll better not copy, certainly not with the absolute positions.

Project Parfait is currently in open Beta version and can be tested by anyone.

Worth to mention: Avocode

Even if Project Parfait seems to make a nice impression and allows you to optimize your workflow, it is not perfect. Anyone who has concerns with the Adobe cloud should try alternative providers, like Avocode. The service offers many similar features like Project Parfait and the interface is similar to Photoshop. So you feel yourself right and at home again;-). Avocode is still in the beta phase and you get access to the service as soon as you receive an invitation.

Was this information useful?