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 designWeb DevelopmentHTML5productionresponsive designDrupalADAcompliancesecurityPhotoshopCSSTestingdesigngooglebeta testingquality controltoolsharness-bautomationtypographyGoogle AnalyticsmarketingFlashproduction tipsfontsweb imagesite speedweb preflightthemeswebsite buildingmodulestechnologiesJavaScriptfirefoxbrowserintegrationsMicrosoftAdobe MuseSSLIE8Applemobile websiteapp developmentplug-inAPIQAserver securityweb standardsE-commerceiOSInDesignWordpress pluginsOpenSSLAdvertisingJSONmobile devicestabletsAdobe AirRIAsBacklinksInteraction MetricsLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildhorizontal layoutAdobeICANNcustom domain suffixesdevelopmentwireframeaugmented realityweb development awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templategTLDsweb awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Off-Site Services shares in 2014 IMA Best in Class Award

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 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

Wix the free web site building service

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