Project Parfait

Modern web design techniques focus around the concepts of responsive design. As such, many modern workflows include the concept of design in browser. An excellent overview of these modern processes can be found at CSS-Tricks. Adobe recently introduced an experiment that complements such a workflow – Project Parfait. For those who are provided a Photoshop design comp (or other layered Photoshop document), you can use a modern browser to extract color and font information, generate associated CSS,determine measurements between elements, and save web optimized images. Yes, you have to sign in with your Adobe ID in order to use this facility. Let’s examine this beta facility in a little more detail. 

Once you have signed in to Parfait, you can upload your PSD files through drag and drop. You can then click on your uploaded PSD file to examine it in greater detail. An example is shown below. You may wish to click on the image to see a larger version. I numbered some of the key points.

Project Parfait Overview

(1) You can click on any part of the uploaded PSD file to see the height and width as well as the X and Y coordinates of that item.

(2) You can click on the download arrow to download the optimized asset. You have a number of choices (shown in the partial screen capture below). Note there are a number of different file types (and you can change the name of the asset as well).

Saving an asset


(3) You can also examine the generated CSS (and can copy it to the clipboard). You can also specify vendor prefixes for more complicated CSS rendering.

Generated CSS


You can also click on one object in a layer, hold the CTRL (or CMD) key and click on another object and you will be informed of the distances between these objects.

Measuring distances


You can also examine layers (hopefully, they were properly named, not as I have done in this example).

Examining layers

Lastly, you can also combine multiple layers into a single optimized image to download (just select the layers you want)…

Combining layers into single image

I realize this is a simplistic PSD file. However, this is a beta tool and I suspect it will expand in capabilities over time. I wanted to focus on the fundamentals of using this tool. If you are not familiar with this tool, I encourage you to try it out. I would be curious what you think of this tool (and how you might use it in your workflows).


2 thoughts on “Project Parfait”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social media & sharing icons powered by UltimatelySocial