Trendy Navigation Bars - Part 2 - Images
As I mentioned yesterday I wanted to mimic the style of navigation bars on sites like Digg. So, the first thing I did was take a screenshot and zoom in on one of the "buttons". Doing so kind of demystifies the whole process. As you can see it's nothing more than a gradient for a background and then two vertical 1px lines — one light, one dark.
Even with my graphical skills I knew this was going to be easy to do. All I needed was my copy of Fireworks (no need for the overkill of Photoshop) and a spare ten minutes.
First thing to do is create a rectangle. Don't worry about the size or proportions. From the properties pane change the rectangle's fill to a linear gradient. Use the two colour pickers in the fill box to change from one colour to a lighter variation of it.
Note that the gradient is horizontal. Select the shape, press Q, hold down shift and rotate 90o, making the gradient vertical. Now drag the rectangle's corners until it's in the dimensions you want. It's easier this way than trying to rotate the fill gradient itself by a quarter turn.
All you need to do now is add the two vertical lines the same height as the box. Align the two lines next to each other. Make one a really light shade of the colour you've chosen for the bar and the other one the darker shade of the gradient. That should be all you need to do.
I've written this assuming some knowledge of Fireworks as it would take way too long and far too many screenshots to do it any other way. Sorry.
If you've never heard of Fireworks I'd recommend you give it a go. Compared to Photoshop it makes the creation of web graphics a doddle and well within the ability of the average developer.
Here's a PNG file (native Fireworks format) that you can open and edit in Fireworks. I've included the slices required to export the two images needed for the CSS we'll look at tomorrow.
Skip to the 
You can subscribe to an individual 
hi Jake,
Not to promote myself, but I've written an article quite similar a while ago:
{Link}
next to the menu, i also covered proper web buttons:
{Link}
Now we're on this topic: i remember a screenshot here of a product you build for some conference. it looked amazing, more details about that design would be most welcome :)
I prefer to create gradients like that at a 1px width, and use repeat-x to make it strech arbitrarily wide depending on the containing box's width. The only thing that you then have to keep consistent is the height. This way, you don't have to run back to the image editor if you need to add a wide button.
If you want to use the "short bars", or something else besides the natural block borders in CSS to define the divider, you can simply add a block as the divider with a 2px-wide (or so) image background, and no content. (or perhaps a nbsp if you're using a table).
I use Fireworks too, love the object based approach (vector and bitmap objects mixed on the same layer)
I agree with Brian - I'd tend to use a background 'slice' that repeats.
If you want a really good coverage of how you can build this type of navigation bar in CSS/XHTML so it is robust (won't break if you increase/decrease the text size) and accessible, see Dan Cederholm's latest book: Bulletproof Web Design {Link}
Agreed Patrick - Bulletproof web design rocks. I've used this same technique on numerous projects as well as 'sliding doors' tabs. All good stuff.
I suppose I'll get flamed 15 ways to hell for this, but if you're in an Intranet/Coporate environment that supports it, you could use a Filter to get the gradient.
ie. filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=Gainsboro);
@Dragon:
That wouldn't fly in a corporate environment. IE (the most current, anyway) will probably give a security warning if you try to run that in most corporate security configurations. Who wants to generate security warnings in order to get a gradient fill?
@Brian,
It doesn't in the corporate environment where I am. And yes we use IE. No problems at all with running the filter because it's a built in function of IE. The only problem is if you use non-IE browsers.
If you are not familiar/do not like Fireworks, you could well try Inkscape ( www.inkscape.org ). Pretty good SVG editor, though the only bitmap export available seems to be PNG.