In the 2nd part of this series I’m going to show you how to design a cool set of navigation buttons, like the one shown in the below image.
[You must be registered and logged in to see this image.]

1. Open your Document



Let’s get started! First of all open up the PSD you created from the last tutorial. Now create a selection on your canvas the same width as the header graphic, but only about 40 px in height.
[You must be registered and logged in to see this image.]
Now you’ve made your selection, smooth it by about 5 pixels by going to Select > Modify > Smooth.
[You must be registered and logged in to see this image.]
On a new layer fill this selection with the same color as the background, in my case it’s #262626. Now apply this Gradient Overlay to add more detail to the navigation bar.
[You must be registered and logged in to see this image.]
2. Adding Details to Navigation


Hold ctrl and click the main layer, this will make a selection around the whole layer. Create a new layer and draw a White/Transparent gradient from above the top of the selection to the middle or bottom, or you could just fill the selection with white, not much difference.
[You must be registered and logged in to see this image.]
Now, since the navigation bar is 40 px in height, make a selection at the bottom containg 20 pixels of the gradient, press delete to delete the bottom part of the gradient.
[You must be registered and logged in to see this image.]
Next, lower the opacity for this layer to about 20% and change the layer mode to either Soft Light or Overlay. [You must be registered and logged in to see this image.]
Again select the main layer and create a new layer. Fill your new selection with white (#ffffff) and move the selection up one pixel, press delete.
[You must be registered and logged in to see this image.]
Lower the opacity for this layer to about 20-35% and change the layer mode to, again, Soft Light or Overlay. [You must be registered and logged in to see this image.]
Repeat that for the top line, except when you’re done, move the line down one pixel. This is just for the sake of small details.
[You must be registered and logged in to see this image.]
3. Creating Buttons


Now it’s time to start making the buttons! Firstly, make a selection inside of the bar, make it a healthy-sized button -the selection of my button was 100×26 pixels. You should/can also smooth your button selection by 2-4 pixels (Select > Modify > Smooth)
[You must be registered and logged in to see this image.]
Now, fill the selection with a yellowish gradient – the colors I used for my gradient were #d3bd3e and #76551e.
[You must be registered and logged in to see this image.]
Right-click your layer, go into the Blending Options apply the following layer styles to your button layer:

<LI sizset="26" sizcache="4">Inner Shadow
<LI sizset="27" sizcache="4">Inner Glow
<LI sizset="28" sizcache="4">Color Overlay
<LI sizset="29" sizcache="4">Gradient Overlay
<LI sizset="30" sizcache="4">Pattern Overlay (Download pattern from here: Warning Tape.)

1. Stroke
   

You should be left with a nice, industrial-styled button pretty much like this:
[You must be registered and logged in to see this image.]
Not bad for just a few layer styles, huh? [You must be registered and logged in to see this image.]
4. Button Detailing



If you want to give your button a few extra details, follow this step. On a new layer draw a red (#ff0000) line from one end of the button to the other.
[You must be registered and logged in to see this image.]
Using the eraser tool, using a large, soft brush erase the left and right sides away.
[You must be registered and logged in to see this image.]
Now apply the following Drop Shadow and Outer Glow to this red line layer.
[You must be registered and logged in to see this image.]
To finish off the button add your text. I used Tahoma, 11pt, Bold, No Anti Aliasing, #ffffff, also with this Outer Glow applied.
[You must be registered and logged in to see this image.]
Merge your button layers together (not including the text layer) then duplicate the two remaining layers and move them along the line. Repeat this as many times as you want, depending on how many buttons you want. I ended up with 7 buttons, after finishing off, you should also center all of the buttons in the navigation bar.
[You must be registered and logged in to see this image.]
Thanks for reading this part of the tutorial! If you want to continue, click one of the links below.]