As any web designers like me that use Photoshop as the tool to design websites, I believe many of us used layer styles to style up the common design elements like buttons and boxes. And when comes to converting design to CSS styles, we will have to manually enter the properties and values which is very inefficient and time consuming.
Well, rejoice! Today I’m going to introduce 2 tools that can quickly convert Photoshop layer styles to CSS/CSS3 with just a single click. They are: CSS3Ps which is a free tool and CSShat which is a premium plugin. Both tools are aimed to save your time and accurately convert your layer styles to reusable CSS styles.
CSS3Ps
CSS3Ps is free cloud based photoshop plugin that converts your layers to CSS3. You can download the plugin at the official site and also watch this video to see how it works. It can convert a lot of layer styles properties, width and height, border radius, gradient and more!
One big plus of this plugin is that you can convert multiple layers at one time! The only disadvantage is that the conversion is done in the cloud, which means that you have to be connected to the Internet.
CSSHat
CSSHat is another “from PSD layer styles to CSS styles” plugin that I want to introduce today. It’s not free ($29.99 for one license), but it’s feature packed as well! One thing I like about this plugin is that the conversion is done within Photoshop interface. Just select the layer and it will generate the CSS for you instantly. Check this video to see how it works.
Personally I bought CSSHat about months ago and absolutely love it. It becomes one of my indispensable tool when using for designing and PSD to CSS conversion. Both are really helpful tools and will really save your time. I would say that Web Designers out there should really try them out!
Comments