Transparent Tab & Button Graphics

Tabbed navigation, while not always the perfect choice in all situations, certainly has a lot of advantages. You can display a lot of information in a relatively small space and with near universal recognition, there's really no learning curve for your visitors.

"Is it really that hard to create good looking tabs using graphics software like Photoshop or Fireworks?"

No, but it is time consuming and you have to know what text will be displayed on each tab ahead of time. It'd be slick if you could design a tab once and then generate as many as you needed with whatever text labels you wanted without having to go back and create each one by hand.

Why not just use CSS and avoid images altogether you ask? Well, that's a pretty good solution if your tab design is simple (e.g. no rounded corners or complicated bevels) and you take the time to make sure it displays properly in every browser/version under the sun. I've done this, it's worked... sometimes. Usually, at least for me, it ends up being a bigger pain that just creating the images in the first place. Don't get me wrong, when you've got users who are on dial-up, CSS could very well be the best choice just to keep the page generation time to a minimum. Even though tab images themselves may be quite small (usually < 2KB with the solution I present here), page load is often a result of how many elements are downloaded, not just their overall size. If you litter your page with a lot of tiny images, your users will be facing the hourglass more than you (and certainly they) would like. Not to mention issues surrounding accessibility and search engine optimization. If I've scared you enough where you think a CSS solution might be the better choice for your particular project, I'd like to suggest the following resources:

Having said all that, ahem, when used sparingly and conscientiously tabs can be really effective. And to make good looking tabs easy, I created the following. Let's move on to a demonstration of tab generation...