Step 1 Create a new document, 25 pixels high is good. Make it as long as you think you'll need -- you can trim it down later.
Step 2 Make a new layer and fill with white. Then in the blending options set a gradient overlay light blue>white and a 1 pixel black inside stroke.
Step 3 Now add your text. Make sure there's plenty of space between each option. When you're done, trim up the border length-wise to fit the text and center the text vertically. I generally use Arial without any smoothing for the most professional look.
Step 4 Duplicate the background layer and edit the blending options. This time change the color of the gradient overlay but leave everything else the same. I chose a light yellow/orange color. This is the mouseover layer.
Step 5 Take out the slice tool and draw a box around every other menu item. This will slice out each menu item to a separate image later.
Step 6 With the slices in place, hide the mouseover layer so we're back to the original color. Then choose file>save for web and save it in a folder.
Step 7 Now un-hide the mouseover layer and choose save for web again. This time save into a different folder.
Step 8 You should now have two different folders. One with the normal images and one with the mouseover images. They should be the same size and work very well in any interface.
