Project Parfait is a new tool from Adobe, currently in beta, which lets you open up any PSD directly in the browser to extract CSS, text and image assets from it. At the moment it only works on Chrome but Adobe plan to roll it out across all browsers as development moves on.
Drag & Drop to Upload
Opening up a PSD in Project Parfait is super easy. Just go to https://projectparfait.adobe.com/ and click the big blue Upload Your Own PSD button in the top right corner:
Then, after logging in with your Adobe ID, drag and drop your PSD onto the empty panel area and it will upload for you:
When the upload is complete you can click on the thumbnail of your PSD and it will open up in Project Parfait for you:
CSS Extraction
To generate CSS for any element in your design just click to select it then the relevant code will be displayed in the right sidebar’s CSS Inspector field. From here you can highlight and copy the elements of the code you want, or click the Copy All button:
Alternatively, with the element selected, a blue call out will appear, on which you can click the Copy CSS link to grab all the code directly:
Text Extraction
The blue call out which appears when an element is selected can also be used to easily copy text content from a PSD by clicking the Copy Text link:
Image Extraction
Exporting images via Project Parfait is also straightforward. Begin by selecting the image you want to export. If it comprises multiple layers hold down Shift and click each one to multi-select. Then click the downwards pointing arrow on the blue call out and you’ll get a Save As box where you can enter your preferred image name, format and quality settings:
After the image is saved it will appear in the Assets tab of the right sidebar, from where you can click the image to download it:
Aspects Still on the Way
Project Parfait beta is fresh out of the gates and barely a month old, so there are a few aspects of CSS generation that are presently unsupported. However, the rate of updates has already been very fast according to members of the Project Parfait forum, so I’m guessing the Adobe team is already working on these areas and we can assume lots of enhancements are on the way.
- Opacity settings applied to a layer are currently handled by setting an RGBA value for the background color. The alpha channel of the background color is used to set opacity rather than an actual opacity value being output for the whole element, meaning borders, shadows and so on will be unaffected.
- It doesn’t seem possible to detect multiple shadows just yet. If you have a drop shadow it will be picked up, but inset / inner shadows are ignored.
- Opacity settings on shadows aren’t detected. Instead of RGBA values you’ll get flat shadow colors via hexcodes.
- There’s no real way to extract a tiling background image yet as pattern overlays aren’t detected and you can’t select a specific region to export as an image.
- Borders set via layer styles are not detected. However borders set via Live Shape Properties are picked up.
- When gradients are generated no
background-colorproperty is set to provide a fallback for browsers that don’t support CSS gradient.
Aspects Which Are Excellent Already
Text CSS Generation
Project Parfait already does a great job in generating CSS for text elements.
It generates numerical font weight settings such as 100, 300, 900 perfectly, meaning that if you set a font weight such as “Thin”, “Light”, “Black” and so on in Photoshop, the correct value will be output in CSS to reflect that weight.
It also does a very good job of estimating line height, calculated as a value relative to the font size of the selected text element.
Additionally, if multiple types of styling exist in one line of text it will detect them both and give you two lots of CSS output, one prefaced with the comment /* Inline Style */.
Layer Selection
Sometimes, layers are stacked on top of each other, or placed only a small distance apart, making it difficult to select them via the visual interface. Project Parfait therefore also provides the ability to select layers directly through the “Layers” tab in the sidebar:
Extracting a Color Palette
As soon as you import your PSD, Project Parfait will identify all the colors used in the design and output them in the Colors section of the right sidebar. Additionally, whenever you have an element selected that uses one of these colors, the color will be highlighted in the sidebar:
This is potentially very useful for people who use preprocessors, as the color values can easily be defined as variables at the start of the coding process and then applied as needed throughout the design.
Identifying Reusable Gradient Styles
In much the same way as Project Parfait detects flat colors it will also detect gradients that have been applied in the design and make them available for easy copy and paste from the right sidebar. As with flat colors, any selected element that uses a gradient will see the corresponding gradient highlighted in the sidebar:
For preprocessor users this gives a handy way to grab all the gradients used in the design so that they can be defined as mixins for easy reuse in the design.
At a Glance Font Summary
As well as color and gradient information Project Parfait will also give you an ‘at a glance’ summary of all the fonts used in the design, as well as the weights and sizes used.
This means the moment you open up the PSD you know which fonts and which font weight variants you need to grab in web friendly format for integration. You also have the option to save out the font sizes as preprocessor variables should you choose.
Getting Layout Information
When you’re working directly in Photoshop getting information on the width, height, position and distance between elements can be kind of a painful experience. Not so with Project Parfait.
To get the width, height and X/Y co-ordinates of an element just click it and look at the blue call out:
To get the distance between two elements just hold down SHIFT and click both of them. A display will appear showing you the horizontal and vertical distance in pixels:
Project Parfait is Free, Give it a Whirl
Right now Project Parfait is completely free to use, just sign in with your Adobe ID and you’re ready to go.
If you’re a designer who’s looking for enhancements to your production workflow, or a developer who wants an easier way to go from PSD to code, Project Parfait is a must try new arrival in the web design scene.