8) Make a new layer and name it "Surroundings." Get out your Rectangular Marquee Tool and make a selection like the one in the image below. It should comfortably fit the buttons in it. Fill it with #979797. It may get confusing here too. Go to your "Mini Button" layers. While holding SHIFT, Ctrl + Click each one of the "Mini Button" layers. There should be five seperate selections now if you did it right. Now to go to Select>Modify>Expand and enter in 1 pixel. Now go to the "Surroundings" layer and hit the delete key. Look at the image if help is needed:
9) Go to the Blending options (little 'f') on the "Surroundings" Layer.
Go to Stroke and apply a 1 px, black, outside stroke. Refer to the
below images to apply the other Blending Options:
Inner Glow
Bevel and Emboss
10) Make a new layer called "Navi." Get out the Polygonal Lasso Tool
and make a shape similar to the one in the picture below. Hold Shift to
get straight lines and angles. Once your selection is made, fill it
with #979797. On a note about the shape below, I made the whole bar
first without the angled slit near the middle. Then, I selected that
shape and just deleted it. (In the image below, before doing this step,
I moved all the layers down 7-8 pixels. If you already had ample space,
disregard this message.)
11) Go to the Layer's Palette and click on Blending Options for the "Navi" Layer. Apply the same Layer Styles as in Step #9.
12) After applying the Blending Options, duplicate the "Navi" Layer.
Now, go to Edit>Transform>Flip Vertical. Then go to
Edit>Transform>Flip Horizontal. Position this layer at the bottom
as shown in the image below.
Finally, we are done! You can add some text (pixel fonts work really
well) or even add more shapes and things around the buttons. I just
added some text and here is my final product:
