When you are designing a website, most likely you are starting the project in Photoshop to get a better idea of what you want but eventually you are going to have to dive into first the structure of the page (HTML) and then the styling details (CSS). The task of writing (and rewriting) code can be monotonous and frankly, is what most would consider to be the lionshare of website design. Things like replicating shadow and gradient work, border radius, stroke and opacity settings can chew up a ton of time.
Is there a way to automate these types of web design grunt work?
There actually is. It’s called CSSHat and what it does is builds the CSS framework for what ever you are doing for you. Below, you will see part of a graphic package I was working on for a client (I was built the powerpoint presentation). The seminar is now over and I need to transfer this to the web so that the attendees can grab the exercise material. In doing so, I simply grabbed the first part of the powerpoint and then built a button at the bottom of the graphic.
With CSSHat, I can build the button in photoshop and then, with a click of a button, it generates the css of the layer so that I can extropolate and add into into the css of the website.
To generate this, all I had to do was select the layer and then open up CSS Hat. It gives you the CSS and several preprocessors such as LESS to choose from. You can also add the width and height, it generates all the webkits for the various browsers and if you want, can actually structure the class attribute to the beginning of the structure for you.
CSS Hat isn’t free. It’s $29.99 but in my opinion is very much worth it if you want to build buttons and don’t want to tinker with things like shadows, gradients, and what not.
And in case, you are wondering, I have absolutely nothing to gain from suggesting it.