10 Jun 2013

6 photoshop plugins for web designers

I know a lot of folks are moving away from designing sites in photoshop and going straight to designing in the browser. I still like designing and coming up with rough comps in photoshop. I don’t spend as much time getting things “pixel perfect” in a 960 grid as I did in the past, however, I like to design interfaces, color schemes, buttons, and come up with the overall look and feel of a site before moving to the browser.

Lately I’ve been using a handful of plugins that improve my web design workflow. Here are a few worth checking out:

###CSS3Ps CSS3PS CSS3Ps is a handy tool that converts your layer styles into CSS3. It works really well for quickly grabbing gradients, borders, box shadows, etc. It doesn’t always turn out perfect, but gives you a nice starting point. And for Sass users, it can spit that out as well.


Enigma 64 Enigma64 exports your photoshop layers to losslessly optimized images but even cooler is it’s ability to export and encode your images to Base64. $20 ain’t too shabby for the amount of time it can save.

Web zap

Web zap Web zap aids in creating website mock-ups by giving you the ability to generate common interface elements with the click of a button. It generates lorem ipsum text and common layout patterns with ease. It also has a nice preview feature that will take your design and put it in an iPad/iPhone, etc.

FontShop Plugin

FontShop The FontShop plug-in gives you the ability to test out and preview a massive amount of fonts in your mock-up. It can be extremely useful if you use TypeKit as a lot of the fonts in TypeKit are in FontShop as well.

Corner Editor

Creating rounded corner boxes in photoshop is easy, however, if you’ve ever tried to resize them you’ll know that the corners don’t maintain their radius and become distorted. Corner Editor is a simple free script that makes working with rounded borders in photoshop much less frustrating.

Transform Each

I always wished photoshop had a “transform each” option like in illustrator. Luckily, Kamil Khadeyev wrote an awesome little script that brings that feature into photoshop. I highly recommend checking out his blog for other useful PS scripts.