Web Design


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.

Resources Web Design

WordPress Creation & Testing Resources

The start to any good theme, or theme evaluation for that matter, is some sample content. Sure you could fire up your keyboard and start adding in random Lorem Ipsum all over the place, but chances are you are going to miss a few (or more than a few) situations where content breaks your theme. A better way to go is to load your WordPress website with some dummy content, especially dummy content that may break your site’s styling. Below is an ongoing list of such resources:

WP Test

WP Test is a set of entries, which is updated as new tests present themselves, for your WordPress theme or plugin to test that every possible option works correctly. Safeguard your clients, by making sure your themes are airtight and behave correctly. Just import the WordPress export and you are ready to test. I recommend this one heartily, the huge/unbreaking/title/block broke almost all of my themes and now they work perfectly because of this test.

WP FILL ME creates WordPress filler content for theme testing and does so with explanatory text on what it is testing. Useful if you are starting your themes from scratch and need a starter test.

WPCandy also has a similar testing suite from the 2 above. I have used it before and liked the results, but it hasn’t been updated in a while.

Filler Images

For testing images on websites, I used to use a few dynamically generated sites like:

Place Kitten

Placehold It

Place Dog

Lorem Pixel

Now I use holder.js as it is a JavaScript library that runs on your site rather than making a call to another site, which makes it great for testing on development sites, or when you might be away from internet connectivity. There is also a WordPress plugin called Holder for the script which means you can be up in running in seconds, if you are afraid of wiring up JavaScript.

[holder height="200" width="625" theme="industrial"] creates this image:


Let me know in the comments if I am missing any super resources and I’ll add them in.