18 Jun


18. June 2012 by Jason Turner

As a digital designer who loves to write HTML / CSS I am very excited about CSS Hat. CSS Hat is a photoshop plugin that generates CSS from shapes and layer effects, its wont build a site for you (ha ha) but saves loads of time on making little panels and buttons.

Not everybody is going to get along with it, I can already hear people saying it limits you in terms of design (which is true) but if you’re into using the usual tricks on buttons .etc with layer effects and love CSS 3 its for you. Designers who work slightly more freely using lots of pixels and not layer effects wont have any use for the tool as it wont help at all. Personally I’m in love with it, I like to keep my PSD’s and CSS as tidy as I can and this tool really fits in with my work flow.

I’ve been playing around with it and its very straight forward to use, so no need for any lengthy tutorials. In terms of output it performs very well with only subtle differences between the Photoshop .PSD and the .CSS . The only real draw back to design is that you cant ‘multiply’ anything as CSS cannot perform this task. I can see some designers getting very annoyed by this but it goes back to how you like to work and if CSS Hat will fit in with your workflow.

The most interesting thing I found was how it dealt with gradient overlays, instead of giving you an image to upload it puts SVG data inline for the browser to render itself. Although I found this destroying my neat and tidy CSS files it does mean less calls to the server and there fore faster loading.

The tool itself is also very simple and intuitive with three toggle modes for how much CSS you want generated. Obviously CSS Hat is angled towards making things like buttons but some of its functions like simply showing the width and height of any layer will be very time saving for many developers.

csshat1I’m really looking forward to seeing what comes out in the next phase. As it stands the tool treats every layer individually. For example text in a button becomes two different classes, the text and the background. This is a little annoying as any good developer would not structure their CSS in the way CSS Hat does. Having said that editing the output to combine the two classes is still quicker than writing CSS 3 from scratch so still not too bad.

Hopefully the next release will address this issue, Im also hoping for it to convert repeating pattern fills to SVG as well, that would be AMAZING. Its going to be interesting to see how useful this will be at work. Im going to have to concentrate when creating assets to make sure decent CSS is outputted. Obviously in an average design only a small amount of CSS will be useful for output but it will more than likely be on annoying things like buttons. I might start making my layers a certain colour if I know they are good to use with CSS Hat, this way a dev can pick them up easily.


Subscribe to newsletter:

RSS Feed