Project Parfait - PSD Introspection in the Browser

This post is more than 2 years old.

Today Adobe launched a pretty cool new site - Project Parfait. Project Parfait lets you work with PSDs via your web browser.

By default you're presented with a default PSD to work with, but you can quickly upload new PSDs by simply dragging them into the browser. I did multiple tests and the service didn't choke on any of them - even a large 30 megabyte one. Once you've uploaded the PSD the service will then start processing your file to extract data from it.

When done, you can open the PSD in the interface and start working with the various parts of the file. As a test, I grabbed a PSD a designer gave me for an older site of mine. This is a comp for a homepage redesign she did for me.

Lots of interesting information is available. The styles tab, for example, shows all available colors and fonts from the PSD.

If I select one particular element from my PSD, I get both the specific colors used for it as well as CSS information.

Notice that I can copy the CSS from the right panel, or directly from the blue call-out right below it. See the arrow? This will actually create an asset from the selecting layer. I did this with the logo and it is now available to me from the Assets tab.

You can also extract the text if you have something useful there as opposed to the typical Lorem Ipsum. Another tab gives you access to all the layers with the ability to show/hide items.

So yeah, I'm biased, but this is pretty damn nifty. This is exactly the kind of tool that is useful for me as a web developer. I have a lot of respect for Photoshop, but I find it hard to use at times as I don't use it very often. Something like Parfait is a heck of a lot simpler for me and I'm willing to bet a lot of developers would think the same. If you try it out, make note of the Chat option in the lower right corner. I found a small bug and reported it via that pod. You can also get support via the forums just launched for the project. Finally, check out this video below by my coworker Paul Traini. He covers Parfait as well as some of the other web-related options recently added to Photoshop.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Paul posted on 4/23/2014 at 6:44 PM

Does not work on IE8 (don't ask). Recommends using Chrome too. Interesting..

Comment 2 by Raymond Camden posted on 4/23/2014 at 6:46 PM

IE8 doesn't surprise me. I tested in FF last night and it seemed ok, but I didn't test hard.

Comment 3 by Paul posted on 4/23/2014 at 6:52 PM

No worries Ray. IE8 is my merchant of death. Have to keep it around for certain reasons. At first FF didn't like it, but now it loads. Pretty sweet concept!

Comment 4 by S.Convey posted on 5/2/2014 at 12:30 AM

Hey Raymond,
This looks great and thanks for sharing all this great info.

I am a designer and this looks like a great way to share my design with my developers...

*2 Questions*
*1.* Is it possible to figure out relative and proportionate scaling / spacing? I see that it tells you distance between 2 objects (which is great) but more often than not I have a really hard time communicating to my developers that I want say a "slideshow" to maintain its *PROPORTIONS & screen PERCENTAGE..*. Is that possible with Parfait and if not do you know of an easy way to figure that out and communicate / translate that from design - dev.

*2. SVG's -* I see there is an option for SVG output to assets... do those have to be smart objects or will it convert bitmap to svg as well?

Comment 5 by Raymond Camden posted on 5/2/2014 at 2:01 AM

I don't know the answers - sorry. But there *are* the forums ( I'd suggest posting there, and if you can, post back when you get an answer.