I hope you had a chance to enjoy my first article on created a tabbed navigation structure with nothing but pure Cascading Styles. With this article we'll move beyond the basics, evolve from the flat colored boxes and lines to nice, rounded 3D looking tabs. This article will provide instructions on creating the images in FireWorks, slicing them correctly, and fitting them into our tab scheme.
I highly doubt that I need to convince you of the benefits of implementing tabs as a navigation mechanism. If you are unconvinced, or haven't read this article's predecessor, please do that now. But if you feel you're ready to move right into the fancy-schmancy 3D tab creation, by all means read on!
I am using FireWorks for the image creation and slicing, but I can't force you to do the same. If you have Photoshop, go ahead and use it. If you don't have a decent image manipulation tool, I recommend the GIMP (http://gimp.org/), it's Free Software, and it rocks. But because I initially did this using FireWorks, I'm just going to outline the steps I've already taken. Call me lazy...
My previous article described in detail how to create some wonderful tabs, and in the end they looked like this:
And what we'll have when we'll have this:
Much nicer, wouldn't you agree? Let's get into the first step then -- the image creation and slicing.