Creating the tab source graphics

To create the source images you see in the demo, I used Fireworks with a template file that looks like this:

And the same file but with slicing areas turned on:

In total, there are 10 component images to each tab style:

Image File Name Description
left_first_inactive.png The left edge of the inactive first tab
left_inactive.png The left edge of an inactive tab
middle_inactive.png The single-pixel image to tile through an inactive tab's center
right_inactive.png The right edge of an inactive tab
left_first_active.png The left edge of the active first tab
left_active.png The left edge of an active tab
middle_active.png The single-pixel image to tile through an active tab's center
right_active.png The right edge of an active tab
tab_bg.png The background image to run behind the tabs (extends the content seperator line)
tab_shadow.png The shadow graphic placed to the right of the last tab

The buttons are very simple to create with really only three components necessary:

I used Fireworks to create the PNG source images because frankly, that's exactly what Fireworks was made for. I can't sing the praises of Fireworks enough and if you haven't sunk your teeth into it yet, I HIGHLY recommend it.

That's not to say however that you can't develop these source graphics in other software. I didn't take the time to create all the source templates in Photoshop as native PSD documents but I did do the Default tab example... just as a helpful guide to those determined to use Photoshop. You can download it (and everything else you might want) from the next page...