When I design, the annoying part of getting my designs in Adobe Illustrator or Photoshop on the web, is the export process. It can take a long time to get all the elements in my design exported out as web usable images. Today I ran across 2 useful utilities that can greatly speed the process.


CSS Hat takes Photoshop layer effects and translates them into valid CSS3 markup. As long as you are styling with layer styles, you can get the applicable code in CSS.


Slicy, likewise, takes Photoshop layers and exports each one as a transparent PNG, JPG, or GIF based on your layers export settings. Especially useful if you are layering image elements.

While you can achieve both effects by spending a little time, these utilities can speed up your workflow if you are doing this kind of work a lot.