June 15, 2012

CSS Hat converts Photoshop shapes & styles to CSS

The $20 panel “CSS Hat turns Photoshop layer styles to CSS3 with a click,” promises its Web site, and in my limited experience it works rather well. It doesn’t map type layers to CSS font tags, but it’s clever enough to express the corner radii of rounded rectangles to CSS values. In many ways it’s similar to the CSS conversion features in Fireworks CS6.

What do you think—useful, accurate?

Posted by John Nack at 10:12 AM on June 15, 2012

Comments

  • J. Peterson — 1:22 PM on June 15, 2012

    Note it’s Mac only at the moment; their web site claims a Windows version is in the works.

  • Jeremy Chone — 10:59 AM on June 16, 2012

    Yes, i bought this one, and it is very great. Simple, just what is needed! should have been builtin ;)

    Now, one thing that is really needed is the same for shapes, basically will output the Canvas or SVG code of a layer shape. Might be hard, but this would really be a game changer.

    [Devil’s advocate: Remember when Illustrator launched the HTML5 pack, and when Microsoft enabled Illustrator->Canvas conversion? Yeah, apparently no one else does, either. –J.]

    This is a huge paint point in HTML5.

    Perhaps there is a workflow from Photoshop Path to Adobe Flash Pro to Canvas.

  • Jeremy Chone — 1:50 AM on June 20, 2012

    John, ok, point taken, game changer might be a little bit overstated, however, I do think it would add true value for all designer/developer workflow. The AI2Canvas was interesting and good first step, but too cumbersome to use, and also did not fully work. Also, it was a little early to market.

    I think CSSHat found the right comprise between simplicity and feature, and a similar experience to output HTML5 shapes (i.e. Canvas or SVG) from PSD shaped layers would bring a great value for the designer/developer workflow (at least, for me and my developers).

    Asking my developers to recreate photoshop shape in canvas has proven to be very time consuming and frustrating, even if the result is always worth it. If I could just copy/paste some simple canvas or svg code and send it to them to be integrated in the app, this would be a huge time saver (and quality maker as well). It would probably half-day for each advanced shape project.

    As HTML5 is becoming the standard for Web, Mobile, and Tablets applications, enabling a top design tool like Photoshop to output modern HTML5 assets (i.e. Canvas and SVG) can only be good for application developers.

    Anyway, we, BriteSnow, Inc can be the only HTML5 development shop that design high-end HTML5 application with dynamic shapes for various assets, and in this case, the less tool the better (since we can charge more for it ;), but I would assume that many application developers would love to do it if it were a little bit more accessible.

    Btw, dynamic graphic assets are great for all these new high-DPI devices. And application can take full advantage of a HDPI device without doubling its size.

    Jeremy,

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)