Blog

Comparing Project Parfait, CSS3Ps and CSS Hat

Sep 15th, 2014 by Max Tokman

For those of us not content with strictly visual website authoring from an app and willing to go an extra mile to get a clean CSS code, there are a number of popular add ons and services that can speed up the process.  Today we are reviewing three popular tools for optimizing CSS creation from Photoshop website designs - Project Parfait, CSS3Ps, and CSS Hat - and their performance with traditional and flat design elements.  Evaluation is also available as video.

We will be running our first test on an image with complex gradient and shadow:

test image

 

Running the image through CSS3Ps, a free Photoshop plugin functioning as a web service, takes about 30 seconds and produces very decent code to the right of the image - not bad for a freebie!

test image

Pros: Photoshop plugin (always nice), generates comprehensive CSS, shows resulting image.

Cons: Time lag, results displayed in a browser instead of the app window, having to work with multiple programs.

 

Now we run that same image through Project Parfait and the results aren't great - very few CSS styles were identified.

test image

Pros: Fast, free way to generate poor results.

Cons: Doesn't generate comprehensive CSS.

 

One more try, this time using CSS Hat, commercial Photoshop plugin - again, does not generate comprehensive CSS (missing dimensions).

test image

Pros: Quick way to generate incomplete CSS code.

Cons: You actually have to pay for this commercial plugin that does not work 100%.

 

So far, CSS3Ps comes out on top in terms of quality. Now, let's take a look how these same plugins perform with that newfangled flat design, again starting with CSS3Ps.  Here's our flat design button:

test image

and here are the results from CSS3Ps - again, generating proper and comprehensive CSS code.

test image

 

Project Parfait, take two - just sad, only picking up on image dimensions.

test image

 

And finally, CSS Hat - failing, as before, to include image dimensions in the resulting CSS.

test image

 

Our verdict after reviewing all three tools in real world scenarios for both traditional and flat design Photoshop artwork: love CSS3Ps, not excited on Project Parfait and CSS Hat.

If you strongly feel that these tools should be rated completely differently, we are always willing to listen - feel free to drop us a line.

wordpressSEOweb designDrupalADAWeb DevelopmentproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commerceiOSweb standardsplug-infirefoxQAwebsite buildingapp developmentweb preflighttechnologiesJavaScriptthemesintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsquality controlMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Sep 16th, 2014 by Max Tokman

Wix is a new tool for DIY crowd not content with building their websites using only website building tools from Yahoo, Network Solutions, GoDaddy and thousands of other hosting companies - now we have Wix and it is being heavily promoted as the greatest thing since sliced bread. Let's take a gander and see what i...

Sep 3rd, 2014 by Max Tokman

We are very excited to be recognized by 2014 Interactive Media Awards as Best in Class for our work on Quorumfcu.org in collaboration with our immensely talented creative partners, Adventure House. The goal of this project was turning an older desktop-only website into a fully responsive website supporting multip...